Автоматизация сквозного тестирования с помощью Playwright и Azure Pipelines

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

Долгое время Selenium был вариантом по умолчанию для написания автоматических тестов браузера, и это хорошо. Но есть лучшая альтернатива ему — Драматург. Playwright, мощная платформа автоматизации с открытым исходным кодом, предназначена для упрощения сквозного тестирования в различных браузерах и на разных устройствах. В этой записи блога мы рассмотрим, как использовать Playwright для сквозного тестирования и интегрировать его в автоматизированный процесс сборки с помощью Azure Pipelines.

Понимание драматурга:

Playwright, разработанный Microsoft, представляет собой инновационную платформу автоматизации на основе Node JS, которая предоставляет единый API для автоматизации браузера в Chromium, WebKit и Firefox. Его уникальная архитектура позволяет ему взаимодействовать с браузерами с использованием новейших технологий автоматизации браузеров, что обеспечивает надежные и быстрые сквозные тесты.

Он совместим с кросс-платформами, такими как Windows, Linux, MacOS, безголовыми или головными, и может быть интегрирован с основными серверами CI/CD, такими как конвейеры Azure, GitHub Actions, Jenkins или Circle CI.

Он поддерживает несколько языков программирования, таких как TypeScript, JavaScript, Python, .NET, Java, предоставляя QA больше возможностей для написания тестовых сценариев.

Он поддерживает встроенную эмуляцию мобильных веб-приложений для Google Chrome для Android и мобильного Safari для iOS.

Как это работает?

Playwright использует соединение WebSocket с браузерами, чтобы управлять ими напрямую без какого-либо промежуточного уровня. Соединение WebSocket остается открытым с начала теста до конца, и все инструкции отправляются через это соединение. Это объясняет производительность, в частности, почему тесты драматургов выполняются быстрее.

В отличие от Selenium, который использует веб-драйвер (библиотеку, которая переводит ваш тест в JSON, понятный браузерам), чтобы отправлять каждую команду в виде отдельного HTTP-запроса в браузер, выступая в качестве среднего уровня.

Ключевые особенности автоматизации драматурга:

Автоожидание:

Драматург выполняет различные проверки работоспособности элементов перед выполнением запрошенных действий. Он также имеет богатый набор событий самоанализа. Это означает, что среда тестирования может сосредоточиться на других аспектах скрипта вместо того, чтобы контролировать ожидание выполнения кода, делая тесты устойчивыми, исключая ненадежные тесты и менее подверженные ошибкам.

Контексты браузера:

Playwright создает контекст браузера для каждого теста. Контекст браузера эквивалентен совершенно новому профилю браузера. Это обеспечивает полную изоляцию тестов с нулевыми накладными расходами.

Параллельное тестирование браузера:

Playwright также поддерживает выполнение одновременных тестов (также называемых параллельным тестированием) через контекст браузера и может запускать параллельные тесты с несколькими браузерами. Это расширяет возможности тестирования и пригодится, когда необходимо одновременно протестировать несколько веб-страниц.

Сетевое управление:

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

Эмуляция устройства:

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

Встроенный отчет:

Playwright Test поставляется с несколькими встроенными репортерами для различных нужд и возможностью предоставления пользовательских репортеров.

Мощный инструментарий:

Кодеген. Создавайте тесты, записывая свои действия. Сохраните их на любом языке.

Инспектор драматургов. Проверяйте страницу, создавайте селекторы, выполняйте тест, просматривайте точки кликов, изучайте журналы выполнения.

Средство просмотра трассировки. Соберите всю информацию для расследования сбоя теста. Трассировка Playwright содержит скринкаст выполнения теста, живые моментальные снимки DOM, обозреватель действий, исходный код теста и многое другое.

Настройка драматурга:

Предварительные требования:

• Установите код Visual Studio: Скачать и установите код Visual Studio (VSCode).
• Установите NodeJS: Скачать и установить узел JS
• Учетная запись Azure DevOps. Зарегистрироваться здесь получить один

Шаг 1. Создайте новый каталог (например, «learn-playwright») в VS Code.

Шаг 2: Откройте VS Code и нажмите «Файл»> «Открыть папку»> выберите только что созданную папку (learn-playwright))

Шаг 3: Нажмите «Меню терминала» > «Новый терминал».

Шаг 4: Введите приведенную ниже команду, чтобы начать установку драматурга.

npm init playwright@latest –yes — –quiet –browser=chromium –browser=firefox –browser=webkit –gha

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

• Создает Package.json
• Устанавливает библиотеку npm
• Загружает и устанавливает веб-браузеры для Chromium, Firefox и Webkit.
• Настраивает основные файлы и папки
  • папка с тестами: Эта папка содержит актуальные тестовые сценарии. По умолчанию в этой папке будет создан файл example.spec.ts.
  • .gitignore: Этот файл помогает, если вы используете репозиторий git
  • package.json и package-lock.json: Этот файл помогает отслеживать зависимости, создавать ярлык для запуска тестов и т. д.
  • драматург.config.ts: Это глобальный файл конфигурации Playwright, который вы можете настроить с помощью доступных параметров.

Создать первый драматургический тест

Шаг 5: Перейдите в папку с тестами и создайте файл спецификации теста, например: demo.spec.ts

Давайте начнем тестовый пример с приведенным ниже сценарием.

Сценарий:

demo.spec.ts наш тестовый сценарий драматурга выглядит следующим образом

import { test, expect, Page } from '@playwright/test';
test.beforeEach(async ({ page }) => {
  await page.goto('https://www.saucedemo.com/');
});
test.describe('Demo Test', () => {
    test('Verify Login Error Message', async ({ page }) => {
        await page.waitForSelector('#user-name',{state:'visible'});
        await page.locator('[data-test="username"]').type('[email protected]');
        await page.locator('[data-test="password"]').type('examplepassword');
        await page.locator('[data-test="login-button"]').click();
        const errorMessage = await page.locator('[data-test="error"]').textContent();
        console.log("Login Error Message: "+errorMessage);
        expect(errorMessage).toBe('Epic sadface: Username and password do not match any user in this service');
        page.close();
    });
});

Выполнить тестовый сценарий драматурга

Шаг 6: Нажмите на зеленый значок «Выполнить» рядом с тестом, чтобы выполнить его.

или выполните тестовый скрипт, используя приведенную ниже команду из терминала VS Code.

npx playwright test  demo.spec.ts –headed

demo.spec.ts: тестовый файл; если вы хотите запустить все файлы спецификаций внутри папки с тестами, не указывайте имя файла спецификации.

-headed: Playwright по умолчанию работает в автономном режиме, поэтому мы указываем -headed для запуска в режиме заголовка.

Вы увидите приведенный ниже вывод.

Тестовый скрипт выполняется в 3 разных браузерах из-за конфигурации, настроенной в драматург.config.ts файл. По умолчанию он настроен на выполнение теста во всех браузерах, но вы можете изменить его соответствующим образом.

Шаг 7. Просмотрите отчет

Чтобы просмотреть сгенерированный HTML-отчет, выполните приведенную ниже команду.

npx playwright show-report

Перед настройкой конвейера Azure DevOps давайте изменим файл package.json, включив в него сценарии, которые мы будем использовать в задаче конвейера для ссылки на сценарии.

Интеграция Playwright с Azure Pipelines:

Шаг 8. Войдите в Azure DevOps, перейдя к https://dev.azure.com/ и создайте новый проект и нажмите создать

Шаг 9: После создания проекта перейдите в Repos и выполните вторые шаги (выделены на снимке ниже), чтобы отправить существующий репозиторий из командной строки. Запустите эти команды в терминале VS Code.

Обновите браузер, вы увидите, что репозиторий обновлен вашим локальным кодом.

Шаг 10. Перейдите к пайплайнам, создайте свой первый пайплайн и нажмите «использовать классический редактор», чтобы создать пайплайн без YAML.

Шаг 11. Выберите источник «Azure Repos Git», выберите репозиторий и нажмите «Продолжить».

Шаг 12: Нажмите «Пустая работа».

Шаг 13: Нажмите значок «+» рядом с заданием агента 1 и найдите Node. Выберите установщик инструмента Node.js и нажмите «Добавить».

Шаг 14: Драматург поддерживает от Узел v14 и выше. Следовательно, давайте настроим задачу на 16.х как указано ниже.

Шаг 15: Добавьте еще одну задачу для командной строки. Щелкните значок «+» рядом с заданием агента 1 и найдите «Командная строка». Выберите «Командная строка» и нажмите «Добавить».

Отображаемое имя: Установить драматург и зависимости

скрипт: установка npm && установка драматурга npx

Нажмите «Дополнительно» -> Нажмите на маленький значок (i) и выберите «Ссылка». Это активирует рабочий каталог для задачи.

Шаг 16: Добавьте еще одну задачу для npm. Щелкните значок «+» рядом с заданием агента 1 и найдите npm. Выберите npm и нажмите «Добавить».

Выберите Пользовательский для команды. Добавьте «запустить тесты» в «Команды и аргументы».[Мыссылаемсянаскриптыупомянутыевфайлеpackagejson->[Wearereferencingthescripts mentionedinthepackagejsonfile->“испытания”: “Тест драматурга –config=playwright.config.ts –project=chromium”

Выберите рабочий каталог, настроенный на предыдущем шаге.

Шаг 17: После того, как все настройки выполнены, пришло время сохранить сборку и поставить ее в очередь.

Заключение:

Автоматизация сквозного тестирования необходима для выпуска высококачественного программного обеспечения. Благодаря поддержке нескольких браузеров в Playwright и мощным возможностям Azure Pipelines CI/CD вы можете легко автоматизировать процесс сквозного тестирования. Результатом является более быстрая обратная связь, повышенная уверенность в вашей кодовой базе и более плавный рабочий процесс разработки для вашей команды. Воспользуйтесь мощью Playwright и Azure Pipelines, чтобы вывести процесс тестирования и развертывания на новый уровень. Удачного тестирования!