Playwright 1.49: Breaking changes та нові можливості снепшотів і тест ранів

💡 Усі статті, обговорення, новини про тестування — в одному місці. Приєднуйтесь до QA спільноти!

Вітаю. З вами Артур!

Сьогодні Playwright релізнув нову версію 1.49. Є цікаві оновлення та ті, що можуть вас заафектити. Тож подивимось, що всередині.

Aria snapshots

Нова перевірка expect(locator).toMatchAriaSnapshot() дозволяє перевіряти структуру сторінки, порівнюючи її з очікуваним аксесабіліті деревом, представленим у форматі YAML.

await page.goto('https://playwright.dev');
await expect(page.locator('body')).toMatchAriaSnapshot(`
  - banner:
    - heading /Playwright enables reliable/ [level=1]
    - link "Get started"
    - link "Star microsoft/playwright on GitHub"
  - main:
    - img "Browsers (Chromium, Firefox, WebKit)"
    - heading "Any browser • Any platform • One API"
`);

Нагадаю, що у Playwright aria-снепшоти дають YAML-представлення аксесабіліті дерева сторінки. Ці знімки можна зберігати та порівнювати пізніше, щоб перевірити, чи залишається структура сторінки незмінною або відповідає визначеним очікуванням. YAML описує структуру доступних елементів на сторінці, деталізуючи ролі, атрибути, значення та текстовий вміст. Структура слідує деревоподібному синтаксису, де кожен вузол представляє елемент, а відступи вказують на вкладені елементи.

Наприклад, для:

<h1>title</h1>

Можно створити таку перевірку:

await expect(page.locator('body')).toMatchAriaSnapshot(`
  - heading "title"
`);

Під час порівняння шаблон знімка зіставляється з поточним аксесабіліті деревом сторінки:

— Якщо структура дерева відповідає шаблону, тест проходить; інакше він фейлиться, вказуючи на розбіжність між очікуваним і фактичним станом.
— Порівняння чутливе до регістру та видаляє зайві пробіли, тому відступи та розриви рядків ігноруються.
— Порівняння враховує порядок, тобто порядок елементів у шаблоні знімка має відповідати порядку в дереві доступності сторінки.

Також ви можете робити часткові порівняння, опустивши атрибути або імена, увімкнувши перевірку окремих частин, не вимагаючи точних збігів. Ця гнучкість корисна для динамічних або нерелевантних атрибутів.

І також ви можете використовувати регулярки при порівняннях. Наприклад:

<h1>Issues 12</h1>

в YAML

- heading /Issues \d+/

Ви можете згенерувати цю перевірку за допомогою Test Generator через «Assert snapshot» або «Aria snapshot» та оновити очікуваний знімок за допомогою команди --update-snapshots:

npx playwright test --update-snapshots

Playwright чекатиме максимально вказаного таймауту в конфігурації тест рану, щоб переконатися, що сторінка стабілізувалася перед створенням знімка. Може знадобитися налаштування параметра --timeout, якщо тест досягає тайм-ауту під час генерації знімків.

Порожній шаблон для генерації знімків

Передача порожнього рядка у перевірці дозволяє створити знімок «на льоту»:

 await expect(locator).toMatchAriaSnapshot('');

Файли патчів для знімків

Під час оновлення знімків Playwright створює файли патчів, які фіксують відмінності. Ці файли можна переглядати, застосовувати та комітити в систему контролю версій, дозволяючи командам відстежувати зміни у структурі з часом і забезпечувати узгодженість оновлень із вимогами застосунку.

Детальніше про це можно прочитати в гайді по снепшотам.

Тест ранер

— Нова опція testConfig.tsconfig дозволяє вказати єдиний tsconfig для всіх тестів. За замовчуванням tsconfig для кожного імпортованого файлу визначається окремо.

import { defineConfig } from '@playwright/test';
export default defineConfig({
  tsconfig: './tsconfig.test.json',
});

— Новий метод test.fail.only() для зосередженні на конкретному тесті, який зафейлився.

import { test, expect } from '@playwright/test';
test.fail.only('focused failing test', async ({ page }) => {
  // This test is expected to fail
});
test('not in the focused group', async ({ page }) => {
  // This test will not run
});

— Опції testConfig.globalSetup та testConfig.globalTeardown тепер підтримують кілька налаштувань початку та завершення.

import { defineConfig } from '@playwright/test';
export default defineConfig({
  globalSetup: './global-setup',
  globalTeardown: './global-teardown',
});

— Нове значення 'on-first-failure' для testOptions.screenshot робить знімок екрана після першої невдачі кожного тесту.
— Додано кнопки «previous» та «next» до HTML-звіту для швидкого перемикання між тестовими випадками.
— Нові властивості testInfoError.cause та testError.cause, які дзеркалять Error.cause.

Зміни, що порушують сумісність

Перехід каналів chrome, msedge та подібних на новий headless режим

Це вплине, якщо ви юзали наступні канали у playwright.config.ts:

— chrome, chrome-dev, chrome-beta, або chrome-canary
— msedge, msedge-dev, msedge-beta, або msedge-canary

Що робити

Після оновлення до Playwright v1.49 запустіть тести. Якщо вони пройшли — все добре. Якщо ні, вірогідно, треба оновити ваші снепшоти та адаптувати код тестів для PDF-вьюверів або розширень.

Новий headless режим Chromium

Якщо ви раніше тестували в headless-режимі, ви фактично не запускали той самий браузер, яким користуються реальні користувачі. Як зазначено в документації про headless:

Раніше headless-режим був окремою, альтернативною реалізацією браузера, яка постачалася разом із тим самим виконуваним файлом Chrome.

Це означає, що headless-режим по суті був іншим браузером. Веб-контент рендерився так само, тому в більшості випадків для тестування веб-сторінок різниця була непомітною. Однак існували деякі відмінності, наприклад, у плагінах, скріншотах, переглядачах PDF, розширеннях тощо.

Нова реалізація headless-режиму

Упродовж кількох останніх випусків у Chromium з’явилася нова реалізація headless-режиму, яка ближча до звичайного (headed) браузера, а не є окремим headless-браузером. Нещодавно Chromium повністю перейшов на нову реалізацію та видалив стару. Детальніше можна прочитати в офіційній документації Chromium.

Chromium Headless Shell

Оскільки старий headless-режим більше недоступний, Playwright тепер постачає окрему збірку браузера `chromium-headless-shell`, яка відповідає старому headless-режиму. Більш детальну інформацію можна знайти в документації Chromium.

Що потрібно зробити?

Та по суті нічого. Playwright автоматично вибирає між збірками headed і headless браузерів. Змінився тільки розмір завантаження, оскільки Playwright тепер за замовчуванням завантажує обидві збірки: headed і headless.

Якщо ви запускаєте тести лише в headless-режимі, наприклад, у CI-середовищі, ви можете оптимізувати завантаження:

# раніше
npx playwright install
# для тестів лише у headless-режимі
npx playwright install --only-shell

Це дозволяє пропустити завантаження headed-збірки Chromium, використовуючи `chromium-headless-shell` для headless-режиму.

Як увімкнути новий headless-режим?

Щоб перейти на новий headless, додайте в конфігурацію `channel: ’chromium’`:

import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        channel: 'chromium',
      },
    },
  ],
});

Переконайтесь, що ваші тести працюють коректно, та повідомляйте про будь-які проблеми.

Інші зміни, що порушують сумісність

— Оновлення для WebKit на Ubuntu 20.04 та Debian 11 більше не будуть доступні. Рекомендується оновити ОС до новішої версії.
— Пакети @playwright/experimental-ct-vue2 і @playwright/experimental-ct-solid більше не оновлюватимуться.

Інші оновлення

— Елементи <canvas> у снепшотаї тепер відображають превью.
— Новий метод tracing.group() для візуального групування дій у трейсах.
— Playwright Docker-образи перейшли з Node.js v20 на Node.js v22 LTS.

Версії браузерів

— Chromium: 131.0.6778.33
— Mozilla Firefox: 132.0
— WebKit: 18.2

Також цей реліз був протестован на наступних стабільних каналах:

— Google Chrome: 130
— Microsoft Edge: 130

P.S.

Всім гарного дня, стабільних тестів та буду радий бачити у своїй групі, щоб слідкувати за оновленнями світу тестування та розробки!