TypeScript

介绍

Playwright 原生支持 TypeScript。你只需要用 TypeScript 编写测试，Playwright 会读取它们，转换为 JavaScript 并运行。

请注意，Playwright 不会检查类型，即使存在非关键的 TypeScript 编译错误，它也会运行测试。我们建议你在 Playwright 旁边运行 TypeScript 编译器。例如在 GitHub Actions 上

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

对于本地开发，你可以像这样在 watch 模式下运行 tsc

npx tsc -p tsconfig.json --noEmit -w

tsconfig.json

Playwright 会为其加载的每个源文件获取 tsconfig.json。请注意，Playwright **仅支持** 以下 tsconfig 选项：allowJs、baseUrl、paths 和 references。

我们建议在测试目录中设置一个单独的 tsconfig.json，以便你可以专门为测试更改一些首选项。这是一个示例目录结构。

src/
    source.ts

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

tsconfig.json  # generic tsconfig for all typescript sources

playwright.config.ts

tsconfig 路径映射

Playwright 支持在 tsconfig.json 中声明的 路径映射。确保也设置了 baseUrl。

这是一个适用于 Playwright 的示例 tsconfig.json

tsconfig.json

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

你现在可以使用映射的路径导入

example.spec.ts

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);
});

tsconfig 解析

默认情况下，Playwright 会通过向上遍历目录结构并查找 tsconfig.json 或 jsconfig.json 来为每个导入文件查找最近的 tsconfig。这样，你就可以创建一个 tests/tsconfig.json 文件，该文件仅用于你的测试，Playwright 会自动获取它。

# Playwright will choose tsconfig automatically
npx playwright test

或者，你可以在命令行中指定一个要使用的 tsconfig 文件，Playwright 会将其用于所有导入文件，而不仅仅是测试文件。

# Pass a specific tsconfig
npx playwright test --tsconfig=tsconfig.test.json

使用 TypeScript 手动编译测试

有时，Playwright 测试无法正确转换你的 TypeScript 代码，例如，当你使用 TypeScript 的实验性功能或最新功能时，通常在 tsconfig.json 中配置。

在这种情况下，你可以在将测试发送到 Playwright 之前执行自己的 TypeScript 编译。

首先在测试目录中添加一个 tsconfig.json 文件

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

在 package.json 中，添加两个脚本

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

pretest 脚本在测试上运行 typescript。test 将运行已生成到 tests-out 目录中的测试。-c 参数配置测试运行器在 tests-out 目录中查找测试。

然后 npm run test 将构建测试并运行它们。