Skip to Content
DocumentationE2E TestingPlaywright Python

Playwright Python

在 Playwright Python （pytest-playwright）中集成覆盖率收集，生成 .canyon_output 供后续报告生成或上报使用。

Demo

使用该方案的优势

对于端到端测试而言，该方案的核心优势包括：

  • 支持现代化 Web 应用：现代化的 Web 应用都会经过 JS bundle 打包，Playwright 提供的默认方案只能对原生 JS 等简单场景使用 V8 收集覆盖率，而该方案通过 Babel 插桩可以准确收集打包后代码的覆盖率
  • 确保变更代码覆盖率完整性：@canyonjs/babel-plugin 会在构建时生成一份初始覆盖率数据，确保在 CI 集成时，能够收集到因懒加载而可能丢失的变更代码覆盖率
  • 与 pytest-playwright 无缝集成：通过 pytest plugin 扩展 page fixture，在用户代码层面完全实现，不会修补或替换 pytest 测试运行器
  • 灵活的覆盖率报告：.canyon_output 中的覆盖率数据可配合 Tools CLI 聚合上报，或用于本地生成 HTML 报告
Tip

该方案特别适合使用现代构建工具（如 Vite、Webpack）的 React、Vue 等框架项目，能够准确追踪打包后代码的覆盖率情况。若你偏好 Python 编写 E2E 测试，可选用 canyonjs-playwright-python 。

以新项目的形式开始

创建 React 项目

使用 Vite  创建一个 React 项目：

npm create vite@latest my-react-app -- --template react-ts

安装代码插桩所需的 Babel 插件：

npm install babel-plugin-istanbul @canyonjs/babel-plugin -D

初始化 Playwright Python

在项目根目录下安装 Playwright Python 相关依赖：

pip install playwright pytest-playwright canyonjs-playwright

安装 Chromium 浏览器：

python -m playwright install chromium

编写 pytest 测试用例

创建 tests 目录并添加测试文件：

tests/test_example.py
def test_homepage(page):
    page.goto("http://localhost:5173")
    assert "React" in page.title()

配置 canyonjs-playwright 并创建 conftest.py

在 tests 目录下创建 conftest.py，启用覆盖率收集（类似 baseTest.ts 的用法）。pytest-playwright 无内置 webServer 配置，需添加 session 级 fixture 在测试前自动启动开发服务器：

tests/conftest.py
import os
import subprocess
import time
import urllib.request
 
import pytest
 
os.environ["CANYON_OUTPUT_DIR"] = ".canyon_output"
pytest_plugins = ["canyonjs_playwright.pytest_plugin"]
 
 
@pytest.fixture(scope="session", autouse=True)
def dev_server():
    """在测试前自动启动 Vite 开发服务器"""
    proc = subprocess.Popen(
        ["npm", "run", "dev"],
        stdout=subprocess.DEVNULL,
        stderr=subprocess.DEVNULL,
    )
    url = "http://localhost:5173"
    for _ in range(60):
        try:
            urllib.request.urlopen(url, timeout=1)
            break
        except Exception:
            time.sleep(1)
    else:
        proc.kill()
        raise RuntimeError("开发服务器启动超时")
    yield
    proc.terminate()

测试用例无需修改，直接使用 page fixture 即可自动收集覆盖率。

运行测试

在项目根目录执行：

python -m pytest tests/

测试完成后，覆盖率数据会写入 .canyon_output 目录下的 coverage-{timestamp}.json 文件。

Note

仅当被测页面有 Istanbul 注入的 window.__coverage__ 时才会生成覆盖率文件。确保前端项目已正确配置 Babel 插桩。

Playwright@canyonjs/babel-plugin