自動テストツール Playwright入門（セレクタ編）
はじめに
テスト自動化アーキテクトの牧野です。
Playwright入門としてセレクタについて紹介します。
Playwright(プレイライト)とは?
セレクタの前にPlaywrightを簡単にご紹介しますと、Webフロントエンド自動 テスト のためのツールです。Seleniumはブラウザオートメーションがツールの目的ですが、Playwrightは明確に 自動テスト が目的となっています。
そのためテストランナーやアサーション機能が同梱され、自動テスト実装に必要なものがそろっています。
詳細は公式ドキュメントをご参照ください。
この書き出しだと自動テスト向けの機能に言及しそうですが、今回は セレクタ から入門します。
セレクタを見ていく前に
公式ドキュメントが最強なので、ブックマークしてください。
極論、公式ドキュメント読んでいただければOKです。
また、SeleniumとかでおなじみのCSSセレクタなどは本記事では紹介しません。Playwright特有のものだけご紹介します。
基本Selenniumで使えたセレクタは使えると考えていただいて大丈夫です。
Playwrightの思想
Playwrightはセレクタとして使用すべき要素として真っ先に テキスト を掲げています。ユーザーが見るものはめったに変えないため、安定したセレクタになるというポリシーのようです。
引用元: セレクタのベストプラクティス
ベストプラクティスとして紹介している優先度は以下の順序です。
ユーザー向け要素(表示テキストなど)
テスト用ID・属性(data-test-id属性で振るのがおすすめ)
CSS,XPath
優先順位の2番目に紹介されているIDやclassを最優先としてる方も多いのではないでしょうか。
Text selector
最優先がテキストのためか、Text selectorは一番に紹介されています。
await page.locator('text=Log in').click();使い方は見たまま、text=で表示テキストを指定。
CSSやXpath、プログラミングによる絞り込みを必要とせず、表示テキストによる要素取得をセレクタ機能としてサポートするのは、他のブラウザ自動化ツールには見られない特徴ではないでしょうか。
最初はテキストは変更されたり、キーワード被るのでは？と違和感ありましたが、現実ほとんど変わりませんし、被るようなキーワード使うことはほぼなかったです。たとえばカート画面で「数量」って単語、実は複数出ることあまりなかったです。思った以上に使い勝手がいいので積極的に使ってみましょう。割と新しい世界が見えます。
Chaining selectors
結構便利なのが >> によるセレクタ結合、 Chaining selectors
css=article >> css=.bar > .baz >> css=span[attr=value]
*li >> [checked]挙動としてはquerySelector().querySelector()並びにlocator().locator()とほぼ同じなのですが、2行目の *(アスタリスク) を利用したパターンが便利。
セレクタ結合(>>)の左辺側に複数合致する要素がある場合、デフォルトは合致した最後の要素を親とし、右辺側のセレクタが適用された結果が得られますが、左辺側に アスタリスク をつけている場合、合致したすべての要素に対し、それぞれを親とし、右辺側のセレクタが適用された結果が得られます。
querySelector().querySelector()を個別に行った結果を返す形です。
たとえば、以下のようなHTMLを考えます。
<ul>
<li> <input checked value='foo'> </li>
<li> <input value='bar' > </li>
<li> <input checked value='baz'> </li>
</ul>以上に対し、アスタリスクを付けない li >> [checked] を用いると、value='baz' の要素だけが取得され、アスタリスクを付ける *li >> [checked] を用いると、value='foo',value='baz' それぞれの要素が取得されます。
これを使うと絞り込みができるので、Seleniumで行っていたElementsCollectionを取得してWhereやFilter相当のメソッドで絞り込むなどのコードが減ります。
取得タイミング的にも大体直前になるからこっちの方が便利な事が多いはず。
先の節で話した数量の話も 「複数商品カートに投入したら、数量というキーワードが複数になるのでは？」と思われるかもしれませんが Chaining selectorsで絞れます。
まとめ
セレクタ入門編ということで、Playwrightを代表すると考えている2つのセレクタをご紹介しました。
また、22年7月20日現在では実験的ですが、reactやvueのコンポーネント名を指定したセレクタも構築できます。
後発なだけあって多機能なうえ、表示テキストを主軸にしたベストプラクティスを実現するためのPlaywrightセレクタ。
便利で面白いためこの夏、入門してみるのはいかがでしょうか。
執筆者プロフィール：牧野 真哉
自動テストで生計を立てています。
お問合せはお気軽に
https://service.shiftinc.jp/contact/
SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/
SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/
SHIFTの導入事例
https://service.shiftinc.jp/case/
お役立ち資料はこちら
https://service.shiftinc.jp/resources/
SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/