Aria snapshots

• Assertion mới expect(locator).toMatchAriaSnapshot() verify cấu trúc page bằng cách so sánh với expected accessibility tree, biểu diễn dưới dạng YAML.
• Aria snapshot giúp verify ngắn gọn hơn. Thay vì dùng rất nhiều Assert, ví dụ expect(text1).toHaveText(”Get started”); thì mình dùng toMatchAriaSnapshot .

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"
`);

• Bạn có thể gen assertion này với Test Generator và update expected snapshot với --update-snapshot cmd flag.

Test runner

• Option mới testConfig.tsconfig cho phép chỉ định 1 file config duy nhất để sử dụng cho tất cả các tests.
  • Khi chưa có option này:
    • Các file sẽ ưu tiên load file tsconfig.config.json ở cùng cấp với thư mục chứa test
    Khi có option này:
    • Các file sẽ cùng load 1 file tsconfig giống nhau.
  import { defineConfig } from '@playwright/test'; export default defineConfig({ tsconfig: './tsconfig.test.json', });
• Method mới test.fail.only(): expect 1 test sẽ fail.

import { expect, test } from '@playwright/test';

test.fail.only('Test 1.49 - fail', async ({ page }) => {
    expect(1).toBe(2);
})

test('Test 1.49 - normal', async ({ page }) => {
    console.log('Normal test');
})

--- terminal
npx playwright test community-support/004-1.49.spec.ts 

Running 1 test using 1 worker
  1 passed (670ms)

To open last HTML report run:

  npx playwright show-report

→ khi dùng test.fail.only:

• Sẽ chỉ chạy case được đánh dấu test.fail.only (giống test.only)
• Case này nếu fail thì pass, nếu pass thì fail :v
• Options testConfig.globalSetup và testConfig.globalTeardown bây giờ support cho nhiều setups/teardowns.
  • Trước đây: globalSetup and globalTeardown chỉ có kiểu: string → chỉ có 1 globalSetup và 1 globalTeardown

• Hiện tại: globalSetup and globalTeardown có 2 kiểu string và Array<string> để có thể dùng nhiều setups và teardowns. → viết tách các logic của từng setup/ teardown ra các file khác nhau → sáng sủa và dễ maintain hơn.

• Giá trị mới cho testOption.screenshot: on-first-failure
  • Hiện tại screenshot sẽ có tổng 4 options:
    • ‘off’: Không chụp ảnh màn hình.
    • ‘on’: Chụp ảnh màn hình sau mỗi test.
    • ‘only-on-failure’: Chỉ chụp ảnh màn hình khi test bị lỗi.
    • ‘on-first-failure’: Chỉ chụp ảnh màn hình khi lỗi xảy ra lần đầu trong test.
• Thêm các button previous và next vào report HTML để nhanh chóng switch giữa các test cases.

• Thuộc tính mới testInfoError.cause và testError.cause phản ánh Error.cause.

Channels chrome, msedge và các channels tương tự chuyển sang chế độ headless mới

• Sự thay đổi này ảnh hưởng đến bạn nếu bạn đang sử dụng 1 trong các channel sau trong playwright.config.ts :
  • chrome, chrome-dev, chrome-beta, or chrome-canary
  • msedge, msedge-dev, msedge-beta, or msedge-canary
• Bạn cần phải làm gì?
  • Sau khi update lên Playwright v1.49, hãy run lại test suite của bạn.
  • Nếu vẫn pass, bạn có thể tiếp tục.
  • Nếu không, có thể bạn cần update snapshots của bạn, và điều chỉnh 1 số code trong test của bạn liên quan tới PDF viewer và extensions.
  • Xem issue #33566 để thêm thông tin.

Một số thay đổi khác

• Sẽ không có update với WebKit trên Ubuntu 20.04 và Debian 11. Playwright khuyên nên update OS lên phiên bản mới hơn.
• Package @playwright/experimental-ct-vue2 sẽ không update.
• Package @playwright/experimental-ct-solid sẽ không update.

Thử Chromium headless mới

• Bạn có thể sử dụng chế độ headless mới bằng cách sử dụng chromium channel. Theo official Chrome documentation puts it thì:
  • Mặt khác, New Headless là trình duyệt Chrome thực sự, do đó xác thực hơn, đáng tin cậy hơn và cung cấp nhiều tính năng hơn. Điều này làm cho nó phù hợp hơn cho test ứng dụng end-to-end có độ chính xác cao hoặc test browser extension.

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

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
    },
  ],
});

Chores

• Các elements <canvas> bên trong snapshot có thể vẽ bản xem trước.
• Method mới tracing.group() để nhóm các actions một cách trực quan trong quá trình trace.
• Playwright docker images chuyển từ Node.js v20 sang Node.js v22 LTS.

Browser Versions

• Chromium 131.0.6778.33
• Mozilla Firefox 132.0
• WebKit 18.2

Version này cũng đã được test với các channels ổn định sau:

• Google Chrome 130
• Microsoft Edge 130