使用Playwright进行Plate富文本编辑器自动化测试指南

使用Playwright进行Plate富文本编辑器自动化测试指南

plate The rich-text editor for React. 项目地址: https://gitcode.com/gh_mirrors/pl/plate

前言

在现代Web开发中，富文本编辑器是许多应用的核心组件。Plate作为一款基于Slate.js构建的现代化富文本编辑器框架，提供了强大的扩展能力和灵活的定制选项。本文将详细介绍如何使用Playwright这一流行的端到端测试工具对Plate编辑器进行自动化测试。

Playwright与Plate测试基础

Playwright是一个支持多浏览器的自动化测试工具，它能够模拟用户在浏览器中的真实操作。对于Plate这样的富文本编辑器来说，Playwright测试可以验证编辑器在各种交互场景下的行为是否符合预期。

环境准备

首先需要安装必要的依赖包：

npm install @udecode/plate-playwright playwright

编辑器插件配置

为了让Playwright能够与Plate编辑器交互，需要在编辑器中添加PlaywrightPlugin插件：

const editor = createPlateEditor({
  plugins: [
    // 其他插件...
    PlaywrightPlugin.configure({ enabled: process.env.NODE_ENV !== 'production' }),
  ]
})

这个插件会在window对象上暴露platePlaywrightAdapter工具集，供测试代码调用。

编辑器句柄的概念与获取

在Playwright测试中，我们需要通过"句柄"(handle)来操作浏览器上下文中的对象。编辑器句柄(JSHandle<PlateEditor>)是对Plate编辑器实例的引用。

获取编辑器句柄的基本方法：

const editorHandle = await getEditorHandle(page);

对于页面中有多个编辑器的情况，可以指定具体的可编辑元素：

const editable = getEditable(page.getByTestId('my-editor-container'));
const editorHandle = await getEditorHandle(page, editable);

常用测试场景示例

节点操作测试

1. 获取特定路径的节点：

const nodeHandle = await getNodeByPath(page, editorHandle, [0]);

expect(await nodeHandle.jsonValue()).toEqual({
  type: 'p',
  children: [{ text: '我的段落' }],
});

2. 获取节点类型：

const firstNodeType = await getTypeAtPath(page, editorHandle, [0]);
expect(firstNodeType).toBe('h1');

DOM元素交互测试

1. 获取节点的DOM元素：

const firstNodeEl = await getDOMNodeByPath(page, elementHandle, [0]);
await firstNodeEl.hover();

2. 点击特定节点：

await clickAtPath(page, elementHandle, [0]);

选区操作测试

1. 获取当前选区：

const selection = await getSelection(page, editorHandle);

expect(selection).toEqual({
  anchor: { path: [0, 0], offset: 0 },
  focus: { path: [0, 0], offset: 7 },
});

2. 设置选区并输入内容：

// 点击第一段以聚焦编辑器
await clickAtPath(page, editorHandle, [0]);

// 设置光标位置
await setSelection(page, editorHandle, {
  path: [0, 0],
  offset: 2,
});

// 模拟键盘输入
await page.keyboard.type('你好世界!');

高级测试技巧

在浏览器上下文中执行代码

由于Playwright测试运行在Node.js环境中，而Plate编辑器运行在浏览器中，我们需要使用evaluate和evaluateHandle方法来在浏览器上下文中执行代码：

await editorHandle.evaluate((editor) => {
  editor.tf.insertNodes(/* ... */);
});

测试注意事项

1. 避免直接导入查询和转换函数：这些函数无法从测试环境传递到浏览器上下文，应该通过模拟用户操作来测试编辑器行为。

2. 跨浏览器兼容性：特别是WebKit浏览器中，聚焦编辑器可能需要特殊处理。

3. 性能考虑：复杂的编辑器测试可能会比较耗时，考虑使用Playwright的并行测试功能。

API参考

核心API方法

1. getEditorHandle - 获取编辑器实例的句柄
2. getNodeByPath - 获取指定路径的节点
3. getDOMNodeByPath - 获取节点的DOM元素
4. clickAtPath - 点击指定路径的节点
5. getSelection - 获取当前选区
6. setSelection - 设置选区
7. getTypeAtPath - 获取节点类型

每个API都提供了详细的参数说明和返回值类型定义，确保测试代码的类型安全。

结语

通过Playwright测试Plate编辑器，开发者可以构建可靠的自动化测试套件，确保编辑器在各种交互场景下的稳定性和正确性。本文介绍的方法和技巧可以帮助你快速上手Plate编辑器的自动化测试，提高开发效率和产品质量。

在实际项目中，建议结合具体的业务场景设计测试用例，覆盖常见的用户操作路径，同时定期运行测试以保证回归测试的有效性。

plate The rich-text editor for React. 项目地址: https://gitcode.com/gh_mirrors/pl/plate