如何在Cypress测试中不打断链式调用存储重置密码链接URL

最简洁的方法是在获取链接元素后，通过.then()直接操作当前DOM元素，同时存储URL，这样不会改变链式调用的上下文：

.getLastEmailHtml()
.then((html) => {
  cy.document().invoke('write', html)
})
.contains('Reset password') // 这是按钮/锚点元素
.invoke('removeAttr', 'target')
.then($link => {
  // 存储URL到Cypress别名供后续使用
  cy.wrap($link.attr('href')).as('resetPasswordUrl')
  // 返回当前DOM元素，维持链式调用上下文
  return $link
})
.click()

// 设置新密码的操作...

// 后续验证token过期时，取出存储的URL
cy.get('@resetPasswordUrl').then(url => {
  cy.visit(url)
  // 验证token过期的逻辑，比如检查过期提示等
})

原理说明 #

• 使用.then($link)接收当前DOM元素对象，此时链式调用的上下文仍为DOM元素，不会被attr('href')转换成字符串
• 通过cy.wrap(...).as('resetPasswordUrl')将URL存储为Cypress别名，后续可通过cy.get('@resetPasswordUrl')便捷取出
• 最后返回$link，确保链式调用继续，后续的.click()依然能作用在原DOM元素上

报错原因回顾 #

原代码中.invoke('attr', 'href').then(...)会把链式调用的上下文从DOM元素切换为href字符串，导致后续的.click()找不到可操作的DOM元素，触发cy.click() failed because it requires a DOM element错误。

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