使用@testing-library/cypress无法定位datalist中option元素的咨询

直接通过cy.findByRole('option')无法找到<datalist>内的<option>元素，核心原因是：

• 原生<datalist>中的<option>元素不属于ARIA规范定义的option角色范畴，不会被纳入浏览器的可访问性树，而@testing-library的基于角色查询完全依赖可访问性树，因此直接查询会返回无结果。

你可以通过以下两种方式验证这些选项：

方式一：验证datalist初始内容 #

如果仅需确认<datalist>包含指定选项，可结合选择器和文本/属性查询：

// 通过datalist的可访问角色listbox定位，再查询选项文本
cy.findByRole('listbox', { name: /subjects/i })
  .findByText('one')

// 或直接验证选项数量与属性值
cy.get('datalist#subjects-list option')
  .should('have.length', 2)
  .eq(0).should('have.value', 'one')

方式二：测试交互后的下拉选项 #

如果要模拟用户操作场景（聚焦输入框后出现的下拉建议），此时浏览器渲染的建议项会带有option角色，可按以下步骤测试：

// 先聚焦关联的输入框
cy.findByRole('textbox').focus()

// 再查询下拉建议中的option元素
cy.findByRole('option', { name: 'one' }).should('exist')

内容的提问来源于stack exchange，提问作者Jacob