在 cypress 中等待加载旋转器的最佳实践是什么？

Question

在我的应用程序中，我需要在 cypress 中检查以下流程：

1. 用户转到页面
2. 正在发送呈现页面所需的请求。
3. 在发送请求和收到响应之间的时间内，用户应该看到一个加载微调器。收到响应后，应移除加载旋转器。

我尝试测试的第一件事很简单：

it('should display spinner during page load', () => {
    cy.visit(myPageUrl);
    cy.get(selectors.spinner).should('exist');
    cy.get(selectors.spinner, { timeout: 5000 }).should('not.exist');
});

然而，这会产生竞争条件。在 cypress 断言旋转器存在之前，页面可能会加载并且旋转器将消失。这是一个直观的解释：

这是我的预期： 预期结果

以下是实际可能发生的情况，这将导致测试失败： 可能的结果

因此，经过一番研究后，我尝试了以下方法来解决竞争条件：

it('should display spinner during page load', () => {
    
    let sendResponse;

    const trigger = new Promise((resolve) => {
        sendResponse = resolve;
    });

    cy.intercept('GET', '/myRequiredPageData', (req) => {
        return trigger.then(() => {
            req.reply();
        });
    });

    cy.visit(myPageUrl);

    cy.get(selectors.spinner).should('exist').then(() => {
        sendResponse();
        cy.get(selectors.spinner, { timeout: 5000 }).should('not.exist');
    });

});

但是，现在我有时会收到此错误： A request callback passed to cy.intercept() timed out after returning a Promise that took more than the defaultCommandTimeout of 4000ms to resolve.

我假设 cy.intercept 在 cypress 命令队列中停留的时间超过了，defaultCommandTimeout这就是测试失败的原因。假设我无法更改配置键和测试配置，我想知道我还能做什么来检查微调器，以及在加载微调器的最佳实践方面我是否处于正确的方向。

Answer 1

为了测试旋转器，我遵循这个问题If element isn't wait for it to gone

这个想法是延迟事件序列足以确保旋转器激活，然后首先检查它是否可见，然后检查它不可见（或不存在）。

cy.intercept('GET', '/myRequiredPageData', (req) => {
  req.on('response', (res) => res.delay(300))   
})
.as('request')

cy.visit(myPageUrl)

cy.get(selectors.spinner).should('exist')
cy.wait('@request')

cy.get(selectors.spinner).should('not.exist')