找不到带有“@testing-library/cypress”的数据列表选项

Question

我正在尝试编写一个测试，以确认 a具有使用来自 的基于角色的查询<datalist/>的元素列表。奇怪的是，当我尝试按角色查询时：<option/>@testing-library/cypressoption

cy.findByRole('option')

...我没有返回任何结果：

4000 毫秒后超时重试：无法找到具有“选项”角色的可访问元素

...尽管页面中出现内容：

<datalist id="subjects-list">
  <option value="one">one</option>
  <option value="two">two</option>
</datalist>
<input list="subjects-list" value=""/>

有没有办法找到这些选项@testing-library/cypress？

Answer 1

关键似乎是使用hidden:true选项（来自赛普拉斯收到的消息）。

如果您应用该选项，测试会找到两个<option>s，但随后会抱怨有多个结果，因此您需要切换到该*All版本。

cy.findAllByRole('option', { hidden: true })
  .eq(0)
  .should('have.value', 'one')

这就是它的机制，其原因稍微神秘一些。

这是文档关于该hidden选项的说法

如果设置hidden为true通常从可访问性树中排除的元素，也会考虑进行查询。

我认为<datalist>默认情况下是隐藏的，例如这里<datalist>：HTML 数据列表元素，示例页面不会显示选项，直到您单击进入<input>。