Cypress复制字段值查询用户时@别名被识别为文本如何解决

问题原因 #

Cypress 的@别名语法仅支持在 cy 命令的直接参数中使用（例如cy.get('@value')），直接写在type()方法的字符串参数内时，会被识别为普通文本，无法自动解析为别名对应的取值。

解决方案 #

最稳妥的写法是通过cy.get('@别名')拿到存储的值后，在then回调中执行输入操作，示例代码如下：

// 存储字段值为别名
cy.contains('First name*').invoke('val').as('value')

// 读取别名值后输入到搜索框
cy.get('@value').then(searchValue => {
  cy.get('.search-wrap').first().click().type(`${searchValue}{enter}`, {timeout: 10000})
})

补充说明 #

如果你的测试用例使用普通函数（非箭头函数）定义，也可以直接通过this.别名的方式取值：

it('检索对应用户', function() {
  cy.contains('First name*').invoke('val').as('value')
  // 中间可插入其他操作
  cy.get('.search-wrap').first().click().type(`${this.value}{enter}`, {timeout: 10000})
})

如果执行后发现拿到的value为空，大概率是元素定位错误：如果「First name*」是输入框的标签文本，你需要先定位到对应的输入框元素再读取值，可根据实际DOM结构调整定位逻辑，例如cy.contains('label', 'First name*').siblings('input').invoke('val').as('value')。

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