Cypress should allow fullscreen for AUT

[danshando]

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

[jennifer-shehane]

I'm not able to reproduce this behavior as described. I'm running on a MacOS 10.15.5 with the default cypress.json - no changed viewportHeight or viewportWidth. Tried Firefox 72, 75, 76, 78, 79.

Can you provide a screenshot / failing test of the behavior you're seeing?

Chrome

Firefox

[danshando]

@jennifer-shehane I've updated the OP. While I was poking around I discovered additional information and have updated title and description accordingly.

[jennifer-shehane]

I'm not seeing this second test pass for me with the example provided in Chrome or Firefox. I believe the attribute should be all lowercase, although changing that doesn't make the test pass either.

I get what you're explaining now though and this would be a feature request.

The MDN docs describe allowfullscreen as legacy https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

This attribute is considered a legacy attribute and redefined as allow="fullscreen".

I'd like to see the passing test you've described. Am I missing something from the example?

[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.

[chaitanyavaddi]

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

[serovpa]

i've faced the same issue after cypress clicks the 'fullscreen mode' button, besides fullscreen mode is turned on
cypress version 10.6.0

[sikaili99]

I ended up using Cypress real events but again I faced one challenge, I couldn't get out of full screen.