Введение

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

1. Установка и настройка

Прежде чем углубляться в новые функции, давайте кратко рассмотрим процесс установки и настройки Playwright. Вот как можно начать:

npm install playwright

2. Кроссбраузерная поддержка

Одним из важных обновлений Playwright является расширенная кроссбраузерная поддержка. Playwright теперь позволяет автоматизировать веб-приложения в нескольких браузерах, включая Chromium, Firefox и WebKit. Вот пример запуска браузера Firefox с помощью Playwright:

const { firefox } = require('playwright');
(async () => {
  const browser = await firefox.launch();
  const page = await browser.newPage();
  // Perform actions on the page
  await browser.close();
})();

3. Расширенные селекторы и Shadow DOM

Теперь Playwright предоставляет расширенные стратегии выбора, упрощающие выбор элементов на веб-странице. Он также предлагает надежную поддержку взаимодействия с элементами в Shadow DOM. Вот пример использования расширенных селекторов для нажатия кнопки внутри теневого DOM:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const shadowHost = await page.$('my-component');
  const shadowRoot = await shadowHost.shadowRoot();
  const button = await shadowRoot.$('button');
  await button.click();
  await browser.close();
})();

4. Улучшенная эмуляция мобильных устройств

Playwright представил улучшенные возможности эмуляции мобильных устройств, позволяющие тестировать и автоматизировать веб-приложения на различных мобильных устройствах. Вот пример эмуляции iPhone X:

const { webkit } = require('playwright');
(async () => {
  const browser = await webkit.launch();
  const context = await browser.newContext({
    viewport: { width: 375, height: 812 },
    userAgent: 'Mozilla/5.0 (iPhone X; CPU iPhone OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/91.0.4472.77 Mobile/15E148 Safari/604.1',
    locale: 'en-US',
  });

  const page = await context.newPage();
  await page.goto('https://example.com');
  await browser.close();
})();

5. Видеозапись

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

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({
    recordVideo: {
      dir: './videos',
    },
  });

  const page = await context.newPage();
  await page.goto('https://example.com');
  await page.click('button');
  // Perform additional actions
  await browser.close();
})();

Заключение

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

Не забывайте следить за официальной документацией и выпусками Playwright, чтобы быть в курсе будущих обновлений и дополнительных функций.

Удачной автоматизации!