Cypress如何依据页面元素是否存在的异步条件执行测试用例

错误原因 #

你当前写法不生效是因为Cypress的测试用例（it/context/describe块）都是在测试启动的同步扫描阶段完成注册的，测试运行阶段（也就是then回调执行的时候）再声明的it块不会被Cypress的测试调度系统识别，自然不会执行。

正确实现方案 #

核心思路是提前在前置钩子中完成条件判断，再通过Cypress内置的跳过机制控制后续测试是否执行，适配多测试用例的场景：

context("table", () => {
    let tableEnabled = false

    // 前置钩子：完成页面加载、条件判断
    before(() => {
        // 替换为你的页面访问地址
        cy.visit("/target-page")
        // 等待table元素加载完成，可通过timeout调整最长等待时长适配页面渲染速度
        cy.get("div.table", {timeout: 10000}).then($div => {
            tableEnabled = Cypress.$(".header[title]", $div).length > 0
        })
    })

    it("Check availability", () => {
        if (!tableEnabled) {
            alert("not enabled")
            // 直接跳过当前测试套件下所有未执行的测试用例
            Cypress.mocha.getRunner().suite.ctx.skip()
        }
        alert("enabled")
    })

    // 后续所有业务测试用例正常写即可，无需嵌套
    it("Run proper tests 1", () => {
        // 测试逻辑1
    })

    it("Run proper tests 2", () => {
        // 测试逻辑2
    })

    // 更多测试用例...
})

补充说明 #

如果不需要跳过所有后续测试，只想跳过部分指定用例，可以在对应it块的开头加判断：

it("指定条件才执行的用例", function() {
    if (!tableEnabled) this.skip()
    // 测试逻辑
})

注意这里要使用普通函数而不是箭头函数，才能正确获取this指向的测试用例上下文。

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