https://playwright.dev/docs/test-snapshots

Introduction

• Playwright Test còn có khả năng tạo và so sánh trực quan các sreenshot bằng cách sử dụng expect(page).toHaveScreenshot() . Trong lần chạy đầu tiên, Playwright test sẽ gen ra các screenshots làm gốc. Những lần chạy tiếp theo sẽ so sánh với ảnh gốc trước đó.
• example.spec.ts:

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

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot();
});

Generating screenshots

• Khi bạn chạy lệnh trên trong lần đầu tiên, test runner sẽ báo:

Error: A snapshot doesn't exist at example.spec.ts-snapshots/example-test-1-chromium-darwin.png, writing actual.

• Đó là bởi vì chưa có file gốc. Phương thức này sẽ chụp 1 loạt screenshots đến khi nào 2 screenshots liên tiếp match với nhau, và lưu screenshot cuối cùng vào hệ thống file. Bây giờ nó đã sẵn sàng để thêm vào repository.

drwxr-xr-x  5 user  group  160 Jun  4 11:46 .
drwxr-xr-x  6 user  group  192 Jun  4 11:45 ..
-rw-r--r--  1 user  group  231 Jun  4 11:16 example.spec.ts
drwxr-xr-x  3 user  group   96 Jun  4 11:46 example.spec.ts-snapshots

• Tên của snapshot là example-test-1-chromium-darwin.png bao gồm 1 vài phần sau:
  • example-test-1.png – tên được tạo tự động của snapshot. Ngoài ra bạn có thể chỉ định tên ảnh snapshot làm tham số của phương thức toHaveScreenshot() .

await expect(page).toHaveScreenshot('landing.png');

    - `chromium-darwin` - tên browser và platform. Các screenshots khác nhau giữa các browsers và platforms do cách hiển thị khác nhau, fonts hay những cái khác, vì vậy bạn sẽ cần những snapshots khác nhau cho chúng. Nếu bạn dùng nhiều projects khác nhau trong [configuration file](https://playwright.dev/docs/test-configuration) của bạn, tên project sẽ sử dụng thay vì `chromium` .
- Tên snapshot và path có thể được config với `snapshotPathTemplate` trong playwright config.

# Updating screenshots
- Đôi khi bạn cần update screenshot tham chiếu, ví dụ khi page của bạn thay đổi. Bạn có thể làm thế với flag `--update-snapshots` .

```typescript
npx playwright test --update-snapshots

• Lưu ý rằng snapshotName cũng chấp nhận mảng có một loạt các paths dẫn đến snapshot chẳng hạn như expect().toHaveScreenshot(['relative', 'path', 'to', 'snapshot.png']) . Tuy nhiên, path này cần phải nằm ở các thư mục snapshot cho mỗi file test. (i.e a.spec.js-snapshots), nếu không nó sẽ thoát ra.

Options

maxDiffPixels

• Playwright Test sử dụng thư viện https://github.com/mapbox/pixelmatch. Bạn có thể chuyển các tùy chọn khác để sửa đổi behavior của nó:

• example.spec.ts

  import { test, expect } from '@playwright/test';
  
  test('example test', async ({ page }) => {
    await page.goto('https://playwright.dev');
    await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });
  });
  

• Nếu bạn muốn chia sẻ giá trị default giữa tất cả các tests trong project, bạn có thể chỉ định nó trong playwright config, trên toàn cục hoặc theo từng project:

• playwright.config.ts:

  import { defineConfig } from '@playwright/test';
  export default defineConfig({
    expect: {
      toHaveScreenshot: { maxDiffPixels: 100 },
    },
  });
  

stylePath

• Bạn có thể áp dụng stylesheet tùy chỉnh với page của bạn khi chụp screenshot. Điều này cho phép lọc ra các element dynamic hoặc dễ biến mất, do đó cải thiện tính xác định của screenshot.

• screenshot.css:

  iframe {
    visibility: hidden;
  }
  

• example.spec.ts:

  import { test, expect } from '@playwright/test';
  
  test('example test', async ({ page }) => {
    await page.goto('https://playwright.dev');
    await expect(page).toHaveScreenshot({ stylePath: path.join(__dirname, 'screenshot.css') });
  });
  

• Nếu bạn muốn chia sẻ giá trị default giữa tất cả các tests trong project, bạn có thể chỉ định nó trong playwright config, trên toàn cục hoặc theo từng project:

• playwright.config.ts

import { defineConfig } from '@playwright/test';
export default defineConfig({
  expect: {
    toHaveScreenshot: {
      stylePath: './screenshot.css'
    },
  },
});

Non-image snapshots

• Ngoài screenshots, bạn có thể sử dụng expect(value).toMatchSnapshot(snapshotName) để so sánh với text hoặc dữ liệu nhị phân tuỳ ý. Playwright còn tự động detect loại content và sử dụng thuật toán so sánh thích hợp.
• Ở đây ta so sánh text content với tham chiếu.
• example.spec.ts:

import { test, expect } from '@playwright/test';
test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt');
});

• Snapshots được lưu bên cạnh file test, trong 1 thư mục riêng. Ví dụ, file my .spec.ts tạo ra và lưu snapshots trong my.spec.ts-snapshots. Bạn có thể commit directory này tới VC (version control) của bạn (ví dụ: git), và review bất kỳ thay đổi với nó.