PlaywrightはSeleniumでもお馴染みのCSSセレクタが使えるが、加えて UIに表示されてる文字列でサーチするTextセレクタ、位置で検索するLayoutセレクタなんてのもある。 Seleniumある程度やってるから行けるでしょ。と甘く見てると思想が違う…ってなるから 経験の有無・多寡問わず公式ドキュメントは熟読しておくべき。
詳細は公式ドキュメント どうせ何回も見るから即ブックマークすべき。 playwright.dev
Playwrightのセレクタはユーザーが視認できる要素を基準にすることを推奨している。
ユーザーが見るものはそうそう変えないから安定したセレクタになるというポリシーらしい ベストプラクティスとして紹介している優先度は ユーザー向け要素(表示テキストなど) > テスト用ID・属性(data-test-id属性で振るのがおすすめ) > どうしても出来ないなら、CSS,XPath
最優先がテキストのためか、いの一番に紹介されるのがTextセレクタ
await page.locator('text=Log in').click();
最初はテキストは結構変わるんじゃね？キーワード被るんじゃねって違和感あるけど 現実ほとんど変わらないし、被るようなキーワード使うロケーターってあまりない カート画面で「数量」って単語はそんな出てこないと思う。
結構便利なのが >> によるセレクタ結合、Chaining selectors
css=article >> css=.bar > .baz >> css=span[attr=value]
これを使うと結果的に絞り込みができるので、Seleniumで行っていた ElementsCollectionを取得してWhereやFilter相当のメソッドで絞り込むなどのコードが減る。 取得タイミング的にも大体直前になるからこっちの方が便利な事が多いはず。
先の節で話した数量の話も 「いや複数商品カート突っ込んだら、数量も複数あるだろ」って話が実はあるけど Chaining selectorsで絞れる
サンプルだとQuerySelectorを繋げてるのと等価だよって書いてあるけど aタグ4つくらい絞った中から、子要素だけじゃなく、そのaタグ自体の要素に対して絞り込みができるような挙動もある気がするから 厳密には違う気がするけど要調査。どうなんでしょうね
あとはIDセレクタとかあるけど、CSSの属性セレクタのそれと大差ないので、こういう書き方もできるんだ程度に見といて、気に入ったら使うと良い。
VueセレクタやReactセレクタ、Shadow DOMセレクタがあるけど 真面目にWebフロントエンドやったのknockoutが最後の老害なので 現代のHTMLフロントエンド開発に詳しくないので何のコメントも出来ません。 現代HTML考えると一番勉強すべき感あります。
8/18追記 所属している会社の技術ブログに本記事を少し読みやすくした記事にしたものを投稿しました。(ないと思うけどパクリじゃん言われないよう対策)
https://note.com/shift_tech/n/n8ef0482b4787
元々このブログは技術ブログみたいな感じでセルフブランディング目的でやろうと思ってたんですけど、うんこがドボルベルグとか書いたりあまりに散文ばかりになってしまったので諦め、会社の技術ブログでセルフブランディングします。
