Архитектура Playwright и принципы работы

Playwright — это мощный инструмент для автоматизации браузеров, который предоставляет API для тестирования веб-приложений. Он поддерживает работу с несколькими браузерами, такими как Chromium, Firefox и WebKit, и позволяет работать с браузерами на разных платформах, включая Windows, macOS и Linux. Прежде чем приступить к работе с Playwright, важно разобраться в его архитектуре и принципах работы, чтобы эффективно использовать его возможности для написания тестов.

Основные компоненты Playwright

  1. Browser Основной объект, представляющий браузер. В Playwright поддерживаются три основных браузера:

    • Chromium — версия браузера Google Chrome.
    • Firefox — версия браузера Mozilla Firefox.
    • WebKit — движок, на котором основан браузер Safari.

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

  2. Context Контекст представляет собой независимую среду выполнения, внутри которой можно открывать несколько страниц. Контексты позволяют изолировать тесты друг от друга, создавая “песочницу” для каждого теста. Важно, что каждый контекст имеет собственные куки, локальное хранилище и другие данные сессии. Это помогает избежать перекрёстного влияния между тестами и гарантировать чистоту тестирования.

  3. Page Объект Page представляет собой вкладку браузера и предоставляет интерфейс для взаимодействия с веб-страницей. Внутри страницы можно выполнять действия, такие как клик по элементам, ввод текста, проверка состояния элементов и так далее. Каждая страница изолирована, что позволяет работать с несколькими страницами в рамках одного теста.

  4. ElementHandle Это объект, представляющий собой ссылку на HTML-элемент на странице. Он позволяет взаимодействовать с элементами, такими как клик, ввод текста, получение значений атрибутов и другие действия. В отличие от Locator, который является более абстрактным и гибким механизмом для поиска элементов, ElementHandle является более конкретным и имеет связь с реальным DOM-элементом на странице.

  5. Locator Locator — это абстракция, которая представляет собой способ поиска элементов на странице. В отличие от ElementHandle, локатор используется для поиска элемента в момент выполнения теста, и он автоматически обновляется при изменении DOM. Локаторы могут быть основаны на различных стратегиях, таких как селекторы CSS, XPath или текстовые метки.

Взаимодействие с браузером

Playwright предоставляет API, которое позволяет создавать и управлять браузерами с помощью Node.js. Когда создается экземпляр Browser, он запускается в фоновом режиме и предоставляет доступ к странице и контексту. Для того чтобы начать взаимодействие с браузером, необходимо выполнить несколько шагов:

  1. Запуск браузера Чтобы начать тестирование, сначала необходимо создать экземпляр браузера с помощью метода playwright.chromium.launch() (для Chromium) или playwright.firefox.launch() (для Firefox). Этот метод запускает браузер и возвращает объект Browser, через который можно создавать контексты и страницы.

    const { chromium } = require('playwright');
const browser = await chromium.launch();

  2. Создание контекста После того как браузер был запущен, можно создать контекст. Контексты позволяют изолировать тесты друг от друга, создавая для каждого теста отдельное состояние браузера.

    const context = await browser.newContext();

  3. Открытие страницы Внутри контекста можно создать новую страницу. Каждый объект Page предоставляет API для взаимодействия с браузером, как например, клик по элементам, ввод текста, проверка состояния элементов.

    const page = await context.newPage();

  4. Взаимодействие с элементами На странице можно работать с элементами через различные механизмы поиска, такие как Locator. Например, для поиска кнопки с текстом “Submit” можно использовать следующий код:

    const submitButton = page.locator('text=Submit');
await submitButton.click();

  5. Закрытие браузера После выполнения всех тестов необходимо закрыть браузер, чтобы освободить ресурсы.

    await browser.close();

Параллельное выполнение и обработка нескольких контекстов

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

Пример создания нескольких контекстов:

const context1 = await browser.newContext();
const context2 = await browser.newContext();
const page1 = await context1.newPage();
const page2 = await context2.newPage();

await page1.goto('https://example.com');
await page2.goto('https://another-example.com');

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

Принципы работы с асинхронностью

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

Пример асинхронного теста:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://example.com');
  const title = await page.title();
  console.log(title);

  await browser.close();
})();

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

Playwright предоставляет встроенные возможности для логирования и отладки тестов. В процессе тестирования можно настроить вывод логов и перехват сетевых запросов для анализа работы веб-приложений.

Пример перехвата запросов:

page.on('route', route => {
  console.log(route.request().url());
});

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

await page.screenshot({ path: 'screenshot.png' });

Работа с мобильными устройствами

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

Пример эмуляции устройства:

const iPhone = playwright.devices['iPhone 11'];
const context = await browser.newContext({ ...iPhone });
const page = await context.newPage();
await page.goto('https://example.com');

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

Интеграция с тестовыми фреймворками

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

Пример интеграции с Jest:

const { chromium } = require('playwright');

describe('Playwright Test', () => {
  let browser, page;

  beforeAll(async () => {
    browser = await chromium.launch();
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  test('should load the homepage', async () => {
    await page.goto('https://example.com');
    const title = await page.title();
    expect(title).toBe('Example Domain');
  });
});

Заключение

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

Оглавление