时间戳

首页 > 解决方案 > 如何在 testCafe 中模拟文本选择

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

问题描述

我有一个对文本选择做出反应的 Ionic/Angular 应用程序（例如，用于电子书中的注释）。用户可以在浏览器中突出显示文本，然后弹出一个菜单（有点覆盖/扩充浏览器上下文菜单）以允许操作。我想用 testcafe 测试该功能。（呈现文本的组件对来自浏览器的“selectionchange”事件做出反应。）

除了选择文本命令（ https://devexpress.github.io/testcafe/documentation/test-api/actions/select-text.html ）之外，似乎没有其他方法可以模拟文本选择，但这仅限于输入、文本区域或内容可编辑项。我的文字不是这些 - 它是直的

元素。

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

标签： angularionic-frameworkautomated-testse2e-testingtestcafe

解决方案

你是对的，SelectText 命令仅限于输入、文本区域和 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();
});

推荐阅读