Cypress should allow fullscreen for AUT

Current behavior:

I have a custom video player that I need to test the various elements of the player controls. Because the containing iframe for the site/app in the test runner does not have the allowfullscreen='true' attr. fullscreen features are semi or totally disabled. This is true for all browsers. I’m showing below with Youtube just to show it’s not an isolated issue in my environment.

Desired behavior:

From what I can tell, simply adding the allowfullscreen='true' to the containing iframe (has class aut-iframe) will allow players (and other sites/apps that need to utilize fullscreen) to use and test features that utilize the fullscreen API.

Test code to reproduce

The tests below show the problem/solution in the firefox browser ran locally in the test runner (workaround doesn’t work in ci environment for me). The behavior is similar in other browsers, but it was harder to hack fix in a concise way inside a test for demonstration purposes. In Chrome, for example, fullscreenEnabled is set to true, making the fullscreen button clickable, but the fullscreen action is still denied. I can mimic the same solution in chrome by manually adding the allowfullscreen attr. and then reloading the iframe via js in the console.

The first test fails because the fullscreenEnabled property is false. The second test will pass because I am programmatically adding the allowfullscreen attr., reloading the iframe, then running the tests.

describe('FAILS: firefox fullscreen is disabled', () => {
  it('should be able to use fullscreen', () => {
    cy.visit('https://www.youtube.com/embed/YE7VzlLtp-4');
    cy.document().its('fullscreenEnabled').should('be.true');
    // play video
    cy.get('.ytp-large-play-button').click();
    // click fullscreen button
    cy.get('.ytp-fullscreen-button').click();
    // check if the video actually went fullscreen
    cy.document().its('fullscreenElement').should('not.equal', null);
    // just to be nice, exit fullscreen and pause video
    cy.get('.ytp-fullscreen-button').click();
    cy.get('.ytp-play-button').click();
  });
});

describe('SUCCEEDS: firefox fullscreen is enabled via custom js', () => {
  it('should be able to use fullscreen', () => {
    cy.visit('https://www.youtube.com/embed/YE7VzlLtp-4');
    cy.window().then(window => {
      // get site iframe for site, set the allowfullscreen to true
      window.parent.document
        .getElementsByClassName('aut-iframe')[0]
        .setAttribute('allowFullScreen', 'true');
      // reload iframe
      window.location.reload();
      // make sure fullscreen is now enabled
      cy.document().its('fullscreenEnabled').should('be.true');
      // play video
      cy.get('.ytp-large-play-button').click();
      // click fullscreen button
      cy.get('.ytp-fullscreen-button').click();
      // check if the video actually went fullscreen
      cy.document().its('fullscreenElement').should('not.equal', null);
      // just to be nice, exit fullscreen and pause video
      cy.get('.ytp-fullscreen-button').click();
      cy.get('.ytp-play-button').click();
    });
  });
});

Versions

Cypress 4.8.0, Firefox 76/77 Beta. Happens in both Mac OS 10.15.5 and Cypress Docker Image via Bitbucket Pipelines: cypress/browsers:node12.18.0-chrome83-ff77

[chaitanyajoy]

In my case, I need to click a button to make my document display in full-screen mode. In Cypress, I end up in Unhandled Rejection (TypeError): fullscreen error

[danshando]

Here’s the test passing locally for me, when it flashes black is the video going fullscreen. I’m skipping the failing test here. This is Cypress 4.10, Firefox 77, macOS 10.15.5 : It only works in Firefox, I can get it to work via console in Chrome, but I think Chrome is allowing the interaction probably because its from the console.

Regardless I think adding the fullscreen capability would be a great feature for cypress, not only for video player testing but for any other web app that utilizes fullscreen.