如何让Cypress等待React的loading状态从True变为False？

1. 等待加载动画消失（推荐给加载组件加标识） #

给你的<LoadingInformation />组件加上datacy属性，比如：

<LoadingInformation datacy="loading-spinner" />

然后在测试里用Cypress的断言等待这个元素消失：

cy.get("[datacy='loading-spinner']").should('not.exist');
// 之后再执行你的测试逻辑
cy.get("[datacy='firstName']").find("input").invoke('val');

Cypress会自动轮询检查元素状态，直到它消失（默认超时4秒，可按需调整），比固定cy.wait(5000)靠谱得多，不会出现等待时间不够或浪费时间的问题。

2. 直接等待目标元素就绪 #

如果不想给加载组件加标识，也可以直接等待你要操作的目标元素处于可交互状态：

cy.get("[datacy='firstName'] input").should('be.visible').invoke('val');

Cypress的cy.get()本身就会等待元素出现，加上.should('be.visible')能确保元素不仅存在还能被操作，从根源上避免加载未完成时的报错。

3. 全局配置，统一应用到所有测试 #

如果所有页面都有类似的加载逻辑，你可以在Cypress的全局支持文件里配置beforeEach钩子，让每个测试用例执行前都自动等待加载完成：

在cypress/support/e2e.js（旧版本可能是cypress/support/index.js）里添加：

beforeEach(() => {
  // 可自定义超时时间，比如10秒
  cy.get("[datacy='loading-spinner']", { timeout: 10000 }).should('not.exist');
});

这样所有测试用例都会自动先等加载结束，不用每个测试都写重复代码，适配全项目的测试场景。

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