点击Cypress测试中的隐藏元素

Question

使用：

通过网站 imgur.com 上传图像后，将显示上传的图像。我想与位于 https://imgur.com/a/imageid 的上传图像相关的元素/按钮“复制链接”和“...”进行交互。问题是加载图像后，这些元素默认不可见，要查看它们，您需要将鼠标悬停在图像本身上。我试图通过 .trigger('moseover') 来执行此操作，但在这种情况下，指向本身与真实鼠标的行为并不对应，因此，不会出现必要的按钮。我该怎么办？

我做了什么：

    it('File upload via Drag n Drop', () => {
    cy.visit('https://imgur.com/')
    cy.get('.newPostLabel').click()
    cy.url().should('contain', '/upload')
    cy.get('.PopUpDrop-DropArea').attachFile('happy-dog.jpg', {subjectType: 'drag-n-drop'})
    cy.get('.Toast')
    .should('be.visible')
    .and('contain', 'Upload Complete!')

    cy.get('.PostContentMenu')
    .find('.copyLink Button')
    .click()

    // Alternative variant:
    // cy.get('.PostContent.UploadPost-file')
    // .click()
    // .trigger('mouseover')
    // cy.get('.copyLink Button')
    // .click()

    // cy.get('.PostContentMenu').click()
})

预期行为：

当您将鼠标悬停在上传图像的预览上时，“复制链接”和“...”按钮应出现在预览的右上角，我可以与它们进行交互。

Answer 1

Cypress 在 https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/testing-dom__hover-hidden-elements 建议使不可见元素可见，但是这是为了开始吧，并没有真正测试这个功能。 Cypress 功能改进的好主意。