将样式注入测试页面

Question

我对 div 有疑问：

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

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

iframe 包含一个输入字段和一些样式，使锤头 div 完全覆盖 iframe 和输入（width/height 设置为 100%），所以我无法使用 typeText （期望正确的可见通行证）。

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

Answer 1

您可以使用 ClientFunction API 来操作客户端上的 DOM 元素。请看下面的例子：

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

将样式注入测试页面

Injecting style into a tested page

css

testing

automated-tests

inject

testcafe