angular – 如何在testCafe中模拟文本选择

发布时间：2020-12-17 07:07:12 所属栏目：安全来源：网络整理

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

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

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

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

解决方法

你是对的,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();
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!