Cypress中如何存储输入框值并通过别名变量实现文本定位？

原代码的问题分析 #

1. 未正确提取输入框value：原代码里then(new_id => { ... })中的new_id是jQuery元素对象，不是输入框的value属性值，需要用.invoke('val')获取实际值。
2. 别名使用错误：cy.contains()的模板字符串里直接写${'@tableID'}无法解析Cypress别名，别名必须通过cy.get('@tableID')在异步上下文里读取。
3. 固定等待不推荐：cy.wait(10000)属于硬编码等待，应优先用Cypress自动等待机制，或针对特定元素/请求做等待。

正确实现方案 #

方案1：链式调用（简洁直接）

直接在获取value后链式执行后续操作，无需存储别名：

// 获取输入框的value值
cy.get('#id_px_file_input').invoke('val').then(tableID => {
  // 点击Hakemisto按钮
  cy.contains('Hakemisto').click()
  // 自动等待目标元素出现后点击
  cy.contains(`U ${tableID} -`).click()
})

方案2：使用别名（适合跨步骤复用）

如果需要在多个测试步骤复用该值，可存储为别名，后续通过cy.get('@tableID')读取：

// 将输入框value存为别名
cy.get('#id_px_file_input').invoke('val').as('tableID')

// 后续使用别名时，需在then回调中获取
cy.contains('Hakemisto').click()
cy.get('@tableID').then(tableID => {
  cy.contains(`U ${tableID} -`).click()
})

关键说明 #

• .invoke('val')：调用jQuery的val()方法提取输入框当前值，这是获取value属性的标准方式。
• 异步上下文处理：所有依赖前一步结果的操作必须放在then回调中，保证Cypress命令执行顺序同步。
• 替换固定等待：cy.contains()本身会自动等待元素出现（默认超时4秒，可配置），无需额外的cy.wait(10000)；若页面加载较慢，可修改全局超时或针对特定请求等待优化。

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