cypress - 如果元素存在等待它消失

Question

所以我正在尝试编写一些 cypress 代码，但我认为文档并不是很清楚。

我有两种情况。

1. 页面加载时没有加载微调器。
2. 页面加载时带有加载微调器。

我想编写能够满足这两种情况的代码，并让测试继续进行。

1. 如果页面没有加载旋转元素:照常继续测试。
2. 如果页面确实有加载旋转元素:WAITING该元素消失，然后继续

Cypress 有很多奇特的功能，但有关如何使用它们的文档还不够清晰。

我尝试使用以下代码:

  try {
    cy.getByTestId('loader-spinner')
      .should('exist')
      .then(el => {
        el.should('not.exist');
      });
  } catch (error) {
    cy.getByTestId('loader-spinner').should('not.exist');
  }

Answer 1

由于时间方面的原因，正确进行此测试可能很棘手。

控制触发器

您确实需要知道控制旋转器的因素 - 通常是对 API 的调用。然后，您可以延迟该调用(或者更确切地说是响应)以“强制”微调器出现。

为此，请使用 intercept

cy.intercept(url-for-api-call, 
  (req) => {
    req.on('response', (res) => res.delay(100))  // enough delay so that spinner appears
  }
)

// whatever action triggers the spinner, e.g click a button

cy.getByTestId('loader-spinner')  // existence is implied in this command
                                  // if the spinner does not appear 
                                  // the test will fail here

cy.getByTestId('loader-spinner').should('not.exist')  // gone after delay finishes

两种场景

首先，我认为您的两种场景想法不会帮助您正确编写测试。

您正在尝试使用 try..catch 有条件地进行测试(好主意，但不起作用)。问题在于，由于时间方面的原因，条件测试很不稳定，你让测试在快速环境中运行，然后它开始在较慢的环境(例如 CI)中崩溃。

最好控制条件(如上面的延迟)，然后测试该条件下的页面行为。

要测试微调器是否未出现，请在拦截中返回一个 stub ，它应该足够快以防止微调器显示。

cy.intercept(url-for-api-call, {stubbed-response-object})

// whatever action triggers the spinner, e.g click a button

cy.getByTestId('loader-spinner').should('not.exist')  // never appears

看看When Can The Test Blink?