Support for testing Picture-in-picture

[staltz]

Current behavior:

• Implement a feature in the project where requestPictureInPicture is called
  • E.g. this sample https://googlechrome.github.io/samples/picture-in-picture/
• Write a Cypress test to run cy.get('.the-toggle-button').click()
• In the test, include cy.document().its('pictureInPictureElement').should('not.equal', null)
• Run the Cypress test
• The should assertion fails and the following error shows in the console:

DOMException: Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': Must be 
handling a user gesture if there isn't already an element in Picture-in-Picture.

Desired behavior:

• cy.document().its('pictureInPictureElement').should('not.equal', null) passes
• No error is shown in the console

Test code to reproduce

I may edit this issue soon to give full reproduction assets, but for now, I know it's as simple as:

• Visit https://googlechrome.github.io/samples/picture-in-picture/ or an equivalent webapp
• Run cy.get('.the-toggle-button').click()
• Run cy.document().its('pictureInPictureElement').should('not.equal', null)

Versions

Cypress: 4.4.0
(Cypress) browser: Chrome 85
Operating system: Ubuntu 18.04.5 x86_64
Node: 10.15.3

[bahmutov]

Hi Andre! We will have to look at this, might be some special permission flag in browser flags or maybe automation via CDP

…

Sent from my iPhone

On Sep 18, 2020, at 08:20, André Staltz ***@***.***> wrote:  Current behavior: Implement a feature in the project where requestPictureInPicture is called E.g. this sample https://googlechrome.github.io/samples/picture-in-picture/ Write a Cypress test to run cy.get('.the-toggle-button').click() In the test, include cy.document().its('pictureInPictureElement').should('not.equal', null) Run the Cypress test The should assertion fails and the following error shows in the console: DOMException: Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': Must be handling a user gesture if there isn't already an element in Picture-in-Picture. Desired behavior: cy.document().its('pictureInPictureElement').should('not.equal', null) passes No error is shown in the console Test code to reproduce I may edit this issue soon to give full reproduction assets, but for now, I know it's as simple as: Visit https://googlechrome.github.io/samples/picture-in-picture/ or an equivalent webapp Run cy.get('.the-toggle-button').click() Run cy.document().its('pictureInPictureElement').should('not.equal', null) Versions Cypress: 4.4.0 (Cypress) browser: Chrome 85 Operating system: Ubuntu 18.04.5 x86_64 Node: 10.15.3 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[bahmutov]

Also have you tried v5.2.0 of Cypress to see if it works or not?

…

Sent from my iPhone

On Sep 18, 2020, at 08:20, André Staltz ***@***.***> wrote:  Current behavior: Implement a feature in the project where requestPictureInPicture is called E.g. this sample https://googlechrome.github.io/samples/picture-in-picture/ Write a Cypress test to run cy.get('.the-toggle-button').click() In the test, include cy.document().its('pictureInPictureElement').should('not.equal', null) Run the Cypress test The should assertion fails and the following error shows in the console: DOMException: Failed to execute 'requestPictureInPicture' on 'HTMLVideoElement': Must be handling a user gesture if there isn't already an element in Picture-in-Picture. Desired behavior: cy.document().its('pictureInPictureElement').should('not.equal', null) passes No error is shown in the console Test code to reproduce I may edit this issue soon to give full reproduction assets, but for now, I know it's as simple as: Visit https://googlechrome.github.io/samples/picture-in-picture/ or an equivalent webapp Run cy.get('.the-toggle-button').click() Run cy.document().its('pictureInPictureElement').should('not.equal', null) Versions Cypress: 4.4.0 (Cypress) browser: Chrome 85 Operating system: Ubuntu 18.04.5 x86_64 Node: 10.15.3 — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[staltz]

Hey Gleb, thanks for the quick answer! I haven't tried the newest version. I could try

[staltz]

@bahmutov I ran the tests today in Cypress 5.2.0 and can confirm the bug (with the same symptoms) happens in 5.2.0 too.

Simple example test:

// ...
  it('picture-in-picture shows when the toggle button is pressed', () => {
    cy.document().its('pictureInPictureElement').should('equal', null)
    cy.get('.the-toggle-button').click()
    // The following assertion fails, but we want it to pass
    cy.document().its('pictureInPictureElement').should('not.equal', null)
  })
// ...

[sainthkh]

Confirmed that it doesn't work.

it('t', () => {
  cy.visit('https://googlechrome.github.io/samples/picture-in-picture/')
  cy.document().its('pictureInPictureElement').should('equal', null)
  cy.get('#togglePipButton').click()
  // The following assertion fails, but we want it to pass
  cy.document().its('pictureInPictureElement').should('not.equal', null)
})

The problem is that the pictureInPicture element is created under the test runner, not AUT like below:

But I guess there might be no way to create it under the test runner.

[jennifer-shehane]

I would classify this as a feature request for Cypress to support testing Picture-in-picture in general. Right now, as sainthkh described, this is not working inside of Cypress. https://w3c.github.io/picture-in-picture/

[nehamittal3012]

waiting for this feature

[caiocampos-hotmart]

Hey guys, I had the same issue recently and was able to solve it temporarily using cypress-real-event. I'm not sure if it's the best way to do it, but for now it works.

it('Should show the picture in picture when the toggle button is pressed', () => {
  cy.document().its('pictureInPictureElement').should('equal', null);
  
  cy.getBySel('picture-in-picture-control').realClick();

  cy.document().its('pictureInPictureElement').should('not.equal', null);
});