javascript - 无法在 testcafe 中切换全屏

Question

我在 iframe 中有一个 react 页面，带有一个可以进入全屏模式的按钮。我已经用 firefox 和 chrome 手动测试了它，它们都可以工作。但是，用 testcafe 单击不会进入全屏模式并且无法通过测试。

我假设 iframe 不是问题，因为它是手动工作的，但我想提一下以防万一。

这是应用程序的一部分:

fs.fullScreen = function () {
    const el = (fsEl && fsEl.current) || document.documentElement

    if (el.requestFullscreen) return el.requestFullscreen()
    if (el.mozRequestFullScreen) return el.mozRequestFullScreen()
    if (el.webkitRequestFullscreen) return el.webkitRequestFullscreen()
    if (el.msRequestFullscreen) return el.msRequestFullscreen()
  }

<button onClick={fs.fullScreen}>Fullscreen</button>

这是失败的测试:

beforeEach((t) => t.switchToIframe(storybook.iframe))
afterEach((t) => t.switchToMainWindow())

test('The Fullscreen button enters fullscreen mode', async (t) => {
  const { description, fullscreenButton } = storybook.hooks.fullscreen
  await t
    .expect(description.textContent)
    .contains('Browser not in fullscreen mode')
    .click(fullscreenButton)
    .expect(description.textContent)
    .contains('Browser in fullscreen mode')
})

在 Firefox 中，我看到了控制台错误:Request for fullscreen was denied because Element.requestFullscreen() was not called from inside a short running user-generated event handler.

在 Chrome 中，我看到了控制台错误:Uncaught TypeError: fullscreen error。

firefox 错误相当明显，但我不知道如何使用 testcafe 解决它。有 a way通过在运行测试之前编辑 firefox 配置文件，但这不适用于 chrome 或其他浏览器。 Chrome 问题可能是出于同样的原因吗？

这似乎是自动化框架已经解决的一个常见问题，所以我可能遗漏了一些明显的东西？

Answer 1

我能够在简单示例中重现该问题:测试页:

<button id="btn">click me</button>

<script>
    var button = document.getElementById('btn');

    button.addEventListener('click', function () {
        button.requestFullscreen();
    });
</script>

测试代码

test(`test`, async t => {
    await t.click('#btn');
});

我不确定是否支持此功能，因为我们需要对其进行详细研究。

作为解决方法，您可以在目标元素上模拟 requestFullscreen 方法。它会抑制错误，但不会使您的页面进入全屏布局。检查以下代码作为引用:

const mockFullcreen = ClientFunction(element => element.requestFullscreen = () => {});

await mockFullcreen(target);

await t.click(target);