각도기-각도기 및 셀레늄 서버

앞서 논의한 바와 같이 Protractor는 Angular 및 AngularJS 애플리케이션을위한 오픈 소스 엔드-투-엔드 테스트 프레임 워크입니다. Node.js 프로그램입니다. 반면 Selenium은 Selenium Server, WebDriver API 및 WebDriver 브라우저 드라이버를 포함하는 브라우저 자동화 프레임 워크입니다.

셀레늄을 사용한 각도기

Protractor와 Selenium의 결합에 대해 이야기하면 Protractor는 Selenium 서버와 함께 작동하여 자동화 된 테스트 인프라를 제공 할 수 있습니다. 인프라는 브라우저 또는 모바일 장치에서 실행되는 각도 응용 프로그램과 사용자의 상호 작용을 시뮬레이션 할 수 있습니다. Protractor와 Selenium의 결합은 다음 다이어그램과 같이 테스트, 서버 및 브라우저의 세 파티션으로 나눌 수 있습니다.

Selenium WebDriver 프로세스

위의 다이어그램에서 보았 듯이 Selenium WebDriver를 사용한 테스트에는 다음 세 가지 프로세스가 포함됩니다.

  • 테스트 스크립트
  • 서버
  • 브라우저

이 섹션에서는이 세 가지 프로세스 간의 통신에 대해 설명합니다.

테스트 스크립트와 서버 간의 통신

처음 두 프로세스-테스트 스크립트와 서버 간의 통신은 Selenium 서버의 작동에 따라 다릅니다. 즉, Selenium 서버가 실행되는 방식이 테스트 스크립트와 서버 간의 통신 프로세스에 모양을 제공한다고 말할 수 있습니다.

Selenium 서버는 시스템에서 독립형 Selenium 서버 (selenium-server-standalone.jar)로 로컬로 실행하거나 서비스 (Sauce Labs)를 통해 원격으로 실행할 수 있습니다. 독립형 Selenium 서버의 경우 Node.js와 셀레늄 서버 사이에 http 통신이 있습니다.

서버와 브라우저 간의 통신

서버는 테스트 스크립트에서 동일한 내용을 해석 한 후 브라우저에 명령을 전달하는 역할을합니다. 그렇기 때문에 서버와 브라우저에도 통신 매체가 필요하며 여기서 통신은JSON WebDriver Wire Protocol. 명령을 해석하는 데 사용되는 브라우저 드라이버로 확장 된 브라우저입니다.

Selenium WebDriver 프로세스 및 통신에 대한 위의 개념은 다음 다이어그램의 도움으로 이해할 수 있습니다.

Protractor로 작업하는 동안 첫 번째 프로세스 인 테스트 스크립트는 Node.js를 사용하여 실행되지만 브라우저에서 작업을 수행하기 전에 테스트중인 응용 프로그램이 안정화되었는지 확인하기 위해 추가 명령을 보냅니다.

Selenium 서버 설정

Selenium Server는 테스트 스크립트와 브라우저 드라이버 사이에서 프록시 서버처럼 작동합니다. 기본적으로 테스트 스크립트에서 WebDriver로 명령을 전달하고 WebDriver의 응답을 테스트 스크립트로 반환합니다. 에 포함 된 Selenium 서버를 설정하기위한 다음 옵션이 있습니다.conf.js 테스트 스크립트 파일 −

독립형 Selenium 서버

로컬 컴퓨터에서 서버를 실행하려면 독립형 셀레늄 서버를 설치해야합니다. 독립형 셀레늄 서버를 설치하기위한 전제 조건은 JDK (Java Development Kit)입니다. 로컬 컴퓨터에 JDK가 설치되어 있어야합니다. 명령 줄에서 다음 명령을 실행하여 확인할 수 있습니다.

java -version

이제 수동으로 또는 테스트 스크립트에서 Selenium Server를 설치하고 시작할 수 있습니다.

수동으로 Selenium 서버 설치 및 시작

Selenium 서버를 수동으로 설치하고 시작하려면 Protractor와 함께 제공되는 WebDriver-Manager 명령 줄 도구를 사용해야합니다. Selenium 서버를 설치하고 시작하는 단계는 다음과 같습니다.

Step 1− 첫 번째 단계는 Selenium 서버와 ChromeDriver를 설치하는 것입니다. 다음 명령을 실행하여 수행 할 수 있습니다.

webdriver-manager update

Step 2− 다음으로 서버를 시작해야합니다. 다음 명령을 실행하여 수행 할 수 있습니다.

webdriver-manager start

Step 3− 마지막으로 설정 파일의 seleniumAddress를 실행중인 서버의 주소로 설정해야합니다. 기본 주소는 다음과 같습니다.http://localhost:4444/wd/hub.

테스트 스크립트에서 Selenium 서버 시작

테스트 스크립트에서 Selenium 서버를 시작하려면 구성 파일에서 다음 옵션을 설정해야합니다.

  • Location of jar file − seleniumServerJar를 설정하여 config 파일에서 독립형 Selenium 서버의 jar 파일 위치를 설정해야합니다.

  • Specifying the port− 또한 독립형 Selenium 서버를 시작하는 데 사용할 포트를 지정해야합니다. seleniumPort를 설정하여 구성 파일에서 지정할 수 있습니다. 기본 포트는 4444입니다.

  • Array of command line options− 또한 서버에 전달할 명령 줄 옵션 배열을 설정해야합니다. seleniumArgs를 설정하여 구성 파일에서 지정할 수 있습니다. 명령 배열의 전체 목록이 필요한 경우 다음을 사용하여 서버를 시작하십시오.-help 깃발.

원격 Selenium 서버 작업

테스트를 실행하는 또 다른 옵션은 Selenium 서버를 원격으로 사용하는 것입니다. 서버를 원격으로 사용하기위한 전제 조건은 서버를 호스팅하는 서비스가있는 계정이 있어야한다는 것입니다. Protractor와 함께 작업하는 동안 서버를 호스팅하는 다음 서비스에 대한 지원이 내장되어 있습니다.

TestObject

TestObject를 원격 Selenium Server로 사용하려면 TestObject 계정의 사용자 이름 인 testobjectUser와 TestObject 계정의 API 키인 testobjectKey를 설정해야합니다.

BrowserStack

BrowserStack을 원격 Selenium 서버로 사용하려면 BrowserStack 계정의 사용자 이름 인 browserstackUser와 BrowserStack 계정의 API 키인 browserstackKey를 설정해야합니다.

소스 랩

Sauce Labs를 원격 Selenium 서버로 사용하려면 Sauce Labs 계정의 사용자 이름 인 sauceUser와 Sauce Labs 계정의 API 키인 SauceKey를 설정해야합니다.

Kobiton

Kobiton을 원격 Selenium Server로 사용하려면 Kobiton 계정의 사용자 이름 인 kobitonUser와 Kobiton 계정의 API 키인 kobitonKey를 설정해야합니다.

Selenium 서버를 사용하지 않고 브라우저 드라이버에 직접 연결

테스트를 실행하는 또 다른 옵션은 Selenium 서버를 사용하지 않고 브라우저 드라이버에 직접 연결하는 것입니다. Protractor는 구성 파일에서 directConnect : true를 설정하여 Chrome 및 Firefox에 대해 Selenium Server를 사용하지 않고 직접 테스트 할 수 있습니다.

브라우저 설정

브라우저를 구성하고 설정하기 전에 Protractor에서 지원하는 브라우저를 알아야합니다. 다음은 Protractor에서 지원하는 브라우저 목록입니다-

  • ChromeDriver
  • FirefoxDriver
  • SafariDriver
  • IEDriver
  • Appium-iOS/Safari
  • Appium-Android/Chrome
  • Selendroid
  • PhantomJS

브라우저 설정 및 구성을 위해서는 브라우저 설정이 config 파일의 기능 개체 내에서 이루어지기 때문에 Protractor의 config 파일로 이동해야합니다.

Chrome 설정

Chrome 브라우저를 설정하려면 다음과 같이 기능 개체를 설정해야합니다.

capabilities: {
   'browserName': 'chrome'
}

또한 chromeOptions에 중첩 된 Chrome 관련 옵션을 추가 할 수 있으며 전체 목록은 다음에서 볼 수 있습니다. https://sites.google.com/a/chromium.org/chromedriver/capabilities.

예를 들어, 오른쪽 상단에 FPS 카운터를 추가하려면 config 파일에서 다음과 같이 수행 할 수 있습니다.

capabilities: {
   'browserName': 'chrome',
   'chromeOptions': {
      'args': ['show-fps-counter=true']
   }
},

Firefox 설정

Firefox 브라우저를 설정하려면 다음과 같이 기능 개체를 설정해야합니다.

capabilities: {
   'browserName': 'firefox'
}

moz : firefoxOptions 객체에 중첩 된 Firefox 전용 옵션을 추가 할 수도 있으며 전체 목록은 https://github.com/mozilla/geckodriver#firefox-capabilities.

예를 들어, Firefox에서 안전 모드로 테스트를 실행하려면 구성 파일에서 다음과 같이 수행 할 수 있습니다.

capabilities: {
   'browserName': 'firefox',
   'moz:firefoxOptions': {
     'args': ['—safe-mode']
   }
},

다른 브라우저 설정

Chrome 또는 Firefox 이외의 다른 브라우저를 설정하려면 다음과 같은 별도의 바이너리를 설치해야합니다. https://docs.seleniumhq.org/download/.

PhantonJS 설정

실제로 PhantomJS는 충돌 문제로 인해 더 이상 지원되지 않습니다. 대신 헤드리스 Chrome 또는 헤드리스 Firefox를 사용하는 것이 좋습니다. 다음과 같이 설정할 수 있습니다.

헤드리스 Chrome을 설정하려면 다음과 같이 –headless 플래그를 사용하여 Chrome을 시작해야합니다.

capabilities: {
   'browserName': 'chrome',
   'chromeOptions': {
      'args': [“--headless”, “--disable-gpu”, “--window-size=800,600”]
   }
},

헤드리스 Firefox를 설정하려면 다음을 사용하여 Firefox를 시작해야합니다. –headless 다음과 같이 플래그-

capabilities: {
   'browserName': 'firefox',
   'moz:firefoxOptions': {
      'args': [“--headless”]
   }
},

테스트를 위해 여러 브라우저 설정

여러 브라우저에 대해 테스트 할 수도 있습니다. 이를 위해 다음과 같이 multiCapabilities 구성 옵션을 사용해야합니다.

multiCapabilities: [{
   'browserName': 'chrome'
},{
   'browserName': 'firefox'
}]

어떤 프레임 워크?

두 개의 BDD (행동 주도 개발) 테스트 프레임 워크 인 Jasmine과 Mocha가 Protractor에서 지원됩니다. 두 프레임 워크 모두 JavaScript와 Node.js를 기반으로합니다. 테스트 작성 및 관리에 필요한 구문, 보고서 및 스캐 폴딩은 이러한 프레임 워크에서 제공됩니다.

다음으로 다양한 프레임 워크를 설치하는 방법을 살펴 봅니다.

Jasmine 프레임 워크

Protractor의 기본 테스트 프레임 워크입니다. Protractor를 설치하면 Jasmine 2.x 버전이 함께 제공됩니다. 별도로 설치할 필요가 없습니다.

모카 프레임 워크

Mocha는 기본적으로 Node.js에서 실행되는 또 다른 JavaScript 테스트 프레임 워크입니다. Mocha를 테스트 프레임 워크로 사용하려면 BDD (행동 주도 개발) 인터페이스와 Chai As Promised와 함께 Chai 어설 션을 사용해야합니다. 다음 명령을 사용하여 설치를 수행 할 수 있습니다.

npm install -g mocha
npm install chai
npm install chai-as-promised

보시다시피 mocha를 설치할 때 -g 옵션을 사용하는 것은 -g 옵션을 사용하여 Protractor를 전역 적으로 설치했기 때문입니다. 설치 후 테스트 파일에서 Chai를 요구하고 설정해야합니다. 다음과 같이 할 수 있습니다-

var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;

그런 다음 Chai As Promised를 사용할 수 있습니다.

expect(myElement.getText()).to.eventually.equal('some text');

이제 프레임 워크 'mocha'를 추가하여 프레임 워크 속성을 구성 파일의 mocha로 설정해야합니다. mocha에 대한 'reporter'및 'slow'와 같은 옵션은 다음과 같이 구성 파일에 추가 할 수 있습니다.

mochaOpts: {
   reporter: "spec", slow: 3000
}

오이 프레임 워크

Cucumber를 테스트 프레임 워크로 사용하려면 프레임 워크 옵션을 사용하여 Protractor와 통합해야합니다. custom. 다음 명령을 사용하여 설치를 수행 할 수 있습니다.

npm install -g cucumber
npm install --save-dev protractor-cucumber-framework

보시다시피 Cucumber를 설치할 때 -g 옵션을 사용하는 것은 우리가 Protractor를 전역 적으로 설치했기 때문입니다. 다음으로 프레임 워크 속성을 다음과 같이 설정해야합니다.custom 오이 Conf.js라는 구성 파일에 프레임 워크 : 'custom'및 frameworkPath : 'Protractor-cucumber-framework'를 추가하여 구성 파일의.

아래에 표시된 샘플 코드는 Protractor로 오이 기능 파일을 실행하는 데 사용할 수있는 기본 cucumberConf.js 파일입니다.

exports.config = {
   seleniumAddress: 'http://localhost:4444/wd/hub',

   baseUrl: 'https://angularjs.org/',

   capabilities: {
      browserName:'Firefox'
   },

   framework: 'custom',

   frameworkPath: require.resolve('protractor-cucumber-framework'),

   specs: [
      './cucumber/*.feature'
   ],

   // cucumber command line options
   cucumberOpts: {
      require: ['./cucumber/*.js'],
      tags: [],
      strict: true,
      format: ["pretty"],
      'dry-run': false,
      compiler: []
   },
   onPrepare: function () {
      browser.manage().window().maximize();
   }
};