Cypress页面已存在仍报超时错误，显式等待失效问题排查

问题原因与解决方法 #

你遇到的显式等待超时，主要有以下几个常见原因和对应修复方案：

• 路由监听注册时机晚于接口请求触发时机：必须先完成路由监听的注册，再执行会触发目标接口的操作（比如页面访问、按钮点击等）。如果调用APIAccount方法前页面已经加载完成、/api/accounts请求已经发送完毕，后续再注册监听自然捕获不到请求，就会触发超时。
• 旧语法不支持fetch类型请求：cy.server()+cy.route()是Cypress 6.0版本之前的旧API，仅支持监听XMLHttpRequest类型的请求，现在绝大多数前端框架默认使用fetch发送请求，旧语法无法捕获这类请求，就会出现等待超时。建议替换为官方现在推荐的cy.intercept()语法，同时支持XHR和fetch请求。
• 路由匹配规则不准确：如果你的/api/accounts接口带有查询参数、路径后缀等，完全匹配的规则会匹配失败，可以添加通配符适配动态路径/参数场景。
• 返回值结构不匹配：cy.intercept()返回的请求对象结构和旧cy.route()不同，原本取status的写法需要调整。

优化后代码示例 #

const APIAccountPage= {
    // 注意：调用该方法前不要提前触发页面加载，要先注册监听再访问页面/触发请求
    APIAccount(name) {
        // 替换旧的cy.server+cy.route为intercept，添加通配符适配带参数的接口场景
        cy.intercept('GET', '/api/accounts**').as('Accounts');
        // 触发接口请求的操作（比如cy.visit('/account-page')）要放在intercept注册之后
        cy.wait('@Accounts', { timeout: 10000 })
            // intercept返回的状态码存在response.statusCode里
            .its('response.statusCode').should('eq', 200);
        // 按钮选择器统一存为变量，减少重复代码
        const searchBtn = cy.get('.vbutton__baseline___3XNit.fonts__letterSpacing___3l5GB.styles__searchIconWrapper___19oVL.styles__iconButton___LLzft')
        searchBtn.should('be.visible')
            .should('not.be.disabled')
            .click();
        // 替换硬等待：等搜索输入框出现后再操作
        const searchInput = cy.get('.styles__patientSearchClass___2iGOV', {timeout: 4000})
        searchInput.should('be.visible').type(name);
        // 替换硬等待：等搜索结果渲染出来再点击
        searchInput.contains(name, {timeout: 4000}).should('be.visible').click();
    }

}

module.exports = APIAccountPage;

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