将鼠标悬停在视频上不会播放视频单击视频会打开一个新标签

问题描述

当前行为 悬停在视频图块上不会按预期播放视频 点击视频会打开一个新标签（预计在同一屏幕上打开视频播放器）

期望的行为 将鼠标悬停在视频上应播放视频 点击视频应打开视频播放器，视频应播放

测试代码以重现 将鼠标悬停在视频上应播放视频

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')
     
    })
  })

点击视频会打开一个新标签（预计在同一屏幕上打开视频播放器）

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')
     
    })
  })

在

中更新了可重现的示例

https://github.com/cypress-io/cypress-test-tiny/tree/opens-new-tab

解决方法

通过添加显式等待修复了悬停问题：

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