각도기 테스트 튜토리얼: 자동화 도구 프레임워크

작성자 : 제임스 하트만 제임스 하트만
Hours 업데이트

각도기 테스트란 무엇입니까?

길게 끄는 것 자동화 및 엔드투엔드 행동 중심 테스트 도구로서 중요한 역할을 합니다. 지원 AngularJS 애플리케이션을 개발하고 다음과 같은 강력한 기술을 결합하는 솔루션 통합업체로 활동합니다. Selenium, Jasmine, 웹 드라이버 등 각도기 테스트의 목적은 AngularJS 애플리케이션을 테스트하는 것뿐만 아니라 일반 웹 애플리케이션에 대한 자동화된 회귀 테스트도 작성하는 것입니다.

각도기 프레임워크가 필요한 이유는 무엇입니까?

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

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

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

좋습니다. 이제 AngularJS 애플리케이션이 정확히 무엇인지 논의해 보겠습니다.

AngularJS 애플리케이션은 확장된 HTML 구문을 사용하여 웹 애플리케이션 구성 요소를 표현하는 웹 애플리케이션입니다. 주로 동적 웹 애플리케이션에 사용됩니다. 이러한 응용 프로그램은 일반 웹 응용 프로그램에 비해 덜 유연하고 코드를 사용합니다.

Normal을 사용하여 Angular JS 웹 요소를 찾을 수 없는 이유 Selenium 웹 드라이버?

Angular JS 애플리케이션에는 ng-repeater, ng-controller, ng-model.. 등과 같은 추가 HTML 속성이 포함되어 있지 않습니다. Selenium 로케이터. Selenium 다음을 사용하여 해당 웹 요소를 식별할 수 없습니다. Selenium 암호. 따라서 각도기는 맨 위에 있습니다. Selenium 웹 애플리케이션에서 이러한 속성을 처리하고 제어할 수 있습니다.

각도기는 Angular JS 기반 애플리케이션을 위한 엔드투엔드 테스트 프레임워크입니다. 대부분의 프레임워크는 Angular JS 애플리케이션에 대한 단위 테스트를 수행하는 데 중점을 두지만 Protractor는 애플리케이션의 실제 기능을 테스트하는 데 중점을 둡니다.

Protractor를 시작하기 전에 다음을 설치해야 합니다.

  1. Selenium당신을 찾을 수 있습니다 Selenium 다음 링크의 설치 단계(https://www.guru99.com/installing-selenium-webdriver.html )
  2. NPM(Node.js) NodeJS 설치, Protractor를 설치하려면 NodeJS를 설치해야 합니다. 다음 링크에서 이 설치 단계를 찾을 수 있습니다. ( https://www.guru99.com/download-install-node-js.html )

각도기 설치

단계 1) 명령 프롬프트를 열고 다음을 입력하세요. "npm install -g 각도기" Enter 키를 누릅니다..

위 명령은 필요한 파일을 다운로드하고 클라이언트 시스템에 Protractor를 설치합니다.

각도기 설치

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

각도기 설치

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

단계 3) 웹 드라이버 관리자를 업데이트합니다. 웹 드라이버 관리자는 특정 브라우저에서 앵귤러 웹 애플리케이션에 대한 테스트를 실행하는 데 사용됩니다. Protractor를 설치한 후 웹 드라이버 관리자를 최신 버전으로 업데이트해야 합니다. 명령 프롬프트에서 다음 명령을 실행하여 이를 수행할 수 있습니다.

webdriver-manager update

각도기 설치

단계 4) 웹 드라이버 관리자를 시작합니다. 이 단계에서는 백그라운드에서 웹 드라이버 관리자를 실행하고 각도기를 통해 실행되는 모든 테스트를 수신합니다.

Protractor를 사용하여 테스트를 실행하면 웹 드라이버가 자동으로 로드되어 관련 브라우저에서 테스트를 실행합니다. 웹 드라이버 관리자를 시작하려면 명령 프롬프트에서 다음 명령을 실행해야 합니다.

webdriver-manager start

각도기 설치

이제 다음 URL로 이동하면 (http://localhost:4444/wd/hub/static/resource/hub.html) 브라우저에서 실제로 백그라운드에서 실행되는 웹 드라이버 관리자를 볼 수 있습니다.

각도기 설치

Protractor를 사용한 샘플 AngularJS 애플리케이션 테스트

각도기를 실행하려면 두 개의 파일이 필요합니다. 투기 파일 및 구성 파일.

  1. 구성 파일: 이 파일은 각도기가 테스트 파일(specs.js)이 있는 위치를 파악하고 Selenium 서버(Selenium 주소). Chrome은 Protractor의 기본 브라우저입니다.
  1. 사양 파일: 이 파일에는 애플리케이션과 상호 작용하는 논리와 위치 지정자가 포함되어 있습니다..

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

Protractor를 사용한 샘플 AngularJS 애플리케이션 테스트

단계 2) 이 단계에서,

  1. Guru99라는 이름을 입력했습니다.
  2. 출력 텍스트에 "Hello Guru99"가 표시됩니다.

Protractor를 사용한 샘플 AngularJS 애플리케이션 테스트

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

암호:

구성 파일을 준비해야 합니다 (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!');
  });
});

spec.js의 코드 설명:

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

Protractor를 사용한 샘플 AngularJS 애플리케이션 테스트

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

conf.js의 논리:

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

conf.js의 코드 설명

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

강령의 실행

여기에서는 먼저 디렉터리 경로를 변경하거나 시스템에 confi.js 및 spec.js가 있는 폴더로 이동합니다..

다음 단계를 따르세요.

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

단계 2) Selenium 웹 드라이버 관리자가 실행 중인지 확인하세요. 이를 위해 "webdriver-manager start"라는 명령을 내리고 Enter를 누르세요..

AngularJS 애플리케이션 실행

(셀레늄 웹 드라이버가 실행 중이 아니면 Protractor가 웹 애플리케이션을 처리할 웹 드라이버를 찾을 수 없으므로 테스트를 진행할 수 없습니다.)

단계 3) 새 명령 프롬프트를 열고 다음과 같이 명령을 입력합니다. "분도기 conf.js" 구성 파일을 실행합니다.

AngularJS 애플리케이션 실행

설명 :

  • 여기서 Protractor는 주어진 사양 파일이 포함된 구성 파일을 실행합니다.
  • 우리는 "에서 실행되는 셀레늄 서버를 볼 수 있습니다.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 파일을 저장하고 "코드 실행" 섹션의 위 단계를 반복하십시오.

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

결과 :

AngularJS 애플리케이션 실행

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

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

때로는 XPath 또는 CSS 선택기를 사용하여 AngularJS 애플리케이션의 웹 요소를 식별할 수 있습니다. Selenium 웹 드라이버. 그러나 AngularJS 애플리케이션에서는 요소가 동적으로 생성되고 변경됩니다. 따라서 Protractor는 AngularJS 애플리케이션을 사용하는 데 더 나은 방법입니다.

관련 기사

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

Protractor는 Jasmine 리포터가 테스트 보고서를 생성하도록 지원합니다. 이 섹션에서는 JunitXMLReporter를 사용하여 XML 형식으로 테스트 실행 보고서를 자동으로 생성합니다.

XML 형식으로 보고서를 생성하려면 아래 단계를 따르세요.

Jasmine Reporter 설치

이를 수행할 수 있는 방법은 두 가지가 있습니다(로컬 또는 전역적으로).

  1. 명령 프롬프트를 열고 다음 명령을 실행하여 로컬에 설치합니다.
npm install --save-dev jasmine-reporters@^2.0.0

위 명령은 명령 프롬프트에서 명령을 실행하는 디렉터리에서 jasmine 보고서 노드 모듈을 로컬로 설치합니다.

  1. 명령 프롬프트를 열고 글로벌 설치를 위해 다음 명령을 실행합니다.
npm install –g jasmine-reporters@^2.0.0

이 튜토리얼에서는 Jasmine Reporter를 로컬에 설치합니다..

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

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

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

Jasmine Reporter 설치

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

Jasmine Reporter 설치

단계 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) 명령 프롬프트를 열고 명령을 실행하세요. 각도기 conf.js.

Jasmine Reporter 설치

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

Jasmine Reporter 설치

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

Jasmine Reporter 설치

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

요약

그래도 Selenium 각도기는 각도기가 수행하는 작업 중 일부를 수행할 수 있으며, 각도기는 AngularJS 애플리케이션을 테스트하기 위한 산업 표준이자 모범 사례입니다. 각도기는 또한 그 안의 여러 기능을 관리하고 다음을 사용하여 웹 요소의 동적 변경을 처리할 수 있습니다. ng 모델, ng-click.., 등등.. (셀레늄에서는 할 수 없는 일).

당신은 좋아할 것입니다 :