Hovering on the video doesn't play the video. Clicking on the video opens a new tab

[sinthujan24]

Current behavior

1. Hovering on a video tile doesn't play the video as expected
2. Clicking on the video opens a new tab (Expected to open the video player on the same screen)

Desired behavior

1. Hovering on a video should play the video
2. Clicking on the video should open up the video player and video should play

Test code to reproduce

1. Hovering on a video should play the video

const urls = [`https://cat-press.com/cat-movies/firework`]
  urls.forEach((url) => {
    it(`Should load the videos and autoplay one: ${url}`, () => {
      cy.visit(url)
      // Scroll to feed
      cy.get('.cy-grid').scrollIntoView()
      // Should hover over to the video at index 1
      cy.get(`.cy-thumbnail-link`).eq(1).trigger('mouseover')
     
    })
  })

2. Clicking on the video opens a new tab (Expected to open the video player on the same screen)

const urls = [`https://cat-press.com/cat-movies/firework`]
  urls.forEach((url) => {
    it(`Should load the videos and autoplay one: ${url}`, () => {
      cy.visit(url)
      // Scroll to feed
      cy.get('.cy-grid').scrollIntoView()
      // Should hover over to the video at index 1
      cy.get(`.cy-thumbnail-link`).eq(1).trigger('click')
     
    })
  })

Versions

Mac: Catalina 10.15.7
Chrome: Version 87.0.4280.141 (Official Build) (x86_64)
Cypress: Version 6.1.0 (6.1.0.531243)

[bahmutov]

1. Cypress does not have a native hover yet Support for Native Browser Events #311, try using https://github.com/dmtrKovalenko/cypress-real-events
2. figure out why and how the app determines how to open the window. Some points in https://glebbahmutov.com/blog/cypress-tips-and-tricks/#deal-with-target_blank and https://glebbahmutov.com/blog/cypress-tips-and-tricks/#deal-with-windowopen but it could also be due to the iframe app, try using experimentalSourceRewriting: true https://on.cypress.io/experimental

[sinthujan24]

@bahmutov 2. Manually it doesn't open a second tab. It remains on the same page.

[bahmutov]

Try the experimental source rewriting. It probably has to do with the app being inside the iframe

…

Sent from my iPhone

On Jan 27, 2021, at 13:43, sinthujan24 ***@***.***> wrote:  @bahmutov 2. Manually it doesn't open a second tab. It remains on the same page. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[sinthujan24]

Try the experimental source rewriting. It probably has to do with the app being inside the iframe
…
Sent from my iPhone
On Jan 27, 2021, at 13:43, sinthujan24 @.***> wrote:  @bahmutov 2. Manually it doesn't open a second tab. It remains on the same page. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

@bahmutov I tried it. it still opens a new tab.

[sinthujan24]

I kindly ask you to reopen this issue:

1. it's not a request to support multi tabs. Rather, cypress behaves differently than manual user interactions. Here, the tab is opened unexpectedly

[bahmutov]

So I created reproduction in https://github.com/cypress-io/cypress-test-tiny/tree/opens-new-tab

In the normal browser I see a click event handler attached to those video cards

In Cypress the same element does not have an event handler.

The site has bunch of errors while loading. If you can eliminate everything from the page to find out how the event listener is attached in the browser and why it is not attached inside Cypress, I would be happy to reopen the issue. But without this investigation by someone who understands the implementation of those video cards, I don't think it is productive to investigate.

[sinthujan24]

@bahmutov I'm seeing element has an event handler and it's click. Image attached

[bahmutov]

Very weird

…

Sent from my iPhone

On Jan 27, 2021, at 15:37, sinthujan24 ***@***.***> wrote:  @bahmutov I'm seeing element has an event handler and it's click. Image attached — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[sinthujan24]

Very weird
…
Sent from my iPhone
On Jan 27, 2021, at 15:37, sinthujan24 @.***> wrote:  @bahmutov I'm seeing element has an event handler and it's click. Image attached — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

Yes. And Unfortunately, hover and clicking on the video tile to open the player are the most critical part of our testing. That's why I've been struggling for a solution for last couple of days. Please reopen this issue if the above evidences earns an investigation on cypress side at the least

[bahmutov]

Can you extract the minimal reproducible example from this site?

…

Sent from my iPhone

On Jan 27, 2021, at 15:51, sinthujan24 ***@***.***> wrote:  Very weird … Sent from my iPhone On Jan 27, 2021, at 15:37, sinthujan24 @.***> wrote:  @bahmutov I'm seeing element has an event handler and it's click. Image attached — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe. Yes. And Unfortunately, hover and clicking on the video tile to open the player are the most critical part of our testing. That's why I've been struggling for a solution for last couple of days. Please reopen this issue if the above evidences earns an investigation on cypress side at the least — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[sinthujan24]

@bahmutov The code snippets mentioned in #14757 (comment) are the minimal reproducible steps.

Did you want me to commit this to https://github.com/cypress-io/cypress-test-tiny/tree/opens-new-tab

[bahmutov]

The problem with the example is that it is a complicated site with console errors that might or might not matter. If you had a small page with those video cards and they did not work correctly I would appreciate it. On the current media url it is hard to determine the problem

…

Sent from my iPhone

On Jan 27, 2021, at 15:57, sinthujan24 ***@***.***> wrote:  @bahmutov The code snippets mentioned in #14757 (comment) are the minimal reproducible steps. Did you want me to commit this to https://github.com/cypress-io/cypress-test-tiny/tree/opens-new-tab — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[sinthujan24]

@bahmutov Please use the below example
Click Issue

const urls = [`https://fireworktv.com/embed/demo`]
  urls.forEach((url) => {
    it(`Should load the videos and autoplay one: ${url}`, () => {
      cy.visit(url)
      cy.get(`.cy-thumbnail-link`).eq(1).trigger('click')
    })
  })

Hover issue:

const urls = [`https://fireworktv.com/embed/demo`]
  urls.forEach((url) => {
    it(`Should load the videos and autoplay one: ${url}`, () => {
      cy.visit(url)
      cy.get(`.cy-thumbnail-link`).eq(1).trigger('mouseover')
    })
  })

[bahmutov]

I have updated the reproducible example in https://github.com/cypress-io/cypress-test-tiny/tree/opens-new-tab

There is a click on the video player that is handled by Preact which I cannot figure out where it is going, since this is minified production code. Everyone is welcome to trace it and figure out why the behavior during testing is different.

[sinthujan24]

Current behavior

1. Hovering on a video tile doesn't play the video as expected
2. Clicking on the video opens a new tab (Expected to open the video player on the same screen)

Desired behavior

1. Hovering on a video should play the video
2. Clicking on the video should open up the video player and video should play

Test code to reproduce

1. Hovering on a video should play the video

const urls = [`https://cat-press.com/cat-movies/firework`]
  urls.forEach((url) => {
    it(`Should load the videos and autoplay one: ${url}`, () => {
      cy.visit(url)
      // Scroll to feed
      cy.get('.cy-grid').scrollIntoView()
      // Should hover over to the video at index 1
      cy.get(`.cy-thumbnail-link`).eq(1).trigger('mouseover')
     
    })
  })

1. Clicking on the video opens a new tab (Expected to open the video player on the same screen)

const urls = [`https://cat-press.com/cat-movies/firework`]
  urls.forEach((url) => {
    it(`Should load the videos and autoplay one: ${url}`, () => {
      cy.visit(url)
      // Scroll to feed
      cy.get('.cy-grid').scrollIntoView()
      // Should hover over to the video at index 1
      cy.get(`.cy-thumbnail-link`).eq(1).trigger('click')
     
    })
  })

Versions

Mac: Catalina 10.15.7
Chrome: Version 87.0.4280.141 (Official Build) (x86_64)
Cypress: Version 6.1.0 (6.1.0.531243)

1. The first issue is fixed by specifiying an explicit timeout after hover operation.

// Click on first thumbnail
      cy.get(`.cy-thumbnail-link`)
        .eq(1)
        .trigger("mouseover")
        //.trigger("mouseenter")
      cy.wait(3000)

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.