Установка атрибута через ClientScript не сохраняется

Question

Мой прибор имеет ClientScript, который устанавливает атрибут для элемента (элемент происходит из скрипта, выполняющего document.querySelectorAll(...)):

element.setAttribute("data-foo", 'foo');

Позже в testcafe-land, когда я пытаюсь получить доступ к этому элементу используя Selector, это всегда null:

const element = await Selector('[data-foo="foo"]')();

Я вставил оператор debugger в свой введенный ClientScript и, когда я шагнул через функцию, я увидел, что элемент действительно добавляет атрибут но как только я позволю продолжить выполнение и попытаюсь снова найти его в консоли devtools, атрибут исчезнет из элемента.

Я думаю, это связано с DOM iframe / shadow? testcafe создает? Я вижу, что есть субфрейм / контекст выполнения в chrome devtools - мой ClientScript внедряется в window.top, но в миксе тоже есть созданный testcafe iframe.

ЛЮБЫЕ МЫСЛИ как Я могу заставить это работать? Я хочу, чтобы внедренный скрипт управлял DOM (добавляя атрибут), который позже я хочу выбрать testcafe Selector. Почему это не работает и как я могу заставить его работать ??? Спасибо!!! Mark

Answer 1

TestCafe внедряет пользовательские сценарии в тег head. Эти сценарии выполняются до загрузки DOM.

Вот пример того, как манипулировать DOM с помощью клиентского сценария:

import { Selector } from 'testcafe';

const scriptContent = `
window.addEventListener('DOMContentLoaded', function () {
    var p = document.querySelector('p');

    p.setAttribute("data-foo", 'foo');
});
`;

fixture `My fixture`
    .page('https://devexpress.github.io/testcafe/example/')
    .clientScripts({ content: scriptContent });

test('My test', async t => {
    const el = await Selector('[data-foo="foo"]');

    await t
        .expect(el.textContent).eql('This webpage is used as a sample in TestCafe tutorials.');
});