codememo

브라우저 스택 자동화에서 트랙터 테스트 실행

tipmemo 2023. 10. 10. 20:25
반응형

브라우저 스택 자동화에서 트랙터 테스트 실행

Angular를 개발하고 있습니다.JS app 그리고 Protractor로 엔드 투 엔드 테스트를 하고 싶습니다.브라우저스택에서 이용 가능한 테스트 브라우저 제품군을 활용하여 로컬 셀레늄 서버 대신 브라우저스택 오토메이션에서 테스트를 실행하고 싶습니다.

이러한 테스트를 실행할 시스템을 설정하려면 어떻게 해야 합니까?

참고: 이 지침은 v3.0 이전 버전의 Protractor에만 적용됩니다.Protractor 3.0에는 브라우저 스택을 지원하는 기능이 내장되어 있습니다.


전제조건

노드npm을 설치해야 합니다.노드 버전을 다음과 같이 확인합니다.node --versionv0..0보다 커야 합니다.

준비됐나요

1. 트랙터 설치

npm을 사용하여 Protractor를 글로벌하게 설치할 수 있습니다.

npm install -g protractor

오류가 발생하면 sudo와 같이 위 명령을 실행해야 할 수도 있습니다.

다음은 Protractor 설치 및 사용에 대한 보다 자세한 자습서입니다.

2. 브라우저 스택 셀레늄 웹 드라이버 설치

EDIT: @elgalu는 댓글에서 이 단계가 필요하지 않다고 지적했습니다.BrowserStackLocal 터널(4단계에서 설정)이면 충분합니다.

node.js를 설정하는 브라우저 스택의 지침에 따라 seleniun 웹 드라이버를 설치합니다.

npm install -g browserstack-webdriver

3. 트랙터 구성 설정

protractor.conf.js 파일을 만듭니다(BrowserStack의 지원되는 기능은 설명서 참조).

exports.config = {
  capabilities: {
    'browserstack.user' : 'my_user_name',
    'browserstack.key' : 'my_secret_key',

    // Needed for testing localhost
    'browserstack.local' : 'true',

    // Settings for the browser you want to test
    // (check docs for difference between `browser` and `browserName`
    'browser' : 'Chrome',
    'browser_version' : '36.0',
    'os' : 'OS X',
    'os_version' : 'Mavericks',
    'resolution' : '1024x768'
  },

  // Browserstack's selenium server address
  seleniumAddress: 'http://hub.browserstack.com/wd/hub',

  // Pattern for finding test spec files
  specs: ['test/**/*.spec.js']
}

사용자 이름과 비밀 를 브라우저 스택 자동화 페이지에 지정된 키로 변경합니다.브라우저 스택에 로그인한 경우 node.js를 설정하는 지침은 예제에서 사용자와 키를 대체하며, 여기서 javascript를 복사 붙여넣기만 하면 됩니다.

동일한 페이지에는 다양한 테스트 브라우저 설정에 대한 코드를 생성하는 도구도 있습니다.

4. BrowserStackLocal 다운로드 및 실행

node.js 지침 페이지에서 BrowserStackLocal 바이너리를 다운로드합니다.

아래 명령을 다음과 같이 변경하고, 이진법을 실행하여 테스트에 필요한 Browser stack 터널을 엽니다.

  • 명령에서 비밀 키를 변경합니다.다시 말하지만 브라우저 스택에 로그인한 경우 node.js 가이드에서 귀하의_secret_key가 자동으로 대체됩니다.
  • Angular를 호스팅하는 포트와 일치하도록 포트 번호 변경로컬 호스트의 JS 파일입니다.예제에서는 포트 3000을 사용합니다.

    ./BrowserStackLocal your_secret_key localhost,3000,0
    

5. 테스트 실행

테스트를 위한 모든 준비가 완료된 상태에서 테스트를 실행합니다.

protractor protractor.conf.js

브라우저 스택 자동화에서 테스트 실행을 볼 수 있으며 테스트 브라우저의 업데이트 실시간 스크린샷도 볼 수 있습니다.

버전 3.0.0 이후의 트랙터는 BrowserStack에 대한 내장 지원 기능을 추가했습니다.

다음 두 개의 매개 변수만 추가하면 됩니다.conf.js브라우저 스택에서 테스트를 시작하는 방법:

browserstackUser: '<username>'
browserstackKey: '<automate-key>'

사용자 이름과 자동 키는 계정에 로그인한 후 여기에서 확인할 수 있습니다.

그러므로 Chrome 50 / OS X Yosemite에서 테스트를 실행하고 싶다고 가정해 보겠습니다.conf.js다음과 같이 보여야 합니다.

exports.config = {
  specs: ['spec.js'],

  browserstackUser: '<username>',
  browserstackKey: '<automate-key>',

  capabilities: {
    browserName: 'Chrome',
    browser_version: '50.0',
    os: 'OS X',
    os_version: 'Yosemite'
  },    
};

서로 다른 브라우저와 OS 조합에서 테스트를 병렬로 실행하려면multiCapabilities아래에 제시된 바와 같이:

exports.config = {
  specs: ['spec.js'],

  browserstackUser: '<username>',
  browserstackKey: '<automate-key>',

  multiCapabilities: [
    {
        browserName: 'Safari',
        browser_version: '8.0',
        os: 'OS X',
        os_version: 'Yosemite'
    },
    {
       browserName: 'Firefox',
       browser_version: '30.0',
       os: 'Windows',
       os_version: '7'
    },
    {
       browserName: 'iPhone',
       platform: 'MAC',
       device: 'iPhone 5S'
    }
  ]
};

몇 가지 유용한 링크:

  1. 코드 생성기 - 다양한 브라우저 및 OS 조합, 특히 모바일 장치에서 테스트할 수 있는 기능을 구성할 수 있습니다.

  2. Protractor-BrowserStack용 Github 프로젝트 샘플 - 시작하는 데 도움이 될 것입니다.

안녕하세요! 브라우저스택에 대한 테스트만 실행하려면 Niko Nyman의 4단계 답변을 건너뛰어야 할 수도 있으며, conf.js에서 제가 사용한 것과 같은 것(+ report)을 가지고 5단계를 실행해야 합니다.


    var HtmlReporter = require('protractor-html-screenshot-reporter');
var reporter=new HtmlReporter({
    baseDirectory: './protractor-result', // a location to store screen shots.
    docTitle: 'Report Test Summary',
    docName:    'protractor-tests-report.html'
});

// An example configuration file.
exports.config = {
  // The address of a running selenium server.
  seleniumAddress: 'http://hub.browserstack.com/wd/hub',

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome',
    'version': '22.0',
    'browserstack.user' : 'user_name',
    'browserstack.key' : 'user_key',
    'browserstack.debug' : 'true'

  },

  // Spec patterns are relative to the current working directly when
  // protractor is called.
  specs: ['./specs/home_page_spec.js'],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },
 onPrepare: function() {
        jasmine.getEnv().addReporter(reporter);
      }

  };

우리는 이것을 위해 블로그 포스트와 오픈소스 모듈을 작성했습니다.

http://www.blog.wishtack.com/ #!크로스 브라우저-테스트-테스트-프로트랙터-앤브라우저 스택/cuhk/554b3b5f0cf27313351f1163

wt-트랙터- boiler판 wt-트랙터-러너 wt-트랙터- util

언급URL : https://stackoverflow.com/questions/25537919/running-protractor-tests-on-browserstack-automate

반응형