この Cypress テストでは、cy.waitUntil npm パッケージを利用して、ローディング スピナーが存在しないのを待ってから、CI でのテストに失敗する競合状態のリスクなしにテストを実行し続けようとしています (現在、コマンドが失敗しているため、テストは失敗しています)。コンポーネントの読み込みがすべて完了する前に、ページ上で作成されます。
この最初の試みでは、値がスピナーをレンダリングするのと同じロジックに依存しているラッパー div の属性「data-cy-isLoading」から取得することにより、読み込み中のスピナーのステータスをアサーションしようとしました。
cy.waitUntil(
() => {
let stillLoading = null
cy.get('[data-cy-isLoading]')
.then(val => (stillLoading = val[0].attributes[1].value))
.then(() => {
if(stillLoading === 'false'){
return true
}
})
},
{
timeout: 8000,
description: 'Await loading spinner',
}
)
if( stillLoading === 'false')条件が満たされ、Trueが返された場合、cy.waitUntil コマンドは、waitUntil コマンドを終了して続行せずに無期限に再試行を続けます。テスト
このバリエーションも機能しませんでした。
cy.waitUntil(
() => {
let done;
let stillLoading;
cy.get('[data-cy-isLoading]')
.then(val => (stillLoading = val[0].attributes[1].value))
.then(() => {
if(stillLoading === 'false'){
done = true
}
})
done ? expect(done).to.be.true : false
},
{
timeout: 8000,
description: 'Await loading spinner',
}
)
次に、コマンド/アサーションでタイムアウトを使用して、スピナー自体の存在を単純にアサートしようとしました。
!!cy.get('[data-cy="spinningCircle"]', {timeout: 10000}).should('not.be.visible')
!!cy.get('[data-cy="spinningCircle"]', {timeout: 10000}).should('not.exist')
要素 [data-cy=spinningCircle] が見つからないとすぐに失敗したため、これらも機能しませんでした