【亲测免费】 Playwright CRX：一款强大的浏览器自动化测试工具

项目介绍

Playwright CRX 是基于 Playwright 库的 Chrome 扩展版本，它利用 Chrome 的 chrome.debugger 接口实现了 Playwright 的 ConnectionTransport 接口。Playwright 是一个自动化测试库，支持多种浏览器，提供端到端的测试功能。Playwright CRX 通过 Chrome 扩展的形式，使得用户能够更加便捷地在 Chrome、Chromium 或 Edge 浏览器中录制和运行 Playwright 脚本。

项目技术分析

Playwright CRX 的核心是利用 Playwright 的功能，通过 Chrome 扩展来实现录制和播放自动化脚本。它的关键技术点包括：

• Chrome Extensions API：使用 Chrome 扩展的 API 来创建功能，如动作按钮、上下文菜单、侧边面板、命令快捷键和选项页面等。
• Playwright 的 ConnectionTransport 接口：通过该接口实现与浏览器的通信，使得扩展能够控制和记录浏览器的行为。
• 内嵌的录制和播放器：集成了 Playwright 的录制功能，用户可以直接在浏览器中录制脚本，并以多种语言格式导出。

项目及应用场景

Playwright CRX 的应用场景广泛，主要包括以下几个方面：

1. 自动化测试：在 Web 应用开发过程中，使用 Playwright CRX 进行端到端测试，确保应用的功能正确性。
2. 性能监控：通过录制和回放用户操作，分析应用在不同操作下的性能表现。
3. 教学演示：通过录制操作脚本，用于教学和演示如何在浏览器中进行自动化测试。

项目特点

Playwright CRX 具有以下显著特点：

• 无需依赖：作为一个 Chrome 扩展，Playwright CRX 无需其他依赖即可运行，用户可以通过 Chrome Web Store 直接安装。
• 多语言支持：录制的脚本可以导出为多种编程语言格式，如 Node.js、Python 等，方便不同开发者使用。
• 丰富的扩展功能：提供了动作按钮、上下文菜单、侧边面板、命令快捷键等多种扩展功能，提升用户体验。
• 可视化操作：通过图形化的录制和播放界面，用户无需编写代码即可进行自动化测试。

以下是具体的使用说明和示例：

使用说明

1. 安装扩展：在 Chrome Web Store 中搜索并安装 Playwright CRX 扩展。
2. 录制脚本：点击扩展的动作按钮或使用快捷键 Alt + Shift + R 开始录制。
3. 运行脚本：使用 Alt + Shift + C 开始运行已录制的脚本。
4. 配置选项：在扩展的选项页面中，可以配置默认语言、测试 ID 属性名称以及是否在侧边面板中打开录制器。

示例代码

以下是使用 Playwright CRX 作为库来创建新的 Chrome 扩展的示例代码：

import { crx, expect } from 'playwright-crx/test';

chrome.action.onClicked.addListener(async ({ id: tabId }) => {
  const crxApp = await crx.start({ slowMo: 500 });

  try {
    const page = await crxApp.attach(tabId!).catch(() => crxApp.newPage());
    await page.goto('https://demo.playwright.dev/todomvc/#/');
    // ...其他操作
  } finally {
    await crxApp.detach(page);
    await crxApp.close();
  }
});

在 Playwright CRX 的帮助下，开发者可以更加高效地进行端到端的自动化测试，确保 Web 应用的稳定性和性能。如果你正在寻找一款强大的浏览器自动化测试工具，Playwright CRX 将是你不二的选择。