概要
壊れやすいE2Eテストとは
E2Eテストのテストシナリオを書くときに、下記のようなセレクタの使い方をすると壊れやすくなる。
例：同じclass属性を持つ要素が増えたときにテストが通らなくなる。
- 相対的なセレクタ
例：ある要素の子の要素の子の要素のフォームにxxxを入力するなど
操作するセレクタに一つでも変更があるとテストが通らなくなる。
- textContentに対するセレクタ
表示するテキストが変更されたときテストが通らなくなる。
例：
<button>Sign in</button>が
<button>Login</button>に変更されたときテストが通らなくなる。
カスタムデータ属性
それらを防ぐためにカスタムデータ属性を使う。
テスト用の属性を付与し、HTML、CSS、JSの変更から分離されたテストを書くことができる。
属性について画面と意味とユーザの行動を考えた名称をつける。
これにより、どのようなテストを実施しているかテストシナリオで表明できる。
まとめ
- カスタムデータ属性を使って変更に強いE2Eテストを書く
- テストシナリオはユーザの行動に即したシナリオを書いて仕様を表明する
参考
Making your UI tests resilient to change
Best Practices | Cypress Documentation