Skip to main content

playwright 测试教程

Author: Housu Zhang

前期准备​

  1. 同上一个 e2e 测试教程，我们需要的包通过 GITHUB_TOKEN 的验证，和 pnpm i 的方式更新 playwright 所需要的包。

playwright 的优势与使用原因​

Playwright 是一个开源的自动化库，由 Microsoft 开发，用于进行跨浏览器端到端（end-to-end）的测试。它允许开发者编写测试脚本，用来自动操作 Chrome, Firefox, 和 WebKit 这三种浏览器的最新版本。

why playwright?​

我们团队项目开发有比较统一的风格，我们习惯通过 ci 来保证主分支的健康，并且在 ci 检测 pull request 的同时，部署一个 preview 的版本。这个 preview 的版本几乎和生产环境无异。此时，我们通过 playwrigh 来测试 preview 版本的接口，完完全全模拟用户真实使用的操作，进一步保证将要合入的 pull request 的稳定性，保持生产环境的健康。

配置​

可能 pnpm i 以后还需要更新启动浏览器的包: pnpm playwright install 。

代码实战​

文件名我们一般用 xxx.test.ts 这样避免和 spec.ts 这些 unit 测试，e2e 测试重复。

以下是一个简单的 playwright 测试：

import { test, expect } from "@playwright/test";
import { AppConfig } from "../src/config";

test("should display service statuses", async ({
  /*我们这里都用request来检测接口，不需要在page上*/
  request,
}) => {
  // 这里的 url 用了环境变量，如果没有 PREVIEW_URL，则用localhost:3340端口
  const url = new URL(AppConfig.PREVIEW_URL + "/health");
  const response = await request.get(url.toString());
  const jsonResponse = await response.json();

  expect(jsonResponse).toEqual(
    expect.objectContaining({
      services: expect.arrayContaining([
        expect.objectContaining({
          status: "ok",
        }),
      ]),
    })
  );
});