> https://playwright.dev/docs/writing-tests

Introduction

• Playwright test rất đơn giản:
  • Thực hiện hành động
  • Kiểm tra kết quả sau khi thực hiện hành động có đúng với mong muốn không.
• Bình thường ở các ngôn ngữ khác, bạn phải wait (VD: wait cho trang load xong, javascript load xong). Còn ở Playwright thì việc này hoàn toàn tự động thông qua actionability check. Đại khái Playwright sẽ check trước, khi nào các website sẵn sàng rồi thì mới chạy đoạn code tiếp theo.
• Trong bài này, bạn sẽ học được:
  • Cách viết test.
  • Cách thực hiện các hành động.
  • Cách viết assertion (so sánh).
  • Cách test run độc lập với nhau.
  • Cách sử dụng test hooks

Viết test

• Xét ví dụ sau:

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

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

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

• Lưu ý: bạn có thể thêm // @ts-check ở bắt đầu của mỗi file JavaScript ở VS Code để giúp bạn check kiểu tự động.

Actions

Navigation

• Navigation là đến một trong web nào đó. Playwright dùng page.goto()

await page.goto('https://playwright.dev/');

Tương tác

• Để tương tác với phần tử thì thông qua Locator.
• Locator đại diện cho phần tử trên trang, sử dụng Locator API
• Mặc định thì Playwright sẽ đợi các phần tử có thể hoạt động được, nên bạn không cần wait thêm đâu.

// Create a locator.
const getStarted = page.getByRole('link', { name: 'Get started' });

// Click it.
await getStarted.click();

• Có thể viết gọn lại:

await page.getByRole('link', { name: 'Get started' }).click();

• Một số action cơ bản thường dùng

Assertion

• Playwright dùng expect để so sánh.
• Thường hay dùng expect(value) và chọn matcher (hàm so sánh) để so sánh.
  • VD về match: toEqual, toContain, toBeTruthy

expect(success).toBeTruthy();

• Mấy matcher phía trên là kiểm tra luôn. Ngoài ra Playwright còn có một số matcher sẽ chờ cho tới khi điều kiện xuất hiện
  • VD: chờ title xuất hiện chữ “Playwright”

await expect(page).toHaveTitle(/Playwright/);

• Một số matcher kiểu chờ (async) đây:

Test isolation (test độc lập)

• Mặc định thì test của Playwright độc lập các test với nhau.
• Giống như bạn dùng các profile trình duyệt khác nhau vậy.

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

test('example test', async ({ page }) => {
  // "page" belongs to an isolated BrowserContext, created for this specific test.
});

test('another test', async ({ page }) => {
  // "page" in this second test is completely isolated from the first test.
});

Test hooks

• Test hook giống như bạn muốn một đoạn code chạy vào một thời điểm đặc biệt của test, ví dụ: trước khi test chạy (beforeEach), sau khi test chạy (afterEach)

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

test.describe('navigation', () => {
  test.beforeEach(async ({ page }) => {
    // Go to the starting url before each test.
    await page.goto('https://playwright.dev/');
  });

  test('main navigation', async ({ page }) => {
    // Assertions use the expect API.
    await expect(page).toHaveURL('https://playwright.dev/');
  });
});