Cypress：定位含指定ID文本且子元素带特定文本的按钮并点击

你的代码存在几个问题，直接修正方案如下：

原代码问题分析 #

1. ID选择器错误：你用了[id^=account-number-]（匹配ID以account-number-开头的元素），但实际按钮ID是random-account-number_type-119，应该用*=（匹配ID包含指定字符串）的选择器。
2. 点击对象错误：你最终点击的是span元素，但需求是点击按钮打开弹窗，需确保点击的是按钮本身。
3. 硬等待不推荐：cy.wait(4000)是固定时长的硬等待，容易导致测试不稳定，Cypress自带元素等待机制，无需手动设置固定等待时间。

正确代码示例 #

方法1：直接组合选择器与文本匹配 #

cy.visit("localhost:5000");
// 定位ID包含account-number的按钮，且其包含文本abc text，然后点击按钮
cy.get('button[id*="account-number"]').contains("abc text").click();

方法2：用within限定查找范围 #

如果需要更明确地限定在按钮内部查找文本，可以使用within：

cy.visit("localhost:5000");
cy.get('button[id*="account-number"]').within(() => {
  cy.contains("abc text").click();
});

方法3：自定义超时（可选） #

如果页面加载较慢，可以给cy.get()设置超时时间（默认4000ms）：

cy.visit("localhost:5000");
cy.get('button[id*="account-number"]', { timeout: 10000 })
  .contains("abc text")
  .click();

关键说明 #

• [id*="account-number"]：CSS属性选择器中的*=表示“属性值包含指定字符串”，完美匹配你的动态ID格式。
• contains命令会自动在目标元素及其子元素中查找文本，所以直接在按钮上调用就能匹配到内部span的文本。
• 移除硬等待后，Cypress会自动等待元素出现、可交互，大幅提升测试稳定性。

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