🧪
Testing Playground - テストクエリを出力するChrome拡張機能
はじめに
私は普段、ReactやNext.jsで開発をする際に、JestやTesting-Library、Cypressを用いてテストを書いています。これらでテストコードを書く際の要素の取得方法として大きく
- 要素にtest-idを付与して、そのidを取得する方法
- 要素のテキストやロールを取得する方法
といった方法があると思いますが、私はよく後者の方法で取得しています。
今回はこの要素の取得を、より簡単にかつ、適切なテストクエリを出力してくれるChrome拡張機能「Testing Playground」をご紹介します。
1. Testing Playground
まず、この拡張機能がどのようなものか、一言で説明すると「取得したい要素をクリックするだけで、テストクエリを出力してくれる拡張機能」です。
それでは、使い方を説明します。
- Chrome Developer Toolsを開き、「Testing Playground」を選択します。
- 左上にあるマウスカーソル?をクリックして要素を選択できるようにした後、実際にテストコードを取得したい要素(今回は例として)をクリックすると、下図のようにテストクエリが出力されます。
これだけで簡単にテストクエリを出力、もちろんコピーもできるので、そのままテストコードに貼り付けることもできます。
- 今回の例では、ロールでテストクエリを出力していますが、上図の下部にあるようにその他テキストやtest-idでもテストクエリを出力することができます。
- test-idを用いる場合は、上の歯車マークより、test-id属性を編集できます。(デフォルトではdata-testid)
おわりに
私は最近テストの勉強を始め、Web上で簡単にテストクエリを出力してくれるのでとても重宝しています。ぜひ、皆さんも使ってみてください。
最後まで読んでいただきありがとうございました🙇♂️
Discussion