Cypress 选择匹配多选列表框中的值

Question

当我运行这个时：

cy.get('select#account').select('phChecking')
  .should('have.value', 'phChecking')

我正在尝试验证该选项是否存在并在多选列表框中选择它。

目前，此操作失败，因为返回的是数组格式。

错误：断言错误：4000 毫秒后超时重试： 预期 '' 具有值 'phChecking'，但该值为 [ '0: 'phChecking'' ]

一些尝试来匹配：

cy.get('select#account').select('phChecking')
  .should('have.value', [ '0: \'phChecking\'' ])

结果：

4000 毫秒后重试超时：预期 '' 的值为 [ '0: 'phChecking'' ]，但该值为 [ '0: 'phChecking'' ]

是的，它们对我来说确实看起来一样。不管怎样，我正在尝试选择该项目并断言它同时存在。

Answer 1

检查文本而不是值是测试多选的一种方法。

但是您获得的值

['0': 'phChecking']

是一个数组，因为它是一个多选，并且您可以选择多个值。

如果您选择了两个项目，您会看到类似的内容

[ '0': 'phChecking', '1': 'phSavings' ]

当查询结果是数组时，不能使用简单的

eq

来比较它们，因为它们是不同的数组。

eq

仅比较引用（数组对象），而不比较数组的内容。

使用

deep.eq

代替：

cy.get('select#account')
  .select('phChecking')

cy.get('select#account')
  .invoke('val')
  .should('deep.eq', ['0': 'phChecking'])

Answer 2

看看这个问题如何获取选择下拉列表中所选选项的文本。

确切的方法通常取决于框架，但由于该问题也与 Angular 有关，因此值得一试。

cy.get('select#account')
  .select('phChecking')

cy.get('select#account')
  .find('options')
  .find(':selected')
  .should('contain', 'phChecking') 

我将操作和断言分开，以防元素上有任何异步事件处理程序。

一般来说，您不能在与操作相同的链中断言，请参阅select命令

在.select()

之后链接依赖于主题的进一步命令是

不安全