Невозможно переключить полноэкранный режим в testcafe

У меня есть страница реакции в 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 перед запуском теста, но этого не произойдет. работать для Chrome или других браузеров. Может быть, проблема с хромом возникла по той же причине?

Похоже, что это обычная проблема, которую решают платформы автоматизации, поэтому я могу упустить что-то очевидное?


person thomas    schedule 01.03.2019    source источник


Ответы (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);
person Alex Kamaev    schedule 01.03.2019