Как запускать тест-кейсы Playwright в CI/CD

Playwright – библиотека Node.js с открытым исходным кодом, созданная компанией Microsoft для автоматизации браузеров на базе Chromium, Firefox и WebKit с помощью единого API.

Тесты в Playwright позволяют:

Верифицировать поведение во всех браузерах.
Выполнять тесты параллельно.
Записывать видео, скриншоты и другие артефакты при ошибках.
Изолировать контексты браузера.
Интегрировать свои POM-модели в расширяемые фикстуры.

БЕСПЛАТНО СКАЧАТЬ КНИГИ в телеграм канале Библиотека тестировщика

Почему Playwright?

Playwright имеет очень богатые возможности; некоторые из них описаны ниже:

Простая настройка: Playwright очень прост в настройке: всего через несколько минут можно писать первый тест.
Поддержка браузеров: Playwright поддерживает множество браузеров семейства Chromium (Chrome, Edge), Webkit (Safari) и Firefox.
Параллельное тестирование: Поддерживает параллельное выполнение в нескольких браузерах.
Поддержка нескольких вкладок: Поддерживает несколько вкладок и окон, запуская новое окно.
Поддержка языков: Java, C#, Python, а также Javascript и Typescript.
Типы тестирования: Доступны сквозное, функциональное тестирование, тестирование API и тестирование доступности.
Встроенные репортеры: Playwright поддерживает репортеры в форматах JSON, JUnit и HTML, а также Allure Report.
Поддержка CI/CD: Интеграции с Jenkins, Circle CI, Bitbucket Pipeline Bamboo, AWS CodePipeline, Travis CI, GitHub Actions и другие.

Что такое Bitbucket?

Bitbucket Pipelines это интегрированный CI/CD-сервис, встроенный в Bitbucket. Он позволяет автоматически билдить, тестировать и даже развертывать код на основе конфигурационного файла в вашем репозитории. По сути, мы создаем для вас контейнеры в облаке. Внутри этих контейнеров вы можете выполнять команды (как на локальной машине), но со всеми преимуществами чистой системы, настроенной и сконфигурированной под ваши нужды.

Некоторые из возможностей Bitbucket:

Сотрудничество и управление кодом: Bitbucket позволяет пользователям сотрудничать в разработке кода с помощью пулл-реквестов, ревью кода и прав доступа к веткам.
Встроенная непрерывная интеграция и развертывание: Bitbucket можно интегрировать с популярными инструментами CI/CD, такими как Jenkins, Bamboo и Travis CI, чтобы автоматизировать процесс сборки, тестирования и развертывания.
Встроенное отслеживание проблем: Bitbucket включает в себя интегрированную систему отслеживания проблем, которая позволяет командам отслеживать ошибки, задачи и запросы фич.
Частные и публичные репозитории: Bitbucket позволяет пользователям создавать как частные, так и публичные репозитории с различными уровнями контроля доступа.
Мобильное приложение: Bitbucket предоставляет мобильное приложение, которое можно использовать для управления репозиториями и совместной работы с членами команды.
Интеграция с другими инструментами Atlassian: Bitbucket можно интегрировать с другими инструментами Atlassian, такими как Jira, Trello и Confluence, для улучшения совместной работы и управления рабочими процессами.

Приступаем

Пользователь должен войти в Bitbucket после регистрации.
Установите NodeJS.
Установите Visual Studio Code.

Установка Playwright

Шаг 1: Установка и создание файла Package.json

Создайте папку, например, playwright_bitbuckets_2023.
Откройте папку в VS Code.
Запустить из корневого каталога проекта команду npm init playwright@latest..

Выполните приведенную ниже команду в корневой папке:

npm init playwright@latest

После выполнения приведенной выше команды она задаст вам ряд вопросов; просто ответьте на них или нажмите Enter, далее будет создан package.json.

Шаг 2: Настройка кода

Для демонстрации приведены два примера ниже. Сначала разместите код в только что созданном репозитории. Ниже приведен простой тест-кейс, в котором мы ищем нужные данные и проверяем их.

Пример 1.

Код приведен ниже.

В этом коде мы:

Открываем URL.
Проверяем название.
Поиск по блогу текста ‘Playwright’.

// @ts-check
const { test, expect } = require("@playwright/test");
test("Open the site 'qaautomationlabs.com 'and verify the title and Click on Menu Blogs", async ({
 page,
}) => {
 await page.goto("https://qaautomationlabs.com/");
 await expect(page).toHaveTitle(/About Us - QAAutomationLabs/);
 const blogs = page.locator("//span[text()='Blogs']");
 await blogs.last().click();
});
test("Search the Blog with text 'Playwright ", async ({ page }) => {
 await page.goto("https://qaautomationlabs.com/");
 const blogs = page.locator("//span[text()='Blogs']");
 const search = page.locator("id=wp-block-search__input-2");
 const searchIcon = page.locator("id=search-icon");
 await blogs.last().click();
 await search.type("Playwright");
 await searchIcon.click();
});

Пример 2

Код приведен ниже.

В этом коде мы:

Тестируем API с помощью запроса к эндпойнту.

Запрос GET с ОК-ответом 200.
POST-запрос с ОК-ответом 201.
Запрос PUT с ОК-ответом 201.
Запрос DELETE с ОК-ответом 204.
GET-запрос после DELETE и проверка статуса 404.
Наконец, проверка данных пользователя.

// @ts-check
const { test, expect } = require("@playwright/test");
test.describe("API Testing with Playwright", () => {
  const baseurl = "https://reqres.in/api";

  test("GET API Request with -- Valid 200 Response ", async ({ request }) => {
    const response = await request.get(`${baseurl}/users/2`);
    expect(response.status()).toBe(200);
  });
  test("POST API Request with -- Valid 201 Response ", async ({ request }) => {
    const response = await request.post(`${baseurl}/users/2`, {
      data: {
        id: 123,
      },
    });
    const responseBody = JSON.parse(await response.text());
    expect(responseBody.id).toBe(123);
    expect(response.status()).toBe(201);
  });

  test("PUT API Request with -- Valid 201 Response ", async ({ request }) => {
    const response = await request.put(`${baseurl}/users/2`, {
      data: {
        id: 245,
      },
    });
    const responseBody = JSON.parse(await response.text());
    expect(responseBody.id).toBe(245);
    expect(response.status()).toBe(200);
  });

  test("DELETE API Request with -- Valid 204 Response ", async ({
    request,
  }) => {
    const response = await request.delete(`${baseurl}/users/2`, {});
    expect(response.status()).toBe(204);
  });
  test("GET API Request with - InValid 404 Respons ", async ({
    request,
  }) => {
    const response = await request.get(`${baseurl}/usres/invalid-data`);
    expect(response.status()).toBe(404);
  });

  test("GET Request - Verify User detils  ", async ({ request }) => {
    const response = await request.get(`${baseurl}/users/2`);
    const responseBody = JSON.parse(await response.text());
    expect(response.status()).toBe(200);
    expect(responseBody.data.id).toBe(2);
    expect(responseBody.data.first_name).toBe("Janet");
    expect(responseBody.data.last_name).toBe("Weaver");
    expect(responseBody.data.email).toBeTruthy();
  });
});

Настройка Bitbucket

Шаг 1

Откройте Url для создания репозитория.

Шаг 2.

Введите имя проекта и имя репозитория.

После ввода всех данных откроется следующий экран.

Шаг 3

Клонируйте репозиторий с помощью VS Code.

Шаг 4

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

Шаг 5

Настраиваем свой первый пайплайн.

Существует два способа настроить пайплайн: либо напрямую написать YAML-файл, либо воспользоваться Мастером Bitbucket. Следующие шаги проведут вас через мастер настройки пайплайнов.

Шаг 5.1.

В Pipelines вкладка слева, нажмите на “Create your first pipeline.”

Шаг 5.2.

Выберите шаблон по умолчанию. Выбрав шаблон, вы попадете в редактор YAML, где сможете настроить свой пайплайн. Сначала выберите РЕКОМЕНДУЕМЫЙ шаблон, то есть “Стартовый пайплайн,” и укажите .yml-файл, прикрепленный ниже.

Обновите приведенный выше Yml из приведенного ниже кода для запуска тест-кейсов Playwright и отправьте коммит кода.

pipelines:
  default:
    - step:
        name: Playwright Tests
        image: mcr.microsoft.com/playwright:v1.29.2-focal
        script:
          - npm ci        
          # - Run the test cases 
          - npx playwright test
        artifacts:
         - playwright-report/index.html

В приведенном выше файле .yml мы использовали образ mcr.microsoft.com/playwright:v1.29.2-focal.
В разделе Script сначала устанавливаем все зависимости, а затем выполняем скрипт.
Наконец, после загрузки файла .zar создается отчет ‘artifacts’.

Как это – `bitbucket-pipelines.yml` – работает:

Конвейер pipeline описывается с помощью YAML-файла bitbucket-pipelines.yml, который находится в корне вашего репозитория.

При push в этот репозиторий, эта задача запустит экземпляр Bitbucket Pipelines-hosted Linux для запуска конвейеров.
Код проверяется из репозитория Bitbucket.
Установите зависимости npm.
Запустите тесты Playwright в нашем репозитории Bitbucket.

Шаг 6

Перетащите код в свой локальный каталог, чтобы добавился файл .yml.

Шаг 7

Добавьте еще несколько тест-кейсов, и по мере загрузки кода из локального хранилища пайплайн начнет выполняться.

Шаг 8

В случае, если мы хотим выполнить новый пайплайн.

Запустить новый пайплайн: Нажмите кнопку Запустить пайплайн. Выберите ветку и выберите пайплайн “По умолчанию“.

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

Отчет

Ниже представлен отчет о выполнении финального тест-кейса. Здесь мы видим, что все тест-кейсы успешно выполнились.

Нажмите на “Артефакты”, чтобы загрузить отчет.

Ниже приведен отчет о выполнении тест-кейсов в разных браузерах.

Отчет о выполнении тест-кейсов API.

Отчет о выполнении тест-кейсов пользовательского интерфейса

Итоги

В целом, интеграция Playwright с CI/CD в Bitbucket должна повысить качество и надежность кода, ускорить процесс разработки и время выполнения тестов, а также сделать сотрудничество между членами команды более эффективным.

Перевод статьи «How to Run Playwright Test Cases in CI/CD Pipeline Bitbucket».