Выполнение тестов транспортира на Browserstack Automate

Я занимаюсь разработкой приложения AngularJS и хочу провести тестирование конца-2-конца с помощью Protractor. Я хотел бы воспользоваться набором тестовых браузеров, доступных на Browserstack, и запускать тесты на Browserstack Automate вместо локального сервера Selenium.

Как настроить систему для запуска этих тестов?

4 ответа

Решение

В версии 3.0.0 Protractor добавлена встроенная поддержка BrowserStack.

Вам просто нужно добавить следующие два параметра в ваш conf.js чтобы запустить тест на BrowserStack:

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'
  },    
};

Если вы хотите параллельно выполнять тесты на разных сочетаниях браузера и ОС, вы можете использовать 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. Генератор кода - позволяет настроить возможности для тестирования на различных комбинациях браузеров и ОС, особенно на мобильных устройствах.

  2. Пример проекта Github для Protractor-BrowserStack - это должно помочь вам начать работу.

ПРИМЕЧАНИЕ. Эти инструкции относятся только к версиям Protractor, более ранним, чем v3.0. Protractor 3.0 включает в себя встроенную поддержку Browserstack.


Предпосылки

Вам нужно будет установить узел и npm. Проверьте версию своего узла с node --version чтобы убедиться, что он больше, чем v0.10.0.

Готовы?

1. Установите транспортир

Используйте npm для глобальной установки Protractor с помощью:

npm install -g protractor

Если вы получаете ошибки, вам может потребоваться выполнить приведенную выше команду как sudo.

Вот более подробное руководство по установке и использованию Protractor.

2. Установите браузер Selenium для браузера.

РЕДАКТИРОВАТЬ: @elgalu указал в комментариях этот шаг не является необходимым. Очевидно, туннеля BrowserStackLocal (настроенного на шаге 4) достаточно.

Следуя инструкциям Browserstack по настройке 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']
}

Измените свое имя пользователя и секретный ключ на те, которые указаны на странице Browserstack Automate. Если вы вошли в Browserstack, инструкции по настройке node.js заменят вас пользователем и ключом в примерах, и вы можете просто скопировать и вставить javascript оттуда.

На этой же странице есть инструмент для генерации кода для разных настроек браузера.

4. Загрузите и запустите BrowserStackLocal

Загрузите двоичный файл BrowserStackLocal со страницы инструкций node.js.

Внесите следующие изменения в приведенную ниже команду и запустите двоичный файл, чтобы открыть туннель Browserstack, необходимый для тестирования.

  • Измените свой секретный ключ в команде. Опять же, your_secret_key будет автоматически заменен в руководстве node.js, если вы вошли в Browserstack.
  • Измените номер порта, чтобы он соответствовал порту, на котором вы размещаете файлы AngularJS на localhost. В примере используется порт 3000.

    ./BrowserStackLocal your_secret_key localhost,3000,0
    

5. Запустите тесты

Когда все готово к тестированию, запустите тесты:

protractor protractor.conf.js

Вы можете посмотреть тестовый прогон на https://www.browserstack.com/automate/ и даже увидеть обновленный скриншот тестового браузера.

Мы просто написали пост в блоге и модули с открытым исходным кодом для этого.

http://www.blog.wishtack.com/#!Cross-browser-testing-test-automation-with-Protractor-and-Browserstack/cuhk/554b3b5f0cf27313351f1163

wt-транспортир-сборщик wt-транспортир-бегун wt-транспортир-утил

Здравствуйте! Чтобы запустить тест только на Browserstack, вам может потребоваться пропустить шаг 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);
      }

  };
Другие вопросы по тегам