はじめに
Playwrightを使って自動化テストを行う中で、特定のボタンやリンクをクリックする際、名前が似た要素が複数存在するとエラーになることがあります。
今回は、特に「ピンどめ」というボタンが複数存在するケースに対して、正規表現を使って解決した方法を紹介します。
問題の背景
例えば、同じページに以下のような2つのHTMLがあったとします。
html
<button type="button">ピンどめ 0</button>
<button type="button" aria-label="メッセージをピンどめ">...</button>
複数のボタンに「ピンどめ」というテキストや属性が含まれている場合、
ts
getByRole('button', { name: 'ピンどめ' })
を使うと、どのボタンをクリックすればいいのかPlaywrightが迷ってしまい、エラーになります。
ts
getByRole('button', { name: 'ピンどめ 0' })
と指定してもいいですが、数字の「0」の部分は可変する可能性があります。
解決策：正規表現の利用
このような場合に有効な解決策として、正規表現を利用することで解決できました！今回は、ピンどめという文字列に加えて、その後に続く数字（例: ピンどめ 1）を特定するために、正規表現を使いました。
以下はその解決策です。
ts
const pinButtonPattern = new RegExp(`ピンどめ\\s\\d+`);
await page.getByRole('button', { name: pinButtonPattern }).click();
正規表現のポイント
- ピンどめ\s\d+：この部分が正規表現で、「ピンどめ」に続く1つ以上のスペース（\s）と、その後の数字（\d+）を指定しています。
- これにより、「ピンどめ」という名前を持ち、かつ後ろに数字が付いているボタンのみを特定できるようになります。
まとめ
Playwrightでは、単純な文字列だけでなく、正規表現を使って柔軟に要素を特定することができます。特に、今回のように「名前が似ている」要素が多いケースでは、正規表現が役立ちます。今後、同じような問題に直面した際には、ぜひ正規表現を使ったアプローチを試してみてください。