css - 将样式注入(inject)测试页面

Question

我对 div 有疑问:

<div id="root-hammerhead-shadow-ui" contenteditable="false" class="root-hammerhead-shadow-ui"></div>

由 testcafe 注入(inject)到我想测试的 iframe 中。

iframe 包含一个输入字段和一些样式，这些样式使 hammerhead div 覆盖 iframe 并完全输入(宽度/高度设置为 100%)，因此我无法将 typeText 与它一起使用(期望可见传递正确)。

我可以通过将锤头 div 的宽度/高度设置为默认值来解决调试过程中的问题，我能以某种方式在代码中做同样的事情吗？

Answer 1

您可以使用 ClientFunction用于在客户端操作 DOM 元素的 API。请看下面的例子:

import { Selector, ClientFunction } from 'testcafe';

fixture `New Fixture`
    .page `https://example.com`;

test('New Test', async t => {
    const changeHammerheadDiv = ClientFunction(() => {
        const hammerHeadDiv = document.getElementById('root-hammerhead-shadow-ui');

        hammerHeadDiv.style.width =  '0';
        hammerHeadDiv.style.height = '0';
    });

    await t.switchToIframe(Selector('iframe'));
    await changeHammerheadDiv();
    await t.typeText(Selector('body').find('input'), 'qwerty');
});