Playwright — один API для всех браузеров - мечта тестировщика сбылась

Представьте: вам нужно протестировать веб-приложение в трёх разных браузерах. Раньше это означало три разных набора скриптов, три подхода к автоматизации и кучу времени на поддержку. В 2024 году проблема решается одной командой: npm init playwright@latest. Как Microsoft создал инструмент, который выбирают 75 тысяч разработчиков на GitHub?

Что скрывается за маской Playwright

Playwright — это не просто ещё один фреймворк для тестирования. Это целая экосистема для автоматизации веб-браузеров, которую разрабатывает команда Microsoft. Проект родился в 2019 году и за 5 лет обогнал по популярности многие veteran-решения.

Чем он отличается от того же Selenium? Тремя ключевыми преимуществами:

Единый API для Chromium, Firefox и WebKit — пишете тесты один раз, запускаете везде
Автоматическое ожидание элементов — больше никаких sleep(5) в тестах
Скорость — изолированные контексты браузера для каждого теста

Установка займёт минуту:

npm init playwright@latest
# или для нового проекта
npm init playwright@latest new-project

5 причин попробовать Playwright сегодня

1. Тесты, которые не ломаются

Знакомы с «мигающими» (flaky) тестами, которые то проходят, то нет? Playwright решает это:

Авто-ожидание: действия выполняются только когда элемент готов
Умные проверки: assertions автоматически перезапускаются
Трассировка: запись видео, скриншоты и журнал действий для анализа

Пример стабильного теста:

test('Покупка товара', async ({ page }) => {
  await page.goto('https://shop.example.com');
  await page.getByText('Купить').click(); // Ждёт, пока кнопка станет кликабельной
  await expect(page.getByText('Заказ оформлен')).toBeVisible(); // Автоматическая перепроверка
});

2. Эмуляция любых устройств

Тестируйте мобильные сценарии без реальных устройств:

import { devices } from '@playwright/test';

test.use({
  ...devices['iPhone 13 Pro'],
  geolocation: { longitude: 37.6173, latitude: 55.7558 } // Москва
});

3. Работа с теневым DOM и iframe

Больше никаких мучений с Shadow DOM:

// Клик по элементу внутри shadow DOM
await page.locator('component::shadow=button').click();

4. Инструменты для разработки

Codegen: записывает тесты по вашим действиям в браузере
Инспектор: показывает цепочку событий и локаторы
Trace Viewer: воспроизводит «кино» неудачного теста

5. Поддержка языков

Хотите не на JavaScript? Есть версии для:

Python
Java
.NET
TypeScript

Когда Playwright особенно хорош

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

Под капотом: как это работает

Playwright взаимодействует с браузерами через протокол Chrome DevTools. Каждый тест запускается в изолированном контексте (как отдельное окно в режиме инкогнито), что обеспечивает:

Быстрое создание контекстов (~10 мс)
Независимость тестов друг от друга
Возможность эмулировать разные пользователей

// Два независимых пользователя в одном тесте
const user1 = await browser.newContext();
const user2 = await browser.newContext();

Стоит ли переходить с Selenium?

Если у вас:

Много flaky-тестов
Нужна поддержка мобильных сценариев
Часто меняется вёрстка

— Playwright сэкономит вам десятки часов. Для legacy-проектов с кучей Selenium-тестов переход может быть неочевидным, но новые проекты точно стоит начинать с Playwright.

Итог: кому подойдёт Playwright

✔ Frontend-разработчикам — для быстрого тестирования компонентов ✔ QA-инженерам — для стабильных end-to-end тестов ✔ Data Scientist'ам — для надёжного парсинга данных

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

А вы уже используете Playwright в своих проектах? Делитесь опытом в комментариях!