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解决它。 a way可以通过在运行测试之前编辑firefox配置文件来完成，但不适用于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存储库中创建了一个单独的票证。请参考以下链接here跟踪进度

无法在testcafe中切换全屏

1 个答案: