时间戳

首页 > 解决方案 > 使用 cypress 验证加载指示器显示

cypress - 使用 cypress 验证加载指示器显示

问题描述

我有以下规格：

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，它无法获取加载指示器。我认为我的测试端点响应太快并且切换加载指示器的速度太快。

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

标签： cypress

解决方案

我也在为此苦苦挣扎，因为我想确保显示加载指示器，所以我不得不变得有点狡猾。我发现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');
      },
    });

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

推荐阅读