こんにちは、 @kz_morita です。 今回は、Cypress を用いた E2E テストの DOM の特定方法についてまとめます。 セレクターによる DOM の特定 通常、DOM を特定するのは、ID や Class やHTML要素を指定して行います。 JS では以下のような感じです。 // ID 指定 var dom1 = document.querySelector('#id'); // クラス指定 var dom2 = document.querySelector('.hoge'); // 要素指定 var dom3 = document.querySelector('ul > li'); Cypress でDOM を特定するためにも同じような方法が用いられ、以下のように要素の取得をすることができます。 cy.get("#id") cy.find(".class") しかし、DOM に ID や、class が振られていなくて要素の特定が難しいケースがあります。とくに、CSS in JS などで css 用に class を振っていない場合もあるかと思います。 実際に開発しているサービスでは、emotion というライブラリを用いていて、結果としてDOMの特定が難しいという問題がありました。 また、クラスや要素で DOM を特定する方法は、DOM の構成が変わったりする場合に、E2E テストが変更に弱くなってしまったりします。 テスト用の data 属性をつける Cypress の公式 ドキュメントによると、テスト用の data 属性をつける方法が推奨されています。