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

Giới thiệu

• Playwright hỗ trợ sẵn cho typescript. Vì vậy việc của bạn chỉ đơn giản là viết code typescript, Playwright sẽ tự chạy nó và compile code ra javascript.
• Lưu ý rằng Playwright không check kiểu dữ liệu, và nó sẽ chạy test kể cả khi có các lỗi Typescript không quá nghiêm trọng.
• Nếu được thì bạn nên chạy Typescript compiler song song với Playwright. Ví dụ với GitHub Actions dưới đây sẽ chạy typescript check trước rồi mới chạy test:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    ...
    - name: Run type checks
      run: npx tsc -p tsconfig.json --noEmit
    - name: Run Playwright tests
      run: npx playwright test

tsconfig.json

• File tsconfig là file cấu hình cho typescript.
• Trong các config này, Playwrright chỉ support 2 config option: paths và baseUrl.
• Playwright khuyên bạn nên tạo file tsconfig.json riêng cho thư mục test. Cấu trúc trông sẽ như sau:

src/
    source.ts

tests/
    tsconfig.json  # test-specific tsconfig
    example.spec.ts

tsconfig.json  # generic tsconfig for all typescript sources

playwright.config.ts

tsconfig path mapping

• Playwright hỗ trợ path mapping, khai báo ở trong tsconfig.json. Lưu ý rằng baseUrl cũng phải được set.
• Ví dụ

{
  "compilerOptions": {
    "baseUrl": ".", // This must be specified if "paths" is.
    "paths": {
      "@myhelper/*": ["packages/myhelper/*"] // This mapping is relative to "baseUrl".
    }
  }
}

• Và lúc import thì bạn có thể dùng thế này:

import { test, expect } from '@playwright/test';
import { username, password } from '@myhelper/credentials';

test('example', async ({ page }) => {
  await page.getByLabel('User Name').fill(username);
  await page.getByLabel('Password').fill(password);
});

Compile test bằng tay với Typescript

• Nếu bạn muốn compile code bằng tay bằng một lí do nào đó, bạn có thể làm như sau:
• Thêm file tsconfig.json vào trong folder tests:

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "commonjs",
        "moduleResolution": "Node",
        "sourceMap": true,
        "outDir": "../tests-out",
    }
}

• Trong file package.json, bạn thêm một số script như sau:

{
  "scripts": {
    "pretest": "tsc --incremental -p tests/tsconfig.json",
    "test": "playwright test -c tests-out"
  }
}

• pretest script sẽ biên dịch các test ra file javascript.
• test script sẽ chạy các test từ trong thư mục tests-out

Sử dụng import bên trong evaluate()

• Sử dụng dynamic import trong function thì không được support, vì Playwright dùng Function.prototype.toString() để serialize (mã hoá) các function,… đoạn sau lười dịch quá:

Using dynamic imports inside a function passed to various evaluate() methods is not supported. This is because Playwright uses Function.prototype.toString() to serialize functions, and transpiler will sometimes replace dynamic imports with require() calls, which are not valid inside the web page.

• Về cơ bản thì Playwright dùng cách như này để import dynamic:

await page.evaluate(`(async () => {
  const { value } = await import('some-module');
  console.log(value);
})()`);