如何在testCafe中模拟文本选择

Question

我有一个Ionic/Angular应用程序可以对文本选择做出反应(例如,对于eBook中的注释).用户可以在浏览器中突出显示文本,然后弹出一个菜单(稍微超越/扩充浏览器上下文菜单)以允许操作.我想用testcafe测试该功能.(呈现文本的组件会对浏览器中的"selectionchange"事件做出反应.)

除了选择文本命令(https://devexpress.github.io/testcafe/documentation/test-api/actions/select-text.html)之外,似乎无法模拟文本选择,但这仅限于输入,textareas或contenteditables.我的文字不是那些 - 它是直的

元素.

关于如何实现这一点的任何建议？

Answer 1

你是对的,SelectText命令仅限于输入,textareas和contenteditable元素.如果使用Selection API实现具有自定义选择逻辑的ClientFunction,则可以使用ClientFunctions机制解决问题.我准备了一个例子.如果需要选择文本内容的单独部分,请根据需要进行修改.

import { Selector, ClientFunction } from 'testcafe';

fixture `selection`
    .page `http://example.com`;

const selectElement = (selector) => ClientFunction(() => {
    const selection = document.getSelection();
    const range = document.createRange();

    range.selectNode(selector());
    selection.addRange(range);
}, { dependencies: { selector } });

test('selection', async t => {
    await selectElement(Selector('h1'))();

    await t.debug();
});