https://playwright.dev/docs/library

Giới thiệu

• Playwright Library cung cấp các API hợp nhất để khởi chạy và tương tác với các trình duyệt, tuy nhiên Playwright Test cũng đã hỗ trợ tất cả các actions này một cách hiệu quả hơn qua Test runner.
• Trong hầu hết trường hợp, với e2e testing, thường mọi người sẽ sử dụng Playwright test (@playwright/test) nhiều hơn Playwright library

Sự khác biệt khi sử dụng Library

• Dưới đây là cách chúng ta sử dụng Playwright library để khởi tạo Chromium, đi tới 1 page và check title của page đó:

import { chromium, devices } from 'playwright';
import assert from 'node:assert';

(async () => {
  // Setup
  const browser = await chromium.launch();
  const context = await browser.newContext(devices['iPhone 11']);
  const page = await context.newPage();

  // The actual interesting bit
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  assert(await page.title() === 'Example Domain'); // not a Web First assertion

  // Teardown
  await context.close();
  await browser.close();
})();

• Để run, sử dụng câu lệnh:

node my-script.js

• Tuy nhiên, với cùng bài toán, khi chúng ta sử dụng Playwright test, các steps sẽ ngắn hơn:

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

test.use(devices['iPhone 11']);

test('should be titled', async ({ page, context }) => {
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  await expect(page).toHaveTitle('Example');
});

So sánh Playwright library và Playwright test

• Ngoài ra, Playwright Test, như một Test runner với đầy đủ tính năng, còn bao gồm:
  • Configuration Matrix and Projects: như ở 2 ví dụ trên, với Playwright library, nếu muốn chạy test ở những trình duyệt và thiết bị khác nhau, chúng ta cần update lại code. Với Playwright test, chúng ta có thể định nghĩa 1 matrixs of configuration, chứa tập hợp cấu hình khác nhau cho các thiết bị và trình duyệt, và Playwright test sẽ run test với từng cầu hình được định nghĩa (chi tiết tham khảm tại: https://playwright.dev/docs/test-configuration)
  • Parallelization
  • Web-First Assertions
  • Reporting
  • Retries
  • Easily Enabled Tracing = and more…

Cách sử dụng

• Sử dụng npm hoặc Yarn để cài đặt Playwright library trong Node.js project

npm i -D playwright

• Ngoài ra, chúng ta cũng cần cài đặt browsers:

# Download the Chromium, Firefox and WebKit browser
npx playwright install chromium firefox webkit

# Alternatively, add packages that will download a browser upon npm install
npm i -D @playwright/browser-chromium @playwright/browser-firefox @playwright/browser-webkit

• Tham khảo thêm các options cài đặt tại https://playwright.dev/docs/browsers#managing-browser-binaries
• Sau khi cài đặt, chúng ra có thể import Playwright trong Node.js script, và khởi tạo 1 browsers trong 3 browser vừa cài đặt (chromium, firefix và webkit).

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  // Create pages, interact with UI elements, assert values
  await browser.close();
})();

• Playwright APIs là bất đồng bộ và sẽ trả về các Promise objects. Ở các ví dụ trên thì chúng ta đang sử dụng cấu trúc async/await để gói các đoạn code thành các hàm và gọi đến chính nó bằng cặp dấu ngoặc đơn:

(async () => { // Start of async arrow function
  // Function code
  // ...
})(); // End of the function and () to invoke itself

First script

• Trong kịch bản test đầu tiên, chúng ta đi tới trang web https://playwright.dev/ và chụp màn hình với browser là Webkit:

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch();
  const page = await browser.newPage();
  await page.goto('https://playwright.dev/');
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

• Mặc định Plawwright sẽ chạy test ở headless mode (không có browser thật để hiển thị lên). Để hiển thị UI, cần thêm param headless: false khi khởi tạo browser:

firefox.launch({ headless: false, slowMo: 50 });

Record scripts

• Có thể sử dụng Command line tools để record lại tương tác của người dùng và và sinh ra code test Playwright (tham khảo chi tiết hơn tại https://playwrightvn.com/blog/voc-playwright-code-gen/):

npx playwright codegen wikipedia.org

Browser downloads

• Để download Playwright browsers, chạy:

# Explicitly download browsers
npx playwright install

• Ngoài ra, chúng ta có thể thêm các package @playwright/browser-chromium, @playwright/browser-firefox, và @playwright/browser-webkit để tự động tải xuống và cài đặt các trình duyệt tương ứng:

npm install @playwright/browser-chromium

• Để download browser qua tường lửa hoặc proxy, chúng ta có thể sử dụng biến HTTPS_PROXY

# Manual
HTTPS_PROXY=https://192.0.2.1 npx playwright install

# Through @playwright/browser-chromium, @playwright/browser-firefox
# and @playwright/browser-webkit helper packages
HTTPS_PROXY=https://192.0.2.1 npm install @playwright/browser-chromium

• Download browser qua các repo khác:
  • Mặc định khi cài đặt Playwright, các trình duyệt (như Chromium, Firefox, WebKit) sẽ được tải xuống từ CDN (Content Delivery Network) của Microsoft.
  • Chúng ta có thể sử dụng biến PLAYWRIGHT_DOWNLOAD_HOST để chỉ định URL của repo chứa các trình duyệt bạn muốn tải xuống (có thể là repo nội bộ của công ty):

  # Manual
PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npx playwright install

# Through @playwright/browser-chromium, @playwright/browser-firefox
# and @playwright/browser-webkit helper packages
PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npm install

• Trong trường hợp bạn không muốn tải trình duyệt khi cài đặt các packages, có thể sử dụng biến PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD:

# When using @playwright/browser-chromium, @playwright/browser-firefox
# and @playwright/browser-webkit helper packages
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install