Azure DevOps интеграция

Protractor — это инструмент для end-to-end тестирования веб-приложений на Angular и других фреймворках, использующий JavaScript и Node.js. Интеграция Protractor с Azure DevOps позволяет автоматизировать запуск тестов, получать отчёты о результатах и обеспечивать непрерывную интеграцию и доставку (CI/CD).

Настройка проекта в Azure DevOps

  1. Создание репозитория и pipeline В Azure DevOps создается проект, в котором размещается репозиторий с кодом приложения и тестами Protractor. Для автоматизации используется Pipeline — YAML-файл или классический конструктор, который описывает шаги сборки, тестирования и деплоя.

  2. Установка зависимостей Для запуска тестов в pipeline необходимо установить Node.js и зависимости проекта:

    - task: NodeTool@0
  inputs:
    versionSpec: '18.x'
- script: npm install
  displayName: 'Install dependencies'

    Это гарантирует, что все библиотеки, включая Protractor, WebDriver и другие, будут доступны на этапе тестирования.

Конфигурация Protractor для CI

Protractor использует файл конфигурации protractor.conf.js, который должен быть адаптирован для работы в Azure DevOps. Ключевые моменты:

  • Ссылка на Selenium Server или WebDriver Manager

    exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['specs/**/*.spec.js'],
  capabilities: {
    browserName: 'chrome'
  },
  directConnect: true,
  framework: 'jasmine',
  jasmineNodeOpts: {
    defaultTimeoutInterval: 30000
  }
};

    Для CI предпочтительно использовать directConnect: true, чтобы запускать ChromeDriver напрямую без отдельного Selenium Server.

  • Headless режим браузера

    capabilities: {
  browserName: 'chrome',
  chromeOptions: {
    args: ['--headless', '--no-sandbox', '--disable-gpu', '--window-size=1920,1080']
  }
}

    Headless режим обязательный в CI, так как Azure DevOps агент может работать без графического интерфейса.

Настройка этапа тестирования в pipeline

Пример YAML-конфигурации для запуска Protractor тестов:

- script: |
    npm install -g protractor
    webdriver-manager update
    npx protractor protractor.conf.js
  displayName: 'Run Protractor Tests'

Основные моменты:

  • webdriver-manager update загружает необходимый WebDriver.
  • Использование npx protractor позволяет запускать локально установленную версию без глобальной установки.
  • Этап должен быть зависим от этапа сборки, чтобы тесты запускались на актуальной версии приложения.

Интеграция отчётов

Protractor поддерживает различные репортеры для Jasmine и Mocha, что важно для отображения результатов в Azure DevOps.

  • Jasmine reporters:

    const JasmineReporters = require('jasmine-reporters');

exports.config.onPrep are = function() {
  jasmine.getEnv().addReporter(new JasmineReporters.JUnitXmlReporter({
    savePath: 'test-results',
    consolidateAll: false
  }));
};

  • В pipeline добавляется публикация результатов тестов:

    - task: PublishTestResults@2
  inputs:
    testResultsFormat: 'JUnit'
    testResultsFiles: 'test-results/*.xml'
    failTaskOnFailedTests: true

Параллельный запуск и масштабирование

Protractor позволяет запускать тесты параллельно, что уменьшает время тестирования. Для CI это особенно важно:

exports.config.capabilities = {
  browserName: 'chrome',
  shardTestFiles: true,
  maxInstances: 4,
  chromeOptions: {
    args: ['--headless', '--no-sandbox']
  }
};
  • shardTestFiles: true — разделяет тесты между несколькими экземплярами браузера.
  • maxInstances задаёт количество одновременно запускаемых браузеров.

Azure DevOps поддерживает масштабирование агентов для параллельного выполнения нескольких pipeline, что ускоряет CI/CD процессы.

Триггеры и автоматизация

  • Тесты запускаются автоматически при push в ветку или pull request.

  • В YAML pipeline можно настроить триггеры:

    trigger:
  branches:
    include:
      - main
      - develop
pr:
  branches:
    include:
      - main

Особенности работы с Angular

Protractor создан для Angular, поэтому в конфигурации можно использовать синхронизацию с Angular:

exports.config = {
  onPrepare: function() {
    browser.waitForAngularEnabled(true);
  }
};

Для приложений без Angular синхронизацию можно отключить:

browser.waitForAngularEnabled(false);

Отладка и логирование

В Azure DevOps полезно сохранять логи браузера и скриншоты при ошибках:

onComplete: function() {
  const fs = require('fs');
  browser.takeScreenshot().then((png) => {
    const stream = fs.createWriteStream('test-results/screenshot.png');
    stream.write(new Buffer.from(png, 'base64'));
    stream.end();
  });
}

Эти скриншоты можно использовать для анализа причин падения тестов.

Вывод

Интеграция Protractor с Azure DevOps обеспечивает полностью автоматизированное end-to-end тестирование с отчётностью, параллельным запуском и масштабируемостью. Использование headless режима, отчётных плагинов и настройки pipeline позволяет создавать стабильный процесс CI/CD для веб-приложений на Angular и других фреймворках.

Оглавление