Cypress点击带href的按钮接口返回200但未加载所需数据如何解决

问题描述 #

我正在开发React应用，有一个带href属性的按钮，点击后会跳转到新URL，同时为下一页的下拉框加载对应数据，按钮代码如下：

<a class="MuiButtonBase-root MuiButton-root MuiButton-text jss1069 depth-2 jss1073" tabindex="0" role="button" aria-disabled="false" href="...." aria-current="page">
  <span class="MuiButton-label">Programs</span>
  <span class="MuiTouchRipple-root">
    <span class="MuiTouchRipple-ripple MuiTouchRipple-rippleVisible" style="width: 276.159px; height: 276.159px; top: -126.08px; left: -69.0797px;"></span>
  </span>
</a>

我尝试编写如下Cypress代码点击该按钮：

cy.get('button[style="padding-left: 40px;"]',{timeout: 10000})
            .should('be.visible')
            .click()
              
cy.get('a[href="......"]')
.should('be.visible')
.click()

我试过通过href匹配、文本匹配、延长可见性等待超时等多种方式操作，按钮确实被成功点击，但后续触发的API调用虽然返回200状态码，却没有加载我需要的信息，Cypress运行器还出现报错，控制台提示“you need a javascript to run this app”，我已确认浏览器启用了JS。
我后续添加了异常捕获逻辑，短暂正常运行几次后又出现同样问题，对应代码如下：

cy.get('a[href="/setup/academics/programs"]')
        .should('be.visible')
        .click()
        Cypress.on('uncaught:exception', (err, runnable) => {
        return false
         })

解决方案 #

这个问题核心是页面跳转后的加载时序和异常捕获时机不对，可按以下步骤调整：

• 调整异常捕获的注册位置
  Cypress.on('uncaught:exception') 必须放在触发异常的操作之前注册，你现在写在click()之后，点击触发的异常已经抛出才注册监听，自然只有小概率能捕获到，需要把这段逻辑移到用例最开头。
• 等待接口和页面加载完成再操作
  你看到的“you need a javascript to run this app”是React应用根HTML里的noscript标签内容，说明你后续操作的时候页面还没完成JS hydrate，或者对应的数据接口还没返回就执行了操作，导致渲染异常。可以通过cy.intercept提前监听下拉框对应的后端接口，跳转后等待接口返回再做后续操作。
• 可选：用直接访问替代点击跳转
  如果是React Router客户端路由的跳转时序问题，也可以直接用cy.visit访问目标路径，绕过点击跳转的不稳定问题。

调整后的示例代码

// 提前注册全局异常捕获
Cypress.on('uncaught:exception', (err, runnable) => {
  return false
})

// 提前拦截下拉框对应的接口，替换成你实际的接口地址和请求方法
cy.intercept('GET', '/api/xxx/xxx').as('getDropdownOptions')

// 点击跳转按钮
cy.get('a[href="/setup/academics/programs"]')
  .should('be.visible')
  .click()

// 等待接口请求完成
cy.wait('@getDropdownOptions', {timeout: 15000})

// 确认页面完成加载，可替换成你目标页面的标志性元素/文本
cy.contains('Programs').should('be.visible')

// 后续再操作下拉框等元素

如果点击跳转依然不稳定，可以把点击部分替换为直接访问：

cy.visit('/setup/academics/programs')

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