Playwright Testing

Playwright 支持在无头浏览器中进行端到端测试。本指南介绍如何使用 @udecode/plate-playwright 将 Playwright 与 Plate 集成。

设置

npm install @udecode/plate-playwright playwright

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

const editorHandle = await getEditorHandle(page);
// ...

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

Examples

获取节点句柄

使用 getNodeByPath 获取对特定路径的节点句柄。为了对节点的值进行断言，使用 .jsonValue() 将其转换为 JSON。

const nodeHandle = await getNodeByPath(page, editorHandle, [0]);
 
expect(await nodeHandle.jsonValue()).toBe({
  type: 'p',
  children: [{ text: 'My paragraph' }],
});

获取节点的类型

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

获取节点的 DOM 节点

在 Playwright 中，你通常需要引用特定的 DOM 元素来对其状态或涉及它的操作进行断言。

getDOMNodeByPath returns an ElementHandle for the DOM node corresponding to the Slate node at a given path.

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

点击节点

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

获取选区

const selection = await getSelection(page, editorHandle);
 
expect(selection).toBe({
  anchor: { path: [0, 0], offset: 0 },
  focus: { path: [0, 0], offset: 7 },
});

选择一个点或范围

为了在编辑器中输入特定点，你需要使用 setSelection 选择该点。

如果你选择一个点（由 path 和 offset 组成），光标将放置在该点。如果你选择一个范围（由 anchor 和 focus 组成），该范围将被选中。如果你选择一个路径，该路径下的整个节点将被选中。

确保在设置选区之前聚焦编辑器。使用 editable.focus() 聚焦编辑器可能无法在 WebKit 中正常工作，因此最好使用 clickAtPath。

// 点击第一个段落以聚焦编辑器
await clickAtPath(page, editorHandle, [0]);
 
await setSelection(page, editorHandle, {
  path: [0, 0],
  offset: 2,
});
 
await page.keyboard.type('Hello world!');

Imported queries and transforms

你可能希望将 getBlockAbove 或 insertNodes 等查询或转换导入到你的 Playwright 测试中并使用它。

很遗憾，这是不可能的。你只能在浏览器上下文中直接与 editor 实例交互（使用 evaluate 或 evaluateHandle），无法将从 Playwright 作用域导入的函数传递到浏览器中。这是因为 editor 对象和 JavaScript 函数都无法被充分序列化。

最好的解决方法是像用户一样与编辑器交互，不使用任何导入的查询或转换。这样可以让你的 Playwright 测试更容易发现应用程序中的 bug。

如果这种方法不实用，你可以在 evaluate 或 evaluateHandle 中调用 editor 对象上的方法。（如果你需要返回对 DOM 节点或浏览器中 JavaScript 对象的引用，请使用 evaluateHandle。如果你需要返回 JavaScript 对象的序列化副本，或者不需要返回任何值，请使用 evaluate。）

请注意，虽然这些查询和转换不能直接在 Playwright 测试中使用，但在应用程序代码中使用编辑器实例时是可用的。有关如何在应用程序中使用这些方法的更多信息，请参阅 编辑器方法 文档。

查看 Playwright 文档 了解更多关于 evaluate 和 evaluateHandle 的信息。

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

API

getEditorHandle

获取 Plate 编辑器实例的句柄。

getNodeByPath

获取指定路径的节点。

getDOMNodeByPath

获取给定路径的 Slate 节点对应的 DOM 节点。

clickAtPath

模拟点击指定路径的节点。

getSelection

获取当前编辑器选区。

setSelection

将编辑器选区设置为指定范围。

getTypeAtPath

获取指定路径节点的类型。