如何在cypress中测试具有相同内容的多个浮动消息？

Question

我对 cypress 相当陌生，并在 Facebook 应用程序上练习其功能。我在测试以下场景时遇到问题：

1. 单击“名字”时，此浮动对话框应该可见。 2.验证对话框中的文本为“你叫什么名字？”。 3.当点击姓氏时，再次出现一个带有相同内容的浮动框“你叫什么名字？”应该是可见的。

现在我可以用这个来测试前两个场景。

cy.get('[name="firstname"]').click();//i)-> Click on the firstname
        cy.get('[name="lastname"]').click();//ii)-> Click on the last name    
        cy.get('[name="firstname"]').click(); //iii)-> This will triggers the error message popup for firstname 
        cy.contains('What\'s your name?').should('be.visible').and('contain','What\'s your name?');// Checking the message popup should be displayed and its message is 'What's your name'
        cy.get('[name="lastname"]').click();//v)-> This will trigger the error message popup for lastname
    
        cy.contains('What\'s your name?').should('be.visible').and('contain','What\'s your name?');//vi)-> Checking for that message but not working

但在第三种情况下，它显示错误。我尝试使用 id 访问该元素，但显示未找到。

Answer 1

我认为 cy.contains('What\'s your name?') 正在捕获来自firstName字段的消息，该字段是从最初的两个命令激活的，但当您导航到lastName字段时隐藏（但仍然保留在页面中）。

指定您想要的一个。

cy.get('div:contains(What\'s your name?)').eq(1).should('be.visible')  // .and(contain) not needed

如果文本中的引号扭曲了您的选择，您可能需要使用 cy.get('div:contains(your name?)').eq(1)。

不要使用 cy.contains('What\'s your name?') 它只会返回找到的第一个。

Facebook 页面对测试人员不太友好，通常您可以请求页面元素添加一些测试 ID，以便您可以直接转到那里。

解决匿名弹出窗口内容的另一种方法是获取添加到页面的最后一个内容，例如

cy.get('body')
  .children()
  .last()
  .should('contain', 'What\'s your name?')
  .should('be.visible')