Cypressテストコードを書いている最中にエラーが起きた内容とその解決策を備忘録として書いておく。
エラーの起きたコード
visit(path)
wait(2 * 1000)
get(input).type("入力フォームに入力したいテキスト")
課題
画面遷移の時に、読み込み時間が2秒以上かかった場合に、inputタグがまだ表示されていなくて、エラーに落ちる
↓ 解決策
visit(path)
// inputのボタンが表示されるまで待つ（デフォルトで4秒）
cy.get("input").should("exist");
get(input).type("入力フォームに入力したいテキスト")
inputのボタンが表示されるされるまで待つようにすれば解消。
それでも、たまに同じ場所でエラーが出る場合があった。
cy.get("input").should("exist");
のところで、inputタグが見つかりませんでしたな内容。
画面遷移に時間がかかる場合がある
PCが重いなど何ら中の理由で、画面遷移に時間がかかっている。計測すると、基本は1~2秒の間で遷移しているが、時間がかかった場合、9秒かかる場合があった
実際に計測してみる。時間を測りたいところに↓のコードを追加(他にいい方法あると思う）
cy.visit(path)
// ページ名を含む要素を取得して、処理時間をログに出力
const start = Date.now();
cy.get('input', {timeout: 10 * 1000}).should('exist').then(() => {
const end = Date.now();
const executionTime = end - start;
cy.log("処理時間：" + executionTime + "ms");
});
※ {timeout: 10 * 1000}について
shouldは、デフォルトで4秒しか待ってくれないので、プラスで10秒待つ（つまり14秒までは表示を待つようにしている。）
このコードを入れて、20回分テストして
cy.get('input').should('exist')
の実行時間を計測すると、
| 1 | 2 | 3 | 4 | 5 |
|---|---|---|---|---|
| 143ms | 140ms | 166ms | 151ms | 166ms |
| 6 | 7 | 8 | 9 | 10 |
| 139ms | 152ms | 153ms | 865ms | 171ms |
| 11 | 12 | 13 | 14 | 15 |
| 142ms | 608ms | 170ms | 148ms | 146ms |
| 16 | 17 | 18 | 19 | 20 |
| 150ms | 172ms | 142ms | 139ms | 159ms |
というような結果に。
結論
こういうブレがあるため、wait(2 * 1000)としてしまうと、
処理時間に2000msを超えた時にエラーが発生してしまうので、（処理が早く終わったのに待つ手間も生まれる）
shouldで処理を待機するようにしようと学んだ。
感想
そもそもあまりwait(ミリ秒）は入れずに、shouldなどのアサーションで、適切な時間だけ待つようにしたほうが綺麗。