찬성tracTor 테스트 튜토리얼: 자동화 도구 프레임워크

⚠️ 서비스 중단 예정: 찬성trac토르는 더 이상 사용되지 않으며 보관 처리되었습니다.2023년 8월에 지원이 종료되었고 Angular CLI는 Pro 버전을 단종했습니다.tracAngular 15 이후 Tor 빌더. 선택하세요 극작가, CypressWebdriverIO 또는 TestCafe를 새로 구입하세요. 종단 간 테스트아래의 안내 사항은 기존 스위트룸에 적용됩니다.

왜 전문가가 필요할까요?tracTor 프레임워크?

Java스크립트는 거의 모든 웹 애플리케이션에서 사용됩니다. 애플리케이션이 커짐에 따라, JavaScript 또한 규모와 복잡성이 증가합니다. 이러한 경우 테스터가 다양한 시나리오에 대해 웹 애플리케이션을 테스트하는 것이 어려워집니다.

때로는 AngularJS 애플리케이션에서 웹 요소를 캡처하는 것이 어렵습니다. JUnit or Selenium 웹드라이버.

찬성tracTor는 Node.js로 작성된 프로그램입니다. Java스크립트이며 Node와 함께 실행되어 AngularJS 애플리케이션의 웹 요소를 식별하고, WebDriver를 사용하여 사용자 동작으로 브라우저를 제어합니다.

그렇다면 AngularJS 애플리케이션이란 정확히 무엇일까요?

AngularJS와 AngularJS 기반 애플리케이션은 확장된 HTML 구문을 사용하여 웹 애플리케이션 구성 요소를 표현하는 웹 애플리케이션입니다. 주로 동적 웹 애플리케이션에 사용되며, 일반 웹 애플리케이션에 비해 코드가 간결하고 유연합니다. 단, AngularJS 1.x 버전은 2021년 12월 31일부로 장기 지원(LTS)이 종료되었으므로 현재는 레거시 애플리케이션으로 간주됩니다.

일반 명령어를 사용해서는 AngularJS 웹 요소를 찾을 수 없는 이유는 무엇인가요? Selenium 웹드라이버?

AngularJS 애플리케이션에는 ng-repeater, ng-controller, ng-model 등과 같이 기본 HTML 속성에 포함되지 않은 추가 HTML 속성이 있습니다. Selenium 로케이터. Selenium 다음을 사용하여 해당 웹 요소를 식별할 수 없습니다. Selenium 코드. 그래서, 프로trac정상의 토르 Selenium 웹 애플리케이션에서 이러한 속성을 처리하고 제어할 수 있습니다.

찬성tracTor는 AngularJS 기반 애플리케이션을 위한 엔드 투 엔드 테스트 프레임워크입니다. 대부분의 프레임워크는 테스트 실행에 중점을 두는 반면, Tor는 특정 기능 구현에 중점을 둡니다. 단위 테스트 AngularJS 애플리케이션용, ProtracTor는 애플리케이션의 실제 기능 테스트에 중점을 둡니다.

시작하기 전에 프로tracTor를 사용하려면 다음 항목을 설치해야 합니다.

1. Selenium: 당신은 찾을 수 있습니다 Selenium 설치 단계 Selenium WebDriver 설치 가이드.
2. NPM(Node.js): Pro를 설치하려면 Node.js를 설치해야 합니다.tracTor. 설치 단계는 다음에서 확인할 수 있습니다. Node.js 다운로드 및 설치 가이드.

찬성trac토르 설치

단계 1) 명령 프롬프트를 열고 다음을 입력하세요. “npm install -g protrac토르” Enter 키를 누릅니다..

위 명령어를 실행하면 필요한 파일이 다운로드되고 Pro 버전이 설치됩니다.trac아래 그림과 같이 클라이언트 시스템에 Tor가 설치되어 있습니다.

단계 2) 다음을 사용하여 설치 및 버전을 확인하십시오. "찬성tractor 버전. " 성공하면 아래 스크린샷과 같은 버전이 표시됩니다. 그렇지 않은 경우 1단계를 다시 수행하십시오.

(3단계와 4단계는 선택 사항이지만 더 나은 연습을 위해 권장됩니다)

단계 3) WebDriver 관리자를 업데이트하세요. WebDriver 관리자는 특정 브라우저에서 Angular 웹 애플리케이션에 대한 테스트를 실행하는 데 사용됩니다. Pro 버전 이후에는 업데이트가 필요합니다.tracTor가 설치되어 있는 경우, WebDriver 관리자를 최신 버전으로 업데이트해야 합니다. 명령 프롬프트에서 다음 명령을 실행하여 업데이트할 수 있습니다.

webdriver-manager update

드라이버 바이너리 파일은 아래와 같이 다운로드됩니다.

단계 4) WebDriver 관리자를 시작합니다. 이 단계를 수행하면 WebDriver 관리자가 백그라운드에서 실행되고 pro를 통해 실행되는 모든 테스트를 모니터링합니다.trac토르.

테스트가 실행되면 WebDriver가 해당 브라우저에 자동으로 로드합니다. 아래 명령어를 사용하여 관리자를 시작하세요.

webdriver-manager start

콘솔에 수신 대기 주소가 표시됩니다.

자, 만약 다음 페이지로 이동하신다면 URL (http://localhost:4444/wd/hub/static/resource/hub.html브라우저에서 해당 주소를 입력하면 WebDriver 관리자가 백그라운드에서 실행되는 것을 확인할 수 있습니다.

Pro를 사용한 AngularJS 애플리케이션 테스트 예시trac바위 산

드라이버 관리자가 실행 중인 경우, ProtracTor를 실행하려면 두 개의 파일이 필요합니다. 투기 파일 및 구성 파일.

1. 구성 파일이 파일은 전문가에게 도움이 됩니다.trac테스트 파일(specs.js)이 있는 위치로 Tor를 연결하고 통신합니다. Selenium 서버(Selenium 주소). Chrome은 Pro의 기본 브라우저입니다.trac토르.
2. 사양 파일: 이 파일에는 애플리케이션과 상호 작용하는 논리와 위치 지정자가 포함되어 있습니다..

단계 1) 우리는 문을 열어야 합니다 https://angularjs.org 그리고 "여기에 이름을 입력하세요" 텍스트 상자에 "GURU99"라는 텍스트를 입력합니다.

단계 2) 이 단계에서,

1. 이름을 입력했습니다.Guru99 "
2. 출력 텍스트 "안녕하세요" Guru99인치가 보입니다.

단계 3) 이제 이름을 입력한 후 웹페이지에서 텍스트를 캡처하고 예상 텍스트로 확인해야 합니다..

Code:

구성 파일을 준비해야 합니다 (conf.js) 및 사양 파일 (spec.js) 상술 한 바와 같이.

spec.js의 논리:

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello GURU99!');
  });
});

Code spec.js에 대한 설명:

1. 설명('GURU99 이름을 입력하세요', function() 설명 구문은 다음에서 가져온 것입니다. 재스민 프레임워크여기서 "describe"('GURU99 이름 입력')는 일반적으로 애플리케이션의 구성 요소(클래스, 함수 등)를 정의합니다. "GURU99 입력"이라는 코드 모음에서는 단순히 문자열일 뿐 코드가 아닙니다.
2. it('이름을 GURU99로 추가해야 합니다', function()
3. browser.get('https://angularjs.org')와 마찬가지로 Selenium WebDriver browser.get은 언급된 내용으로 새 브라우저 인스턴스를 엽니다. URL.
4. 요소(by.model('이름')).센드키('GURU99') 여기서는 모델 이름을 "yourName"으로 사용하여 웹 요소를 찾고 있는데, 이는 "의 값입니다.ng 모델웹페이지에 "라고 표시되어 있습니다. 아래 스크린샷을 확인하세요."

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) 여기서는 다음을 사용하여 웹 요소를 찾습니다. xpath 그 값을 변수 "guru"에 저장합니다..
6. 기대(guru.getText()).같음('Hello GURU99!') 마지막으로 웹페이지에서 가져온 텍스트( gettext() 사용)를 예상 텍스트와 함께 확인하고 있습니다.

conf.js의 논리:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};

Code conf.js에 대한 설명

1. SeleniumAddress: 'http://localhost:4444/wd/hub' 구성 파일은 Pro에 알려줍니다.trac위치를 위해 Selenium 상담할 주소 Selenium 웹드라이버.
2. 사양: ['spec.js']이 줄은 Pro에게 알려줍니다trac테스트 파일 spec.js의 위치를 ​​알려주세요.

실행 Code

먼저 conf.js와 spec.js 파일이 있는 폴더로 이동한 다음 아래 단계를 따르세요..

단계 1) 명령 프롬프트를 엽니 다.

단계 2) 확인 Selenium WebDriver 관리자가 실행 중입니다. 실행 중인지 확인하려면 "webdriver-manager start" 명령어를 입력하고 Enter 키를 누르십시오..

(만약 Selenium WebDriver가 실행 중이 아니므로 Pro 버전 테스트를 진행할 수 없습니다.tracTor가 웹 애플리케이션을 처리할 WebDriver를 찾을 수 없습니다.

단계 3) 새 명령 프롬프트를 열고 다음과 같이 명령을 입력합니다. "찬성tractor conf.js” 설정 파일을 실행합니다. 실행 결과는 아래와 같습니다.

설명 :

• 여기 프로tracTor는 지정된 spec 파일이 포함된 구성 파일을 실행합니다.
• 우리는 볼 수 있습니다 Selenium 서버가 "에서 실행 중입니다.http://localhost:4444/wd/hub” 이는 우리가 conf.js 파일에 제공한 것입니다.
• 또한 위의 스크린샷과 같이 통과한 횟수와 실패한 횟수를 확인할 수 있습니다..

합격 결과가 확인되었습니다. 다음으로 불합격 결과를 살펴보겠습니다.

단계 1) 열고 변경하면 spec.js 파일이 아래와 같이 "'Hello change GURU99'"로 변경될 것으로 예상됩니다.

spec.js 변경 후 :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello change GURU99!');
  });
});

단계 2) spec.js 파일을 저장하고 위의 "실행" 단계를 반복하십시오. Code" 부분

이제 위 단계를 실행해 보세요.

결과 :

스크린샷에서 'F'로 표시된 실패 결과를 볼 수 있으며 그 이유는 다음과 같습니다. “'안녕 GURU99!'을 기대했습니다. 'Hello Change GURU99!'와 같습니다. 또한, 코드 실행 시 발생하는 오류 수를 보여줍니다.

우리도 같은 결과를 얻을 수 있을까요? Selenium 웹드라이버?

AngularJS 요소는 XPath 또는 CSS 선택자를 사용하여 찾을 수 있는 경우가 있습니다. Selenium WebDriver. 하지만 이러한 요소들은 동적으로 생성되고 리바운드되므로 Pro는 그렇지 않습니다.tracTor는 AngularJS 스위트에 더 안전한 옵션이었습니다.

Jasmine Reporters를 사용하여 보고서 생성

찬성tracTor는 Jasmine 리포터를 지원합니다. 이 섹션은 다음을 사용합니다. JUnitXmlReporter를 사용하여 아래 단계를 따라 테스트 실행 보고서를 자동으로 XML 형식으로 생성할 수 있습니다.

Jasmine Reporter 설치

두 가지 옵션이 있습니다. 지역 옵션과 글로벌 옵션입니다.

1. 명령 프롬프트를 열고 다음 명령을 실행하여 로컬에 설치합니다.

npm install --save-dev jasmine-reporters@^2.0.0

위 명령어는 jasmine-reporters를 실행된 디렉토리 내에 로컬로 설치합니다.

2. 명령 프롬프트를 열고 글로벌 설치를 위해 다음 명령을 실행합니다.

npm install –g jasmine-reporters@^2.0.0

여기서는 리포터가 로컬에 설치됩니다..

단계 1) 명령을 실행하십시오.

npm install --save-dev jasmine-reporters@^2.0.0

아래와 같은 명령 프롬프트에서.

단계 2) 디렉터리의 설치 폴더를 확인하세요.. 아래 스냅샷처럼 정상적으로 설치가 되었다면 “Node_modules”를 사용할 수 있습니다.

단계 3) 기존 conf.js 파일에 다음 색상 코드를 추가합니다.

exports.config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      capabilities: {
          'browserName': 'firefox'
      },
      specs: ['spec.js'],
     framework: 'jasmine2' ,
      onPrepare: function() {
          var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');
          jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true)
          );
     }
   };

코드 설명:

코드에서는 "JUnitXmlReporter” 그리고 보고서를 저장할 경로를 제공합니다.

단계 4) 명령 프롬프트를 열고 명령을 실행하세요. 용tractor conf.js.

단계 5) 위 코드를 실행하면 해당 경로에 junitresults.xml이 생성됩니다.

단계 6) XML을 열고 결과를 확인합니다. 실패 메시지는 결과 파일에 다음과 같이 표시됩니다. 테스트 케이스 테스트가 실패했습니다. "spec.js"에서 예상한 결과와 웹 페이지의 실제 결과가 일치하지 않아 테스트 케이스가 실패했습니다.

단계 7) 증거나 결과 파일의 경우 junitresult.xml 파일을 사용하세요.

찬성tracTor와 최신 테스트 자동화 대안 비교

프로 이후로tracTor는 더 이상 업데이트를 받지 않으므로, 새로운 제품군을 계획하는 팀은 Angular 프로젝트에서 현재 마이그레이션하는 프레임워크와 Tor의 장단점을 비교해야 합니다. 아래 표는 Pro 버전과 Tor 버전을 비교합니다.trac아래 FAQ에서 가장 자주 나오는 세 가지 대안을 통해 문제를 해결해 보겠습니다.

기존 프로팀이 있는 팀tracTor 제품군은 일반적으로 가장 빠르게 움직입니다. 웹드라이버IO명령 방식과 Selenium-기반 드라이버 관리는 Pro와 유사한 기능을 유지합니다.tracTor 테스터들은 이미 알고 있습니다. 새로 시작하는 팀이나 가장 빠른 테스트 실행이 필요한 팀은 Tor를 더 자주 선택합니다. Cypress 아니면 극작가라고 해도 좋겠네요.

자주 묻는 질문