Playwright 1.60 — точніші тести, кращий дебаг, новий Drop API

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

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

Playwright релізнув нову версію 1.60. Шо там давайте подивимось

HAR-запис у Tracing

Нові API tracing.startHar() і tracing.stopHar() роблять запис HAR повноцінною частиною tracing API. Вони підтримують ті самі опції content, mode і urlFilter, що й recordHar.

Повертається Disposable, тому запис HAR зручно обмежувати за scope через await using:

await using har = await context.tracing.startHar('trace.har');
const page = await context.newPage();
await page.goto('https://playwright.dev');
// HAR фіналізується автоматично, коли `har` виходить зі scope. 

тепер HAR можна записувати точково під час trace-сесії, а не тільки через налаштування контексту.

Новий Drop API

Додано locator.drop(). Він симулює зовнішній drag-and-drop файлів або clipboard-like даних в елемент. Playwright диспатчить події: dragenter, dragover, drop із синтетичним DataTransfer у контексті сторінки. Це працює cross-browser-но і корисно для тестування upload/drop.

Приклад:

await page.locator('#dropzone').drop({
  files: { name: 'note.txt', mimeType: 'text/plain', buffer: Buffer.from('hello') },
});
await page.locator('#dropzone').drop({
  data {
    'text/plain': 'hello world',
    'text/uri-list': 'https://example.com',
  },
});

ARIA snapshots

— expect(page).toMatchAriaSnapshot() тепер expect(page).toMatchAriaSnapshot() працює не тільки з Locator, а й напряму з Page. Це еквівалентно перевірці: page.locator('body')

— Нова опція boxдля: locator.ariaSnapshot()/ page.ariaSnapshot(). Вона додає bounding box кожного елемента у форматі: [box=x,y,width,height]. Це корисно для AI-обробки, коли потрібно не тільки дерево доступності, а й координати елементів.

Новий test.abort()

Додано test.abort(), який дозволяє аварійно зупинити поточний тест із fixture, hook або route handler.

Його варто використовувати тест треба негайно завершити з помилкою. Приклад:

test('does not publish to the shared page', async ({ page }) => {
  await page.route('**/publish', route => {
    test.abort('Tests must not publish to the shared page. Use the `clone` option.');
    return route.abort();
  });
  // ...
});

Нові API

Browser, Context and Page

— Додано подіюbrowser.on('context'). Вона спрацьовує, коли в браузері створюється новий context.

— BrowserContext тепер дзеркалить lifecycle events зі своїх pages: browserContext.on('download'), browserContext.on('frameattached'), browserContext.on('framedetached'), browserContext.on('framenavigated'), browserContext.on('pageclose'), browserContext.on('pageload')

можна підписуватися на події на рівні context, а не на кожну page окремо.

Locators and Assertions

— Додано нову опцію description для: page.getByRole(), locator.getByRole(), frame.getByRole() frameLocator.getByRole(). Вона дозволяє матчити елемент за accessible description.

— Додано опцію pseudo для: expect(locator).toHaveCSS(). Тепер можна читати computed styles з псевдоелементів: ::before ::after

— Додано опцію style для: locator.highlight(). Вона дозволяє застосувати додатковий inline CSS до highlight overlay. Також додано: page.hideHighlight() для очищення всіх highlights.

Network

— Додано: webSocketRoute.protocols(). Метод повертає WebSocket subprotocols, які були запитані сторінкою.

— Додано опцію noDefaults для: browserType.connectOverCDP() . Вона вимикає дефолтні overrides Playwright для default context, зокрема: download behavior, focus emulation, media emulation

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

Errors and Reporting

— Додано: webError.location() Він працює аналогічно до: consoleMessage.location()

— consoleMessage.location() тепер має властивості: line / column  а старі: lineNumber/columnNumber  позначені як deprecated.

— Додано: testInfoError.errorContext. Він показує додатковий діагностичний контекст, наприклад ARIA snapshot receiver-елемента в момент падіння expect(...) matcher.

— reporter.onError() тепер отримує аргумент workerInfo, який містить інформацію про worker для помилок fixture teardown.

Test runner

— Додано token: {testFileBaseName}  для: testProject.snapshotPathTemplate. Це ім’я test file без extension.

— Test runner тепер видає помилку, якщо config:

1. намагається override-ити fixture, який не є option fixture;
2. задає workers: 0;
3. задає від’ємне значення workers.

Інші покращення

HTML reporter

— npx playwright show-report тепер може напряму приймати .zip файли. Розпаковувати вручну більше не потрібно.

— Якщо steps містять attachments всередині nested children, parent step показує індикатор.

— repeatEachIndex тепер показується в test header, якщо він не дорівнює нулю.

Trace Viewer

Trace Viewer отримав pretty-print toggle для JSON / form request і response bodies у network details panel.

Тобто перегляд request/response body у trace став зручнішим.

Breaking Changes

Видалено давно deprecated API:

— Locator.ariaRef()  Замість нього треба використовувати стандартний pipeline через: locator.ariaSnapshot()

— handle option у: BrowserContext.exposeBinding Page.exposeBinding

— logger option у: BrowserType.connect BrowserType.connectOverCDP Замість цього рекомендується використовувати tracing.

— Видалено context options: videosPath / videoSize . Замість них треба використовувати: recordVideo

Browser versions

Chromium 148.0.7778.96

Mozilla Firefox 150.0.2

WebKit 26.4

Також ця версія протестована зі stable channels:

Google Chrome 147

Microsoft Edge 147

Саммарі:

1. locator.drop() дуже корисно для тестування drag-and-drop upload zones без складних workarounds.
2. HAR у tracing API зручніше збирати network evidence під час debug/test execution.
3. ARIA snapshots на рівні Page простіше робити accessibility/state snapshots для всієї сторінки.
4. test.abort() корисно для fail-fast сценаріїв у fixtures/hooks/routes.
5. Breaking changes треба перевірити, чи не використовуються старі API: ariaRef, videosPath, videoSize, logger, handle.
6. HTML reporter із .zip напряму зручніше працювати з report artifacts у CI/CD.

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