Представляем плагин TestCafe Jenkins

TestCafe может записывать видео и снимки экрана, чтобы вы могли отлаживать свои тесты и изучать пользовательский интерфейс страницы. Вы можете записывать все тесты или только те, которые не прошли, создавать уникальные видеофайлы для каждого теста или записывать их все за один прием и выделять конкретные взаимодействия. (Полный список доступных опций см. В следующем разделе справки: Скриншоты и видео).

Многие пользователи TestCafe используют Jenkins - решение CI / CD - для автоматизации своих тестов. До недавнего времени им приходилось вручную сопоставлять снимки экрана и видео, сделанные TestCafe, с отдельными отчетами об испытаниях. Недавно реализованный плагин TestCafe Jenkins упрощает этот процесс. Ссылки на снимки экрана и видео, сделанные во время теста, теперь автоматически появляются на странице результатов теста Jenkins. Нет необходимости держать тестовый сервер работающим - все необходимые файлы хранятся в папке сборки Jenkins.

Когда наш плагин включен, страница результатов теста должна выглядеть следующим образом:

Тестовый пример: исчезающая кнопка

Предположим, что кнопка «Добавить в корзину» исчезла с мобильной версии вашего веб-сайта.

TestCafe поддерживает следующие методы эмуляции мобильных устройств:

Изменить размер окна браузера во время теста
Запустите тест через стороннюю службу облачного тестирования.
Используйте встроенный режим эмуляции Chromium

Третий вариант обеспечивает большую скорость и стабильность. Мы описываем его в будущем и рекомендуем вам использовать его, если это возможно.

Во-первых, давайте напишем простой тест, который проверяет, существует ли кнопка «Добавить в корзину»:

test('`Add To Cart` button should exist', async t => {
    await t
        .expect(Selector('button').withText('Add To Cart').visible).ok();
});

Теперь давайте настроим Jenkins для запуска этого теста каждый раз, когда мы создаем наш проект.

Базовая настройка

Шаг 1. Установите необходимые компоненты

TestCafe требует для запуска работающей установки Node.js. Если ваша тестовая среда не содержит node.js, плагин Node.js Jenkins может установить его за вас. Также убедитесь, что Chromium установлен: TestCafe не может работать без браузера.

Шаг 2. Установите плагин TestCafe Jenkins.

Чтобы установить подключаемый модуль TestCafe Jenkins, щелкните ссылку «Управление подключаемыми модулями» на странице «Управление Jenkins», выберите вкладку «Доступные» и введите «testcafe» в поле поиска. Установите флажок рядом с нашим плагином и нажмите кнопку «Установить без перезапуска» под ним.

Шаг 3. Установите необходимые пакеты Node.

Добавьте следующий этап сборки в свой проект Jenkins:

npm i testcafe testcafe-reporter-jenkins

Эта команда устанавливает основную библиотеку testcafe, а также пакет testcafe-reporter-jenkins. Последнее необходимо для создания отчетов в формате JUnit, удобном для Jenkins.

Шаг 4. Настройте тесты.

Вы можете настроить свои тесты с помощью:

Последний вариант обеспечивает простой декларативный способ определения настроек теста. Вы можете сохранить этот файл в той же папке, что и ваши тесты. Ниже представлена конфигурация, используемая в этом руководстве:

{
    "browsers": [
        "chromium:headless:emulation:device=iPhone 4",
        "chromium:headless:emulation:device=iPad Mini",
        "chromium:headless"
    ],
    "src": "test/e2e/**/*",
    "screenshots": {
        "takeOnFails": true,
        "fullPage": true
    },
    "videoPath": "videos",
    "reporter": {
        "name": "jenkins",
        "output": "report.xml"
    },
    "appCommand": "node server.js"
}

Массив Browser содержит список браузеров, которые TestCafe будет использовать для запуска нашего теста. Синтаксис браузера TestCafe позволяет нам указывать мобильные устройства, которые Chromium должен эмулировать.

Свойство name объекта reporter установлено как jenkins, что гарантирует, что отчеты, созданные TestCafe, могут быть правильно проанализированы сервером.

Если вы решили не использовать файл конфигурации, обязательно вручную установите формат отчета при запуске тестов следующим образом:

testcafe chrome test.js -r jenkins:report.xml

В противном случае просто выполните следующую команду:

npx testcafe

Шаг 5. Настройте репортер

Включите плагин репортера JUnit: добавьте Опубликовать отчет о результатах теста JUnit действие после сборки. Чтобы отображать снимки экрана и видео вместе с результатами тестирования, выберите параметр Включить ссылки на артефакты TestCafe в раскрывающемся меню Дополнительные функции отчета о тестировании.

Важно: не забудьте установить флажок «Сохранять длинный стандартный вывод / ошибка». В противном случае плагин репортера автоматически обрежет URL-адреса ваших видео и снимков экрана.

Шаг 6. Запускаем сборку

Сохраните изменения в своем проекте и нажмите кнопку «Создать сейчас» на странице проекта:

Просмотрите результаты

После завершения тестов щелкните следующую ссылку на странице сборки, чтобы просмотреть результаты:

Вы увидите ссылки на снимки экрана и видео, сделанные во время теста.

Эти артефакты мгновенно указывают, присутствует ли на странице кнопка «Корзина».

Интеграция с Jenkins Pipeline

Если вы не хотите использовать графический интерфейс Jenkins для запуска этих тестов, вы всегда можете использовать Jenkins Pipeline. Он позволяет вам декларативно настроить настройку CI / CD через Jenkinsfile - текстовый файл, зарегистрированный в репозитории системы управления версиями проекта. Ниже приведен образец файла Jenkins для использования с TestCafe:

pipeline {
    agent any
stages {
        stage('Run E2E tests') {
            steps {
                sh 'npm install'
                sh 'npm run test-e2e'
            }
            post {
                always {
                          junit keepLongStdio: true,
                          testDataPublishers: [[$class: 'TestCafePublisher']],
                          testResults: '*.xml'
                }
            }
        }
    }
}

Примечание. Сценарий test-e2e npm в этом примере запускает TestCafe. Как упоминалось ранее в этом разделе, не забудьте вручную установить параметр репортера. Для получения дополнительной информации о TestCafe CLI см. Следующий раздел справки: Интерфейс командной строки.

Если вам понравилось это руководство и вы хотели бы получить больше советов по отладке, прочтите следующие статьи блога: Как отлаживать тесты в TestCafe: Краткое руководство и Как ускорить отладку в TestCafe: Советы и приемы.

Первоначально опубликовано на https://devexpress.github.io.