環境

PlayWright
- 1.17

ゴール

複数件のDOMがヒットするセレクタを使用する
ヒットしたすべてのDOMに対して操作する

ユースケース

画面上に表示された削除ボタンをすべてクリックして、画面上から削除する。

対応

$$でセレクタを指定すると、返却値がヒットしたDOMの配列になります。

次のコードは、画面上に表示されたリンクの削除ボタンをすべてクリックします。

const actualDomList = await page.$$("//a[text()='削除']");
await actualDomList.forEach(actual => {
    actual.click()
})

ソースコード

なし。

終わりに

Seleniumにてクリックイベントを発生させる場合、コードの流れは次のようになります。

セレクタでDOMを検索する
検索したDOMからクリックイベントを発生させる

PlayWrightにてクリックイベントで発生させる場合、コードの流れは次のようになります。

クリックイベントのパラメータに、セレクタを指定する

本来であれば、Seleniumの方が「Aに対してBの操作をする」と日本語として意味を理解しやすいです。PlayWrightの場合、「Bの操作をする。Aに対して」と倒置法になってしまうので、日本語としては理解しづらいです。英語としてはPlayWrightの方が自然ですが。

どちらの方が優れている、ということはわかりません。ただ、セレクタをXPathで指定すると1文が長くなってしまい、実施したい操作を文章の後半まで追う必要があるため、Selenium式だとコードの意味を読み込むのがたいへんです。書き方にも依存しますが、PlayWright式だと操作したいイベントがだいたい同じ文字数に来るのでコードリーディングもやりやすいです。

ただしPlayWright式のように書くと、複数のDOMにヒットするセレクタを指定した場合に、初回にヒットするセレクタのみしか選択できません。PlayWright公式にも、次のように記載されています。

A selector to search for an element. If there are multiple elements satisfying the selector, the first will be used

意図しない操作をしない為にも、イベントのオプションにstrict:booleanを指定することで、複数件ヒットした場合にエラーとすることもできます。

複数件ヒットさせた場合に、発生させたいDOMの順番が分かっている場合は、nth-match(n)等で目的のDOMでイベントを発生できます。

XPath等で1件だけヒットするようにするやり方は分かったのですが、雑に更新したいユースケースに対応する方法が分かりませんでした。英語のヘルプが読めるなら一瞬で分かりそうですが、英語に苦手意識持っているせいでこの情報にアクセスするまでに時間がかかってしまいました。

もうちょっと技術系な英単語を覚えて、Multiple, Arrayのような英語のまま絞り込める単語も今後覚えていきたいです。

この記事がお役に立ちましたら、各種SNSでのシェアや、今後も情報発信しますのでフォローよろしくお願いします。