无法在 testcafe 中切换全屏答案

【问题标题】：Cannot toggle fullscreen in testcafe无法在 testcafe 中切换全屏
【发布时间】：2019-03-01 00:41:07
【问题描述】：

我在 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 或其他浏览器。铬问题可能是出于同样的原因吗？

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

【问题讨论】：

标签： javascript testing automated-tests e2e-testing testcafe

【解决方案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);

【讨论】：