使用 cypress 验证加载指示器显示答案

【问题标题】：verify loading indicator shows with cypress使用 cypress 验证加载指示器显示
【发布时间】：2018-08-08 02:33:37
【问题描述】：

我有以下规格：

context('Contact update', () => {
  it.only('Can update contact', () => {
    const address = 'new address 123'
    const cardId = 'c2card-38AF429999C93B5DC844D86381734E62'
    cy.viewport('macbook-15')
    cy.authVisit('/contact/list')
    cy.getByTestId('open-doc-Aaron Dolney-0').click()
    cy.get('[name="physicaladdress"').type(`{selectall}{backspace}${address}`)
    cy.getByTestId(cardId, 'save-button').click()
    cy.getByTestId(cardId, 'loading')
    cy.get('[name="physicaladdress"').should('have.value', address)
  })
})

getByTestId 是我为减少一些样板而编写的命令：

Cypress.Commands.add('getByTestId', (...ids) => {
  const id = ids.map(id => `[data-testid="${id}"]`).join(' ')
  return cy.get(id)
})

当我使用cypress open 以外的任何东西运行它时，它无法获取加载指示器。我认为我的测试端点响应太快并且切换加载指示器的速度太快。

是否有更好、更一致的方法来验证加载指示器的显示？

【问题讨论】：

您的赛普拉斯代码本质上没有任何问题，因此这里的错误与赛普拉斯如何与您的特定应用程序设置交互有关。当你说它失败时，你是什么意思？元素搜索是否超时，如果是，它似乎是在指示器显示之前超时，还是在指示器仍然存在/消失后似乎超时？
是的，加载元素的搜索超时。我相信这是因为它发生得太快了。当测试在headed 模式下运行时，我实际上可以看到加载指示灯闪烁一秒钟，但赛普拉斯没有看到。如果我故意向我的 api 添加 20 毫秒的延迟，它可以工作，这就是我现在正在使用的工作。当我从 cypress ui 运行测试时，我不必添加 20 毫秒的延迟。不得不假设这是 Electron Chromium 与 Chrome 的问题。
是的，如果您的加载计消失得比赛普拉斯从点击命令移动到加载计上的断言的速度更快，那么延迟您的 API [可能不是一个糟糕的解决方案]()。您可以做的另一件事是使用.then() 触发提交按钮并使用setTimeout() 延迟按下提交按钮。这样，赛普拉斯将运行设置超时的代码，然后开始等待加载指示器显示之前。如果加载指示器没有停留足够长的时间，这可能仍然是不稳定的。
这开始进入文档描述的反模式领域。如果您期望某些仅存在很短的时间的东西存在，那么您将遇到困难。 This doc page 是相关的，尽管它不能完全解决相同的问题。

标签： cypress

【解决方案1】：

我也在为此苦苦挣扎，因为我想确保显示加载指示器，所以我不得不变得有点狡猾。我发现cy.route() 有一个onRequest 选项，而这正是我所需要的。

https://docs.cypress.io/api/commands/route.html#Options

    cy.server();
    // Verify that the loading indicator is shown before the request finishes
    cy.route({
      url: url_of_request_that_triggers_loading,
      onRequest: () => {
        cy.getByTestId(cardId, 'loading');
      },
    });

通过这个实现，我们在请求完成之前和加载指示器消失之前运行加载预期。

【讨论】：