概要
現在、自動テスト時に同じHTML要素を区別する方法がないため、
影響がないはずの修正でテストスイートが壊れてしまう懸念や、
自動テストコードが難読化し保守性が低下する懸念がある。
たとえば、同じ画面に<buttun>要素が複数あった場合、
次のようにボタンの配列を取得してきて、何番目かを指定する必要があるので、
画面の一番上にボタンが追加された場合は、別のボタンをクリックしてテストが壊れてしまう。
await wrapper.findAll('button')[0].trigger('click'); これを避けるために、同じHTML要素を区別して一意に取得するための実装方針を策定し、
サンプルアプリケーションに反映する。
現時点の候補としては、下記の2つが有力である。
- HTML5のカスタムデータ属性（
data-*）を利用して、data-testidを要素に振る
- id 属性を要素に振る
完了条件
- 実装方針が確定すること
- サンプルアプリケーションの自動テストに反映されていること
- コーディング規約に反映されていること（可能であれば静的テストで問題個所を検出できること）
概要
現在、自動テスト時に同じHTML要素を区別する方法がないため、
影響がないはずの修正でテストスイートが壊れてしまう懸念や、
自動テストコードが難読化し保守性が低下する懸念がある。
たとえば、同じ画面に
<buttun>要素が複数あった場合、次のようにボタンの配列を取得してきて、何番目かを指定する必要があるので、
画面の一番上にボタンが追加された場合は、別のボタンをクリックしてテストが壊れてしまう。
これを避けるために、同じHTML要素を区別して一意に取得するための実装方針を策定し、
サンプルアプリケーションに反映する。
現時点の候補としては、下記の2つが有力である。
data-*）を利用して、data-testidを要素に振る完了条件