Capybara中如何正确定位role为tab的div元素并实现点击？

你写的选择器存在两处语法错误，导致无法匹配到目标元素：

• 标签名匹配错误：目标元素是<div>标签，tab是该元素的role属性值，并非标签名，你写的tab选择器会尝试查找页面上不存在的<tab>原生标签
• 匹配规则逻辑错误：[div=Animals]的写法语义是「查找带有div属性、且属性值为Animals的元素」，但实际Animals是div标签内部的文本内容，不是元素属性，自然无法命中。

优先推荐用语义化属性+文本的定位方式，比依赖动态class的方案稳定性高很多，不会因为组件库版本升级、样式改动导致用例失效：

方案1：通用find写法（适配绝大多数前端测试框架，比如Cypress、Testing Library） #

// 先匹配role为tab的元素，再筛选内部文本为Animals的项执行点击
find('[role="tab"]').contains('Animals').click()

方案2：短写法（确认页面无重名文本时使用） #

find('div.ant-tabs-tab').contains('Animals').click()

方案3：现代测试框架最优写法（适配Playwright、Cypress 10+版本） #

直接用可访问性角色定位，是目前前端自动化测试的首选规范：

getByRole('tab', { name: 'Animals' }).click()

避坑提示：不要用ant-tabs-tab-active这个状态类做定位依据，这个class只有标签处于选中状态时才会存在，如果要点击的是未激活的标签，用这个class会直接定位失败。

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