Cypress页面对象模型：选data-test-id还是cy.findByText？

在Cypress自动化测试中，两种常见的元素定位方案各有明显优势，具体分析如下：

方案1：使用自定义data-test-id属性定位 #

示例代码 #

elements = {
    homePageNavLink: () => cy.get('[data-test-id="home-page"]')
}

clickHomePageLink(vehicleNum) {
     this.elements.homePageNavLink().click();
}

核心优势 #

• 极致稳定：测试ID是专门为自动化测试设置的标识，不会随页面文案修改、样式调整或组件重构而意外失效，只要开发不主动修改该属性，测试用例的稳定性就能得到保障
• 定位精准：可以给每个需要测试的元素设置唯一ID，完全避免因页面存在相同文本/样式元素导致的定位冲突问题
• 调试高效：在浏览器开发者工具中，能通过[data-test-id="xxx"]快速搜索定位目标元素，排查测试失败原因更便捷
• 框架无关：不依赖前端框架，无论是React、Vue还是原生JS项目都能通用，无需额外安装依赖

方案2：使用@testing-library/cypress定位 #

示例代码 #

elements = {
    homePageNavLink: () => cy.findByText('home')
}

clickHomePageLink(vehicleNum) {
     this.elements.homePageNavLink().click();
}

核心优势 #

• 贴近用户真实行为：基于用户可见的文本、标签等内容定位元素，模拟的是用户实际操作页面的逻辑，更符合UI测试的核心目标——验证用户能正常使用功能
• 无代码侵入：不需要开发为测试额外添加属性，减少跨角色协作成本，也不会在生产代码中留下测试专属标识
• 自带等待机制：findBy*系列命令内置了等待元素出现/可交互的逻辑，相比cy.get()需要手动添加断言等待，能有效减少测试中的超时问题
• 推动可访问性优化：这种定位方式会间接引导开发关注页面的可访问性（比如按钮必须有明确可见的文本），提升产品的整体可用性

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