如何在Cypress中处理需输入指定文本的安全校验窗口？

针对你遇到的这种需要从另一个标签页提取文本输入安全校验框的场景，Cypress本身不支持原生多标签页切换操作，得换个思路处理，具体步骤如下：

• 拦截新标签页打开，在当前上下文加载目标页面
  找到触发打开新标签的元素（比如按钮、链接），移除它的target="_blank"属性，点击后就会在当前标签页打开目标页面，避免切换标签的问题：

  cy.get('[data-testid="open-verification-tab"]')
    .invoke('removeAttr', 'target')
    .click()
  

  也可以用cy.intercept拦截页面跳转请求，直接获取目标URL并在当前标签访问：

  cy.intercept('GET', '/verification-page').as('verifyPage')
  cy.get('[data-testid="open-verification-tab"]').click()
  cy.wait('@verifyPage').then(interception => {
    cy.visit(interception.response.url)
  })
  

• 提取校验文本并存储
  定位到新页面里显示校验文本的元素，提取文本内容并存为Cypress别名，方便后续调用：

  cy.get('.verification-code-display')
    .invoke('text')
    .then(text => text.trim()) // 去除可能的空格
    .as('verificationCode')
  

• 返回原页面并输入校验文本
  回到之前的安全校验页面，取出存储的校验文本输入到输入框中：

  cy.go('back') // 回到原页面，或者用cy.visit()直接导航回去
  cy.get('@verificationCode').then(code => {
    cy.get('[data-testid="verify-input"]').type(code)
  })
  

如果你的场景是弹出新窗口而非新标签页，处理逻辑基本一致，核心都是在同一个Cypress上下文里获取校验内容，避免跨标签/窗口的切换操作。

内容的提问来源于stack exchange，提问作者Hari N. Yadav