验证加载指示器是否与cypress一起显示 [英] verify loading indicator shows with 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 是我为减少某些样板而编写的命令:

getByTestId is a command I wrote to reduce some boilerplate:

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

当我以 cypress open 以外的任何其他方式运行此程序时，它无法获取加载指示器.我以为我的测试端点响应速度太快，并且切换加载指示器的速度也太快了.

When I run this with anything other than cypress open, it fails on getting the loading indicator. I'm thinking my test endpoint is responding too fast and toggling the loading indicator too quickly.

是否有更好，更一致的方式来验证加载指示器显示?

Is there a better, more consistent, way to verify the loading indicator shows?

推荐答案

我也为此而苦苦挣扎，因为我想确保加载指示器显示出来，所以我必须要有一点点技巧.我发现 cy.route()有一个 onRequest 选项，最终正是我所需要的.

I was struggling with this as well since I wanted to make sure the loading indicator was showing so I had to get a bit crafty. I found that cy.route() has an onRequest option and that ended up being just what I needed.

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');
      },
    });

通过此实现，我们可以在请求完成之前和加载指示消失之前运行加载期望.

With this implementation we run the loading expectation before the request finishes and before the loading indicator disappears.

这篇关于验证加载指示器是否与cypress一起显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！