Failed to enter full screen of video player

[lawked]

• Operating System: mac OS High Sierra 10.13.2 (17C88)
• Cypress Version: 1.4.1
• Browser Version: Google Chrome 63.0.3239.132 (Official Build) (64-bit)

Is this a Feature or Bug?

bug

Current behavior:

Given a html video player When I press the full screen button Then the video player DOES NOT GO to full screen ...and then I can see the message in the console: Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

Desired behavior:

Given a html video player When I press the full screen button Then the video player SHOULD GO to full screen

How to reproduce:

1. open https://plyr.io/ or any other html video player 2. press full screen button

Test code:

describe('having video player in in-site mode', () => {
  it('should go to full screen after pressing full screen button', () => {
    cy.visit('https://plyr.io/');
    cy.get('[data-plyr="fullscreen"]').click();
  });
});

Additional Info (images, stack traces, etc)

I know the user gesture problem is really common, and this is the default browser behaviour, but it would be great to make it working correctly in Cypress as it should simulate user journey on tested page/application.

[dweight]

+1

[jennifer-shehane]

This is something that definitely requires our support of native browser events, as this cannot be done programatically: https://github.com/cypress-io/cypress/issues/311

[mightyiam]

Doesn't chromium have a CLI switch to bypass "API can only be initiated by a user gesture"?

[mightyiam]

I'm not fluent in C++. I've looked into Chromium code and I didn't find a way to bypass this check.

[JulienKode]

Does anyone have fix this issue ? or do you need help to investigate on this

[eirikb-bbc]

For now I am testing this by stubbing requestFullscreen and exitFullscreen, and asserting they are called when I expect them to be.

[missak-boyajian]

For now I am testing this by stubbing requestFullscreen and exitFullscreen, and asserting they are called when I expect them to be.

Can you show us how :)

[eirikb-bbc]

For now I am testing this by stubbing requestFullscreen and exitFullscreen, and asserting they are called when I expect them to be.

Can you show us how :)

This approach assumes you use getElementById to get the element you are calling requestFullscreen on, but it's a good starting point:

const stubFullscreenHandlers = (someDocument) => {
  cy.stub(someDocument, "fullscreenEnabled")
    .get(() => true)
    .as("doc:fullscreenEnabled");

  cy.stub(someDocument, "exitFullscreen").resolves().as("doc:exitFullscreen");

  const stubbedRequestFullscreen = cy.stub().resolves().as("requestFullscreen");

  const actualGetElementById = someDocument.getElementById;
  cy.stub(someDocument, "getElementById")
    .callsFake((elementId) => {
      const el = actualGetElementById.call(someDocument, elementId);
      el.requestFullscreen = stubbedRequestFullscreen;
      return el;
    })
    .as("doc:getElementById");
};

cy.document().then(stubFullscreenHandlers);

cy.visit(...)
// code making fullscreen request

[rmjjo]

any update on this. I am stuck with my player testing in fullscreen. Thank you!

[arifozkan]

any update for testing full screen button

[arora239]

Hi all, I just came across this discussion, and I found one temporary solution till cypress comes up with something https://github.com/dmtrKovalenko/cypress-real-events

Using .realHover() and .realClick() on the element, you can still go in full screen, Works for me!

[poponuts]

Upvote on this!

[rehmanuet]

+1 for this feature. Currently, I used the real-event workaround but native implementation would be much better.

[nehamittal3012]

Waiting for this feature. Facing the same issue : Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

[DenseMo23]

+1

[andreifilip123]

Testing full screen is a need for us too

[przedab]

+1

[Marim99]

Hi all, I just came across this discussion, and I found one temporary solution till cypress comes up with something https://github.com/dmtrKovalenko/cypress-real-events

Using .realHover() and .realClick() on the element, you can still go in full screen, Works for me!

thanks a lot ! works for me

[jennifer-shehane]

I ran across the docs recently on features gated by user activation and was reminded of this issue: https://developer.mozilla.org/en-US/docs/Web/Security/User_activation

We should be triggering a user activation event in order to more fully simulate browser behavior.

For the time being, using the https://github.com/dmtrKovalenko/cypress-real-events plugin to perform any action on the page (like clicking on a random div) should trigger user activation and make this full screen of the video player available.