Playwright позволяет запускать тесты на различных браузерах, включая Chromium, Firefox и WebKit. Это даёт разработчикам гибкость при тестировании приложений в разных браузерах, что важно для обеспечения кросс-браузерной совместимости. Каждый из поддерживаемых браузеров имеет свои особенности и может использоваться для проверки совместимости и производительности веб-приложений.
Перед тем как начать запуск тестов на разных браузерах, необходимо установить Playwright и браузеры, на которых будут выполняться тесты. Для этого нужно выполнить несколько простых шагов:
npm install playwrightPlaywright автоматически загружает последние версии браузеров (Chromium, Firefox и WebKit) при установке. Однако, если браузеры не были установлены или нужно установить конкретную версию, можно использовать команду:
npx playwright installЭто установит все поддерживаемые браузеры. Если необходимо установить только один конкретный браузер, можно использовать следующую команду:
npx playwright install chromium
npx playwright install firefox
npx playwright install webkitChromium является основой для Google Chrome и Microsoft Edge. Этот браузер является одним из самых популярных и часто используемых для тестирования. Для запуска тестов в Chromium достаточно указать его в настройках браузера:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch(); // Запуск Chromium
const page = await browser.newPage(); // Открытие новой страницы
await page.goto('https://example.com'); // Переход по URL
await page.screenshot({ path: 'screenshot.png' }); // Сохранение скриншота
await browser.close(); // Закрытие браузера
})();Этот код запускает браузер Chromium, открывает страницу, делает скриншот и закрывает браузер.
Firefox – это ещё один широко используемый браузер, который поддерживает Playwright. Для тестирования в Firefox используется аналогичный код, как и для Chromium. Однако запуск Firefox может потребовать дополнительных настроек, связанных с его особенностями.
const { firefox } = require('playwright');
(async () => {
const browser = await firefox.launch(); // Запуск Firefox
const page = await browser.newPage(); // Открытие новой страницы
await page.goto('https://example.com'); // Переход по URL
await page.screenshot({ path: 'firefox_screenshot.png' }); // Сохранение скриншота
await browser.close(); // Закрытие браузера
})();Firefox имеет свои особенности в рендеринге, поэтому важно тестировать приложения в этом браузере, чтобы убедиться в правильности отображения контента и функциональности.
WebKit используется для работы браузеров, таких как Safari. Несмотря на то, что он реже используется в тестах, его поддержка в Playwright даёт возможность тестировать приложения на платформе Apple.
Запуск тестов в WebKit аналогичен запуску в других браузерах:
const { webkit } = require('playwright');
(async () => {
const browser = await webkit.launch(); // Запуск WebKit
const page = await browser.newPage(); // Открытие новой страницы
await page.goto('https://example.com'); // Переход по URL
await page.screenshot({ path: 'webkit_screenshot.png' }); // Сохранение скриншота
await browser.close(); // Закрытие браузера
})();При работе с WebKit важно учитывать особенности рендеринга в Safari, особенно когда приложение должно работать на мобильных устройствах Apple.
По умолчанию Playwright запускает браузеры в графическом режиме, что позволяет наблюдать за процессом тестирования. Однако для ускорения тестов и их автоматизации, чаще всего используется безголовый режим. В этом режиме браузеры запускаются без пользовательского интерфейса, что делает выполнение тестов быстрее.
Для включения безголового режима достаточно передать параметр
headless: true при запуске браузера:
const browser = await chromium.launch({ headless: true });Это ускоряет выполнение тестов, так как рендеринг страницы и взаимодействие с пользовательским интерфейсом не требуется. В большинстве случаев, если нет необходимости в визуальной проверке, используется именно этот режим.
Playwright поддерживает параллельный запуск тестов, что значительно ускоряет процесс тестирования. Тесты можно запускать одновременно в нескольких экземплярах браузеров, что позволяет проверять производительность и функциональность приложений в реальных условиях.
Для этого можно создать несколько потоков или процессов, каждый из которых будет запускать тесты на разных браузерах или даже на разных страницах одного и того же браузера.
Пример параллельного запуска:
const { chromium, firefox, webkit } = require('playwright');
(async () => {
const browsers = [
chromium.launch(),
firefox.launch(),
webkit.launch()
];
const results = await Promise.all(browsers.map(async (browser) => {
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: `${browser.name()}_screenshot.png` });
await browser.close();
}));
})();Этот код запускает тесты в трёх браузерах параллельно и сохраняет результаты.
Для отладки тестов в Playwright предусмотрены различные способы записи логов и визуализации тестового процесса. Например, можно включить режим записи видео или делать снимки экрана на каждом шаге теста, чтобы анализировать поведение приложения на различных браузерах.
Включение записи видео:
const browser = await chromium.launch({
headless: false, // Включаем графический режим
args: ['--start-fullscreen']
});
const context = await browser.newContext({
recordVideo: {
dir: 'videos/', // Указываем директорию для записи видео
},
});
const page = await context.newPage();
await page.goto('https://example.com');
await page.close();
await browser.close();Запись видео помогает увидеть, что происходило в браузере в процессе выполнения тестов, и позволяет более детально анализировать возможные ошибки.
Playwright позволяет гибко настраивать параметры запуска браузеров, такие как размер окна, геолокация, параметры сети и многое другое. Это особенно полезно при тестировании мобильных версий сайтов или приложений с ограничениями по географическому положению.
Пример настройки окна браузера:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext({
viewport: { width: 1280, height: 800 },
});
const page = await context.newPage();
await page.goto('https://example.com');
await browser.close();
})();Этот код изменяет размер окна браузера перед началом теста, что полезно для симуляции различных устройств и экранов.
Playwright поддерживает удалённое подключение к браузерам, что полезно при выполнении тестов на удалённых машинах или в облачных сервисах тестирования. Это позволяет запускать тесты в разных средах без необходимости запускать браузеры локально.
Пример подключения к удалённому браузеру:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.connect({
wsEndpoint: 'ws://localhost:3000',
});
const page = await browser.newPage();
await page.goto('https://example.com');
await browser.close();
})();Удалённое подключение позволяет интегрировать Playwright в CI/CD пайплайны и использовать внешние серверы для выполнения тестов.
Тестирование на реальных устройствах: Помимо тестов на десктопных браузерах, важно проверять поведение приложения на мобильных устройствах. Playwright предоставляет возможность эмулировать мобильные устройства и проверять рендеринг и функциональность.
Осторожность при работе с WebKit: WebKit отличается от Chromium и Firefox, и иногда может вести себя по-другому при рендеринге страниц. Поэтому важно делать дополнительные проверки на Safari.
Использование Puppeteer для старых версий Chrome: Если требуется тестировать на старых версиях Chrome, можно использовать Puppeteer, который основан на Chromium, но с другой версией браузера.
Тестирование в различных браузерах с помощью Playwright даёт возможность достичь высокой степени уверенности в том, что веб-приложение будет работать корректно в самых популярных браузерах.