无法在testcafe中切换全屏

Question

我在iframe中有一个带有可以进入全屏模式的按钮的反应页面。我用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来解决它。通过在运行测试之前编辑firefox配置文件有a way，但这对于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');
});

我不确定是否支持此功能，因为我们需要详细研究它。我认为至少，错误不应该引发，所以我在TestCafe存储库中创建了一个单独的票证。请参考以下链接https://github.com/DevExpress/testcafe/issues/3514来跟踪进度