Как смоделировать выделение текста в testCafe

Question

У меня есть приложение Ionic / Angular, которое реагирует на выделение текста (например, для аннотации в электронных книгах).Пользователь может выделить текст в браузере, а затем всплывает меню (несколько переопределяя / расширяя контекстное меню браузера), чтобы разрешить действия.Я хотел бы проверить эту функцию с testcafe.(Компонент, отображающий текст, реагирует на события «selectionchange» из браузера.)

Похоже, что нет способа имитировать выделение текста, кроме команды «Выбрать текст» (https://devexpress.github.io/testcafe/documentation/test-api/actions/select-text.html),, но этоограничен входными данными, текстовыми областями или содержимым. Мой текст не является ни одним из них - это просто

элементов.

Любые предложения о том, как это может быть достигнуто?

Answer 1

Вы правы, команда SelectText ограничена входами, текстовыми областями и contenteditable элементами.Вы можете решить эту проблему с помощью механизма ClientFunctions , если реализуете свою собственную функцию ClientFunction с пользовательской логикой выбора, используя Selection API .Я подготовил пример.Если вам нужно выделить отдельные части текстового содержимого, измените его при необходимости.

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();
});