Annotations

• Annotation là đánh dấu.
• Bạn hiểu đơn giản, Annotation giúp bạn đánh dấu đó là một test có dấu hiệu đặc biệt. Playwright sẽ xử lý nó theo mong muốn của bạn.
• Bạn có thể tự thêm annotation riêng cũng được.

• Một số tag built-in của Playwright:
  • test.skip(): Playwright sẽ bỏ qua test này, không chạy.
  • test.fail(): Đánh dấu test này sẽ fail. Playwright sẽ chạy test này. Nếu test không fail, Playwright sẽ báo lỗi.
  • test.fixme(): Đánh dấu test này đang fail. Playwright sẽ bỏ qua test này. Sử dụng fixme khi bạn gặp một test bị chậm hoặc crash.
  • test.slow(): Đánh dấu test này chậm, nhân ba lần timeout mặc định lên.
• Annotation có thể thêm vào một test, hoặc một group test

test.fixme('test single', async ({ page }) => {
  console.log('abc');
});

test.describe.fixme('group 1', async () => {
  test('test 1', async ({ page }) => {
    console.log('abc');
  });

  test('test 2', async ({ page }) => {
    console.log('abc');
  });
})

• Các annotation được được xây dựng sẵn (built-in) có thể có điều kiện, phụ thuộc vào fixture. Có thể có nhiều fixture trong cùng một test, cũng có thể có các config khác nhau.

Focus vào một test

• Khi có .only thì Playwright sẽ chỉ chạy test này.

test.describe('group 1', async () => {
  test('test 1', async ({ }) => {
    console.log('test 1');
  });

  test('test 2', async ({ }) => {
    console.log('test 2');
  });

  test.only('test 3', async ({ }) => {
    console.log('test 3');
  });
})

/‌/ Output
[chromium] › example.spec.ts:16:8 › group 1 › test 3
test 3

Skip một test

• Đánh dấu một test là skipped.

test.describe('example skip', async () => {
  test('test normal', async ({ }) => {
    console.log('test 1');
  });

  test.skip('test skip', async ({ }) => {
    console.log('test 2');
  });
})

// Output
Running 2 tests using 1 worker
[1/2] [chromium] › example.spec.ts:22:7 › exa
[chromium] › example.spec.ts:22:7 › example skip › test normal
test 1
[2/2] [chromium] › example.spec.ts:26:8 › exa
  1 skipped
  1 passed (274ms)

Skip test có điều kiện

• Ví dụ chỉ skip nếu browserName là firefox:

test('skip this test', async ({ page, browserName }) => {
  test.skip(browserName === 'firefox', 'Still working on it');
});

Nhóm các test lại

• Sử dụng describe để nhóm các test lại với nhau. Sau này có thể dùng chung các đoạn logic before/after hooks được.

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

test.describe('two tests', () => {
  test('one', async ({ page }) => {
    // ...
  });

  test('two', async ({ page }) => {
    // ...
  });
});

Tag tests

• Bạn cũng có thể thêm tag cho test bằng cách định nghĩa riêng thuộc tính tag trong lúc khai báo test, hoặc định nghĩa ngay trong tên test, theo sau @ như bên dưới.

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

test('test login page', {
  tag: '@fast',
}, async ({ page }) => {
  // ...
});

test('test full report @slow', async ({ page }) => {
  // ...
});

• Bạn cũng có thể tag tất cả các test trong một group cho tiện.

test.describe('group', {
  tag: '@report',
}, () => {
  test('test report header', async ({ page }) => {
    // ...
  });

  test('test full report', {
    tag: ['@slow', '@vrt'],
  }, async ({ page }) => {
    // ...
  });
});

• Sau khi tag rồi, lúc chạy, bạn có thể tìm các test có chứa tag theo ý muốn để chạy.

npx playwright test --grep @fast

• Hoặc chạy các test không chứa tag này:

npx playwright test --grep-invert @fast

• Chạy các test có tag @fast hoặc @slow

npx playwright test --grep "@fast|@slow"

• Hoặc dùng regex phức tạp:

npx playwright test --grep "(?=.*@fast)(?=.*@slow)"

Thêm chú thích cho test

• Bạn có thể thêm chú thích cho test. Chú thích bao gồm có type và description.

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

test('test login page', {
  annotation: {
    type: 'issue',
    description: 'https://github.com/microsoft/playwright/issues/23180',
  },
}, async ({ page }) => {
  // ...
});

• Tương tự như trên, bạn có thể thêm chú thích cho cả group test được luôn.

Sử dụng fixme trong beforeEach hook

• Ví dụ bạn có test case test trang user profile. Hiện tại chưa implement trên mobile. Test case có beforeHook, bạn không muốn chạy cái hook này. Bạn có thể đánh dấu fixme trong beforeEach hook để test không chạy nhé.

test.beforeEach(async ({ page, isMobile }) => {
  test.fixme(isMobile, 'Settings page does not work in mobile yet');

  await page.goto('http://localhost:3000/settings');
});

test('user profile', async ({ page }) => {
  await page.getByText('My Profile').click();
  // ...
});

Thêm annotation trong lúc chạy test

• Khi đang chạy test, bạn có thể thêm annotation bằng cách sử dụng test.info().annotations()

test('example test', async ({ page, browser }) => {
  test.info().annotations.push({
    type: 'browser version',
    description: browser.version(),
  });

  // ...
});

Cảm ơn bạn, vì đã đọc bài ^^.

Chúc bạn ngày mới tốt lành, làm việc hiệu quả. ^^