如何不使用Playwright测试运行器执行Playwright组件测试？

Hey there! 我完全懂你现在的困扰——想用Playwright做组件测试，但受限于现有环境没法用官方的测试运行器，只能搞成独立的Node脚本跑，特别是那个mount函数，没有测试运行器加持根本不知道怎么搞出来，对吧？别慌，咱们可以手动把测试运行器封装的那些逻辑自己搭起来，一样能跑组件测试。

其实Playwright的组件测试运行器核心就是帮咱们做了三件事：启动浏览器环境、封装组件挂载的逻辑、提供mount函数。咱们只要手动把这些步骤补全就行，下面给你具体的实现方案，以React组件为例：

第一步：准备依赖 #

首先确保你安装了必要的包，包括Playwright核心、组件测试的实验性包，还有对应框架的依赖（比如React相关）：

npm install @playwright/test @playwright/experimental-component-testing react react-dom

第二步：编写Node可执行脚本 #

咱们可以直接写一个Node脚本，手动启动浏览器、创建mount函数，然后执行组件测试逻辑，和你原来的测试代码几乎无缝衔接：

const { chromium } = require('@playwright/test');
const { createMount } = require('@playwright/experimental-component-testing/react');
const React = require('react');
// 替换成你自己的Button组件路径
const Button = require('./src/components/Button');

// 用自执行异步函数包裹整个逻辑
(async () => {
  // 1. 启动浏览器和页面
  const browser = await chromium.launch({ headless: false }); // 可以设置headless: true让它后台跑
  const context = await browser.newContext();
  const page = await context.newPage();

  // 2. 创建和测试运行器里一样的mount函数
  const mount = createMount(page, {
    // 这里可以加全局配置，比如全局样式、包裹组件（比如Provider）
    // 比如如果你的组件需要React Context，可以在这里配置wrapper
    // wrapper: ({ children }) => React.createElement(YourContextProvider, null, children)
  });

  let clicked = false;

  // 3. 挂载组件，用法和测试运行器里完全一致
  const component = await mount(
    // 如果你用JSX的话，需要用ts-node或者Babel转译，这里用React.createElement是原生Node支持的写法
    React.createElement(Button, {
      title: "Submit",
      onClick: () => { clicked = true }
    })
  );

  // 4. 执行断言和操作
  await expect(component).toContainText('Submit');
  await component.click();
  // 用Node内置的assert做断言，也可以用你习惯的断言库
  require('assert').strictEqual(clicked, true, '点击按钮应该触发onClick事件');

  console.log('所有测试通过！');

  // 5. 清理资源
  await browser.close();
})().catch(err => {
  console.error('测试失败:', err);
  process.exit(1);
});

关于JSX的说明 #

如果你的代码里想用JSX（就像你示例里的<Button ... />写法），Node默认不支持，所以需要用ts-node或者Babel来转译脚本。比如：

1. 把脚本改成.tsx后缀
2. 安装ts-node和typescript：npm install -D ts-node typescript
3. 运行脚本：npx ts-node your-script.tsx

其他框架的适配 #

如果你用的是Vue、Svelte等其他框架，原理完全一样，只是导入的mount创建函数对应不同的框架模块：

• Vue：const { createVueMount } = require('@playwright/experimental-component-testing/vue');
• Svelte：const { createSvelteMount } = require('@playwright/experimental-component-testing/svelte');

这样你就能完全脱离Playwright测试运行器，直接用Node运行组件测试脚本了！

备注：内容来源于stack exchange，提问作者Juan Enrique Muñoz Zolotoochin