验证加载指示器是否显示cypress
我有以下规格:验证加载指示器是否显示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')
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
,它无法获取加载指示器。我认为我的测试端点响应太快,切换加载指示器太快
是否有更好、更一致的方法来验证加载指示器的显示?我也在努力解决这个问题,因为我想确保加载指示器的显示,所以我不得不变得有点狡猾。我发现
cy.route()
有一个onRequest
选项,这正是我需要的
使用此实现,我们在请求完成和加载指示器消失之前运行加载预期。您的Cypress代码本身没有任何错误,因此此处的错误与Cypress如何与特定应用程序设置交互有关。当你说它失败了,你是什么意思?元素搜索是否超时,如果超时,则在指示器显示之前是否超时,或者在指示器仍然存在/消失之后是否超时?是,加载元素的搜索超时。我相信这是因为它发生得太快了。当测试在
headed
模式下运行时,我实际上可以看到加载指示灯闪烁一秒钟,但cypress没有看到。如果我在我的api中添加一个故意的20ms延迟,它就会工作,这就是我现在正在使用的工作环境。当我从cypress ui运行测试时,我不必添加20ms延迟。必须假设这是一个电子铬vs铬的问题。是的,如果你的加载仪表离开的速度比Cypress从单击命令移动到加载仪表上的断言的速度快,那么在你的API中延迟[可能不是一个坏的解决方案]()。您可以做的另一件事是使用.then()
触发提交按钮,并使用setTimeout()
延迟按下提交按钮。这样,Cypress将运行设置超时的代码,然后开始等待加载指示器显示。如果加载指示器没有停留足够长的时间,这可能仍然是不稳定的。这将开始进入文档描述的反模式区域。如果你期望某样东西只在很短的时间内存在,那么你的日子会更难过。是相关的,尽管它没有完全解决相同的问题。
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');
},
});