はじめに

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();

Playwrightでは、単純な文字列だけでなく、正規表現を使って柔軟に要素を特定することができます。特に、今回のように「名前が似ている」要素が多いケースでは、正規表現が役立ちます。今後、同じような問題に直面した際には、ぜひ正規表現を使ったアプローチを試してみてください。