Поиск по сайту:

Как запускать сквозные тесты с помощью Playwright и Docker

Автор выбрал программу Write for DOnations.

Введение

NodeJS. Гибкость Playwright означает, что его можно использовать в качестве инструмента веб-скрейпинга или для сквозного тестирования, чтобы убедиться, что программное обеспечение соответствует его требованиям.

Для запуска Playwright вам потребуется соответствующая среда, например среда выполнения NodeJS, основная платформа Playwright или средство запуска тестов Playwright. Вашей операционной системе могут потребоваться зависимости для поддержки Playwright. Docker, платформа контейнеризации с открытым исходным кодом, может обслуживать вашу среду Playwright, поэтому вам не нужно создавать несколько сред для разных операционных систем.

В этом руководстве вы настроите среду для использования Playwright с Typescript для сквозного тестирования, напишете и выполните тесты, экспортируете отчет о тестировании в нескольких формах и развернете тест с помощью Docker. К концу руководства вы сможете использовать Playwright для автоматического тестирования и интегрировать свои тесты в существующий конвейер CI/CD с помощью Docker, обертывающего тестовую среду.

Предпосылки

Чтобы следовать этому руководству, вам понадобятся:

  • Один сервер Ubuntu 20.04 с учетной записью с поддержкой sudo, настроенной в соответствии с руководством по первоначальной настройке сервера Ubuntu 20.04. Чтобы установить NodeJS и Docker на свой сервер, вам потребуется учетная запись с поддержкой sudo.
  • Как установить Node.js и создать локальную среду разработки.
  • Шаги 1–4 в инструкции по установке и использованию Docker в Ubuntu 20.04. На шаге 4 вы запустите docker run hello-world, чтобы убедиться, что Docker правильно установлен и готов к использованию.
  • Знакомство со сквозным тестированием веб-приложений.
  • Знакомство с серией руководств How To Code in TypeScript.
  • (Необязательно) Visual Studio Code с надежной поддержкой функций, таких как навигация по коду и предупреждение об ошибках компилятора при работе в Typescript. В этом руководстве везде используется nano.

Шаг 1 — Подготовка среды

Перед внедрением сквозных тестов необходимо подготовить среду проекта Playwright.

Сначала создайте папку для этого проекта:

  1. mkdir playwright-with-docker

Перейдите в новую папку:

  1. cd playwright-with-docker

Затем инициализируйте новую среду Node:

  1. npm init

Вам будет предложено предоставить информацию для нового проекта, такую как имя проекта, версия, запись приложения и тестовая команда.

Вам будет предложено ввести ответы на следующие запросы, связанные с новым проектом:

Output
package name: (playwright-docker)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

Вы увидите такие результаты:

Output
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterward to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (test) playwright-docker
version: (1.0.0)
description: A project for using playwright for end-to-end testing purpose with docker for deployment
entry point: (index.js)
test command:
git repository:
keywords:
author: 
license: (ISC)
About to write to /your-path/test/package.json:

{
  "name": "playwright-docker",
  "version": "1.0.0",
  "description": "A project for using playwright for end-to-end testing purpose with docker for deployment",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": 
  "license": "ISC"
}


Is this OK? (yes) yes

После добавления необходимой информации введите yes или нажмите enter, чтобы подтвердить настройку файла package.json.

Затем установите необходимые зависимости для проекта:

  1. npm install --save-dev playwright

  2. npm install --save-dev typescript

Эти команды устанавливают Playwright и TypeScript в примере проекта. Флаг --save-dev используется для установки зависимостей, которые не являются обязательными для запуска приложения.

Затем установите определения типов для Node.JS:

  1. npm install --save-dev @types/node

Далее устанавливаем библиотеку для работы с файлом TOML для настройки:

  1. npm install --save-dev toml

TOML — это один из типов файлов, используемых для настройки приложения. Файл .toml читается человеком и позволяет приложению обновлять свое содержимое без предварительного чтения.

Затем установите зависимости Playwright для хост-системы:

  1. npx playwright install-deps

При появлении запроса введите свой пароль sudo.

Примечание. Если вы получили сообщение о том, что вам необходимо обновить версию Node до более поздней версии, например:

Output
You are running Node.js 10.19.0.
Playwright requires Node.js 12 or higher. 
Please update your version of Node.js.

Вы можете обновить с помощью этих команд:

  1. sudo npm cache clean -f 

  2. sudo npm install -g n 

  3. sudo n stable

npm cache clean -f принудительно очистит все кэши, пока

Затем установите средство запуска тестов Playwright, которое вы будете использовать на последующих этапах этого руководства:

  1. npm install --save-dev @playwright/test

Наконец, установите поддерживаемые браузеры для Playwright:

  1. npx playwright install

С помощью этой команды вы можете запускать тесты в нескольких браузерах.

Чтобы подготовить файл конфигурации TypeScript, откройте tsconfig.json с помощью nano или предпочитаемого вами текстового редактора:

  1. sudo nano tsconfig.json

Текущий файл пуст. Чтобы обновить его для этого проекта, добавьте следующий код:

{
  "compilerOptions": {
    "strict": true,
    "module": "commonjs"
  },
  "include": ["tests"]
}

Файл tsconfig.json сообщает среде выполнения NodeJS, что текущий каталог является проектом Typescript. В compilerOptions перечислены условия, необходимые NodeJS для компиляции проекта. module сообщает компилятору, какой синтаксис модуля использовать при компиляции файлов в Javascript. Поля strict, для которых задано значение true, включают проверку типов для кода Typescript, что гарантирует, что типы будут соответствовать значениям данных переменных или методов. include покажет список имен файлов или шаблонов, включенных в приложение. В этом случае приложение должно включать все файлы в каталоге tests.

Сохраните и закройте файл, когда закончите.

Теперь, когда ваша среда настроена, вы можете начать создавать свои тесты.

Шаг 2 — Написание тестов

С помощью среды тестирования Playwright, которую вы подготовили на первом этапе, вы теперь напишете три примера тестов, связанных со страницей дроплетов DigitalOcean.

Тесты TypeScript, которые вы создадите, будут проверять следующие три элемента:

  • Проверьте три варианта регистрации новых учетных записей DigitalOcean: Зарегистрируйтесь с помощью электронной почты, Зарегистрируйтесь с помощью Google, Зарегистрируйтесь с помощью Github.
  • Убедитесь, что DigitalOcean поддерживает два типа пакетов: базовый и премиум.
  • Убедитесь, что существует четыре основных стоимости виртуальных машин: 1 ЦП, 2 ЦП, 4 ЦП, 8 ЦП.

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

Создайте новый каталог с именем tests для хранения всех тестовых файлов:

mkdir tests

Затем перейдите в каталог tests:

cd tests

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

  • signUpMethods.spec.ts реализует тест для проверки количества поддерживаемых методов для регистрации пользователей.
  • multiplePackages.spec.ts выполнит тест, чтобы проверить количество пакетов, которые могут выбрать клиенты.
  • pricingComparison.spec.ts проверит стоимость базовой виртуальной машины.

Примечание. Формат тестовых файлов по умолчанию будет *.spec.ts (для проектов TypeScript) или *.spec.js (для проектов JavaScript).

Файл конфигурации для тестов будет называться configTypes.ts и также помещаться в каталог tests. В этом файле вы определите глобальные переменные для взаимодействия с несколькими браузерами и их страницами. Вы также определите некоторые значения конфигурации, используемые в тесте, такие как URL-адрес тестируемого приложения. В этом руководстве для тестируемого URL будет использоваться DIGITAL_OCEAN_URL.

Создайте configTypes.ts:

  1. nano configTypes.ts

Добавьте следующий код в пустой файл configTypes.ts:

import { Browser, Page } from "playwright";

import fs from 'fs';
import toml from 'toml';
const config = toml.parse(fs.readFileSync('./config.toml', 'utf-8'));

declare global {
  const page: Page;
  const browser: Browser;
  const browserName: string;
}

export default {
  DIGITAL_OCEAN_URL: config.digital_ocean_url ?? '',
  };

Сначала функции import считывают содержимое конфигурации из ./config.toml в домашнем каталоге проекта.

Вы объявляете глобальные переменные для page, browser, browserName, которые будут использоваться для инициализации экземпляров страницы и браузера в сквозных тестах. .

Наконец, вы экспортируете DIGITAL_OCEAN_URL со значением, считанным из ./config.toml с помощью ключа digital_ocean_url, чтобы вы могли использовать этот URL в своих тестах. позже.

Сохраните и закройте файл, когда закончите.

Для первого теста создайте и откройте файл signUpMethods.spec.ts с помощью nano или предпочитаемого вами текстового редактора:

  1. nano signUpMethods.spec.ts

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

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 options for signing up", async ({ page }) => {

  // Go to the Droplets product page of DigitalOcean web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of signUp options
  const number_subscriptions_allowed = await page.locator('.SignupButtonsStyles__ButtonContainer-sc-yg5bly-0 > a').count()

  // Verify that number equals 3
  expect(number_subscriptions_allowed).toBe(3)
});

Файл signUpMethods.spec.ts содержит код для теста, который оценивает, есть ли на странице Droplets три варианта регистрации. Вы импортируете методы test и expect в первые две строки.

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

Тест определяется в блоке test с четырьмя действиями. Первое ключевое слово await использует функцию page.goto(), чтобы указать тесту перейти к DIGITAL_OCEAN_URL, определенному в configTypes.ts. Вы помещаете глобальную переменную page в объявление async, чтобы можно было использовать экземпляры страниц на протяжении всего теста без необходимости их инициализации.

Второе ключевое слово await указывает тесту ожидать загрузки страницы с помощью функции page.waitForLoadState(). Если есть незавершенные вызовы API, на странице могут быть элементы, которые недоступны, и в результате тест может завершиться ошибкой, поскольку он не может найти этот элемент.

Вы определяете number_subscriptions_allowed, чтобы использовать функцию page.locator() для поиска количества вариантов регистрации. Вы найдете компоненты signUp options с помощью селекторов CSS (в данном случае кнопок регистрации), которые позволяют вам получить количество содержащихся в нем дочерних элементов.

Наконец, метод expect проверит количество опций, найденных с помощью page.locator(), с ожидаемым результатом 3.

Сохраните и закройте файл.

Далее вы напишете второй тест. Создайте и откройте файл multiplePackages.spec.ts:

  1. nano multiplePackages.spec.ts

В пустой файл добавьте следующий код:

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 packages for subscription", async ({ page }) => {

  // Go to the Droplets product page of DigitalOcean web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of packages to be 2 (Basic and Premium)
  const number_subscriptions_allowed = await page.locator('.CPUInfoStyles__StyledLeftCpuInfo-sc-ooo7a2-4 > div').count()

  // Verify that number equals 2
  expect(number_subscriptions_allowed).toBe(2)
});

Как и в случае с файлом signUpMethods.spec.ts, вы импортируете тестовую конфигурацию и тестовые функции из зависимостей Playwright.

В этом тесте вы сначала переходите к DIGITAL_OCEAN_URL, используя page.goto(). Затем вы ждете, пока страница завершит все сетевые вызовы с помощью page.waitForLoadState().

Вы находите дочерние элементы компонента подписки в веб-интерфейсе и сохраняете эту информацию в переменной number_subscriptions_allowed.

Наконец, вы сравниваете значение number_subscriptions_allowed с ожидаемым результатом 2.

Сохраните и закройте файл, когда закончите.

Затем создайте и откройте файл pricingComparison.spec.ts, чтобы определить третий тест:

  1. nano pricingComparison.spec.ts

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

import endpoint from "./configTypes"
import { test, expect } from '@playwright/test'

test("Expect to have 3 packages for subscription", async ({ page }) => {

  // Go to the Droplets product page of DigitalOcean web page
  await page.goto(endpoint.DIGITAL_OCEAN_URL);

  // Wait for the page to load
  await page.waitForLoadState('networkidle');

  // Get the number of basic virtual machine costs (1 CPU, 2 CPU, 4 CPU, 8 CPU)
  const number_subscriptions_allowed = await page.locator('.PricingComparisonToolStyles__StyledCpuSelector-sc-1k0sndv-7 > button').count()

  // Verify that number equals 4
  expect(number_subscriptions_allowed).toBe(4)
});

Асинхронная функция в этом тесте использует тот же URL-адрес page.goto() и направления page.waitForLoadState(), что и в предыдущих тестах. Поскольку этот тест связан с пакетами подписки, доступными на странице Droplets, вторая половина блока кода настраивает этот тест.

Для этого теста вы получаете количество дочерних элементов для компонента параметров ценообразования и сохраняете это значение в переменной number_subscriptions_allowed. Вы подтверждаете, что значение number_subscriptions_allowed должно быть равно 4 (количество подписок, поддерживаемых в настоящее время).

Сохраните и закройте файл.

В своих тестах вы используете DIGITAL_OCEAN_URL из файла configTypes.ts, а configTypes.ts считывает значение digital_ocean_url из файла файл ./config.toml.

Теперь вы создадите файл config.toml в домашнем каталоге проекта. Перейдите в домашний каталог:

  1. cd ..

Затем создайте файл config.toml:

  1. nano config.toml

Скопируйте следующее содержимое в файл config.toml:

digital_ocean_url="https://linux-console.net/products/droplets"

Сохраните и закройте файл.

Дерево каталогов проекта теперь будет выглядеть так:

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

Шаг 3 — Выполнение тестов

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

Сначала запустите эту команду:

  1. npx playwright test --browser=all

Вы должны увидеть результаты теста следующим образом:

Output
Running 9 tests using 1 worker

  ✓  [chromium] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (6s)
  ✓  [chromium] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (4s)
  ✓  [chromium] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (3s)
  ✓  [firefox] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (9s)
  ✓  [firefox] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (5s)
  ✓  [firefox] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (7s)
  ✓  [webkit] › tests/multiplePackages.spec.ts:4:1 › Expect to have 3 packages for subscription (7s)
  ✓  [webkit] › tests/pricingComparison.spec.ts:4:1 › Expect to have 3 packages for subscription (6s)
  ✓  [webkit] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (6s)


  9 passed (1m)

Галочка означает, что все тесты пройдены в трех браузерах (Chromium, Firefox и Webkit).

Количество рабочих будет зависеть от количества ядер, которые использует текущий сервер, и текущей конфигурации для теста. Вы можете ограничить количество рабочих, установив значение workers в файле playwright.config.ts. Для получения дополнительной информации о тестовой конфигурации вы можете прочитать документацию по продукту Playwright.

Средство запуска тестов Playwright предоставляет несколько вариантов отчета о тестировании, которые можно интегрировать в инструменты CI, такие как страница документации для отчетов о тестировании Playwright.

В этом учебном пособии вы запустите тест с файлом отчета в формате HTML, который обеспечивает более удобочитаемость, чем просмотр тестов в интерфейсе командной строки.

Запустите эту команду для тестового отчета HTML:

  1. npx playwright test --browser=all --reporter=html

Вы увидите такой результат:

Output
Running 9 tests using 2 workers

  9 passed (40s)

To open last HTML report run:

  npx playwright show-report

Чтобы просмотреть отчет в формате HTML, выполните:

  1. npx playwright show-report

Вы увидите такой вывод:

Output
Serving HTML report at http://your_ip_address:9323. Press Ctrl+C to quit.

Теперь у вас должен быть доступ к отчету через порт 9323.

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

  1. ssh -L 9323:localhost:9323 your_non_root_user@your_server_ip

Переадресация порта SSH переадресует порт сервера на локальный порт. Раздел -L 9323:localhost:9323 указывает, что порт 9323 на локальном компьютере будет перенаправлен на тот же порт на удаленном сервере.

Теперь вы сможете просмотреть отчет о тестировании, перейдя по адресу http://localhost:9323 в браузере на локальном компьютере.

Когда ваш отчет загрузится в браузере, вы увидите, что каждый тест выполнялся в трех браузерах: Chromium, Firefox и Webkit. Вы будете знать, сколько времени занял каждый тест в каждом браузере, а также сколько времени занял весь тест.

Нажмите на название отчета, чтобы просмотреть подробности.

В разделе подробностей этапы выполнения теста будут содержать этапы Before Hooks и After Hooks по умолчанию. Раздел Before Hooks часто используется для первоначальной настройки, такой как вход в консоль или чтение тестовых данных. После выполнения теста раздел After Hooks часто очищает тестовые данные в тестовой среде. Подробная информация о каждом шаге теста, включая посещение URL-адреса с помощью page.goto(), ожидание загрузки страницы с помощью page.waitForLoadState(), подсчет методы регистрации с помощью locator.count() и проверка соответствия значений с помощью expect.toBe.

На этом шаге вы запустили все три теста, проверили их успешность и просмотрели результаты теста в форматах CLI и HTML. Далее вы автоматизируете тесты с помощью Docker.

Шаг 4 — Развертывание тестов с помощью Docker

При внедрении автоматизации тестирования вы можете столкнуться с проблемами окружающей среды. Некоторые тесты будут выполняться должным образом на локальном компьютере инженера по тестированию, но затем завершатся ошибкой при интеграции в конвейер CI/CD из-за проблем совместимости среды. Чтобы избежать этой проблемы, вы можете использовать контейнеры Docker для запуска автоматического тестирования, которое вы настроите на этом шаге. Если тестирование выполняется должным образом в локальной среде с Docker, существует высокая вероятность того, что вы сможете избежать проблем совместимости в конвейере CI/CD.

Сначала вы обновите файл package.json, чтобы добавить необходимые тестовые сценарии, которые позже будут выполняться в Docker. Откройте файл:

  1. nano package.json

Добавьте выделенные строки в раздел scripts в файле package.json:

...
 "scripts": {
  "test": "playwright test --browser=all",
  "test-html-report": "playwright test --browser=all --reporter=html",
  "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
  },

Эти сценарии будут запускать пользовательские тесты вместо того, чтобы вводить полную команду. Когда вам нужно запустить тест с отображением репортера в HTML, теперь вы сможете запустить эту команду:

  1. npm run test-html-report

Вместо полной команды:

  1. npx playwright test --browser=all --reporter=html

Ваш текущий package.json будет выглядеть следующим образом:

{
  "name": "playwright-docker",
  "version": "1.0.0",
  "description": "A project for using playwright for end-to-end testing purpose with docker for deployment",
  "main": "index.js",
  "scripts": {
  "test": "playwright test --browser=all",
  "test-html-report": "playwright test --browser=all --reporter=html",
  "test-json-report": "PLAYWRIGHT_JSON_OUTPUT_NAME=results.json playwright test --browser=chromium --reporter=json"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
  "@playwright/test": "^1.22.2",
  "@types/node": "^17.0.35",
  "playwright": "^1.22.1",
  "toml": "^3.0.0",
  "typescript": "^4.6.4"
  }
}

Сохраните и закройте файл.

Затем создайте и откройте Dockerfile в текущем каталоге:

  1. nano Dockerfile

Затем добавьте в него следующее содержимое:

# Get the base image of Node version 16
FROM node:16

# Get the latest version of Playwright
FROM mcr.microsoft.com/playwright:focal
 
# Set the work directory for the application
WORKDIR /app
 
# Set the environment path to node_modules/.bin
ENV PATH /app/node_modules/.bin:$PATH

# COPY the needed files to the app folder in Docker image
COPY package.json /app/
COPY tests/ /app/tests/
COPY tsconfig.json /app/
COPY config.toml /app/

# Get the needed libraries to run Playwright
RUN apt-get update && apt-get -y install libnss3 libatk-bridge2.0-0 libdrm-dev libxkbcommon-dev libgbm-dev libasound-dev libatspi2.0-0 libxshmfence-dev

# Install the dependencies in Node environment
RUN npm install

Во-первых, вы получаете базовый образ Node версии 16 и Playwright версии focal для добавления в образ Docker. Для тестов требуется запуск Node и Playwright.

Затем вы устанавливаете имя каталога проекта в контейнере. В данном случае это WORKDIR. Установка WORKDIR /app поместит все ваши файлы в каталог /app внутри контейнера.

Вы задаете путь среды для контейнера Docker с помощью ENV PATH. В этом случае вы устанавливаете его в каталог node_modules.

Затем вы копируете все необходимые файлы в каталог /app в образе Docker.

Поскольку для запуска Playwright требуются некоторые зависимости, вы также установите эти зависимости в образе Docker.

Сохраните и закройте файл.

Далее вы создадите образ для своего проекта автоматизации:

  1. docker build -t playwright-docker .

Docker найдет Dockerfile в текущем каталоге и создаст образ, следуя инструкциям внутри Dockerfile. Флаг -t помечает образ Docker, называя его playwright-docker. . указывает Docker искать Dockerfile в этом текущем каталоге. Вы можете просмотреть документацию по продукту Docker, чтобы узнать больше о создании образов Docker.

Результат сборки (сокращенный для краткости) будет выглядеть примерно так:

Output
Sending build context to Docker daemon  76.61MB
...
added 6 packages, and audited 7 packages in 6s

found 0 vulnerabilities
Removing intermediate container 87520d179fd1
 ---> 433ae116d06a
Successfully built 433ae116d06a
Successfully tagged playwright-docker:latest

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

Проверьте, успешно ли создан образ Docker:

  1. docker image ls

Результат должен быть похож на этот:

Output
REPOSITORY                  TAG     IMAGE ID    CREATED       SIZE
playwright-docker           latest  433ae116d06a   5 minutes ago   1.92GB
mcr.microsoft.com/playwright   focal  bb9872cfd272   2 days ago   1.76GB
node                        16      c6b745e900c7   6 days ago   907MB

У вас будут изображения playwright-docker (тестовое изображение), microsoft playwright и изображения node. У вас также могут быть образы для ubuntu и hello-world, необходимые для установки Docker.

Теперь запустите тестовую команду в контейнере Docker с помощью docker run:

  1. docker run -it playwright-docker:latest npm run test

docker run запустит указанный образ Docker с помощью команды. В этом примере изображение — playwright-docker:latest, а команда — npm run test. docker run сначала вызовет контейнер Docker, а затем запустит необходимую команду. Вы можете узнать больше в документации по продукту Docker.

Результат будет выглядеть так:

Output
> playwright-docker@1.0.0 test
> playwright test --browser=all


Running 9 tests using 2 workers

  ✓  [chromium] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (7s)
  ✓  [chromium] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (8s)
  ✓  [chromium] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (8s)
  ✓  [firefox] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (9s)
  ✓  [firefox] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (8s)
  ✓  [firefox] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (5s)
  ✓  [webkit] › tests/multiplePackages.spec.ts:4:1 › Expect to have 2 packages for subscription (8s)
  ✓  [webkit] › tests/pricingComparison.spec.ts:4:1 › Expect to have 4 pricing options (10s)
  ✓  [webkit] › tests/signUpMethods.spec.ts:4:1 › Expect to have 3 options for signing up (7s)


  9 passed (41s)

Теперь тесты успешно запущены в среде Docker. Вы можете безопасно интегрировать тест автоматизации в конвейер CI/CD.

Вы также можете просмотреть файлы, созданные в этой статье, в этом репозитории.

Заключение

Теперь вы использовали Playwright для сквозного тестирования и развернули тесты с помощью Docker. Чтобы узнать больше о Playwright, посетите документацию Playwright.

Вы можете прочитать о других руководствах по Docker.