Playwright – getByTestId と getByText をチェーンして利用する

コード例

以下のように書くと「指定の data-testid を持つ要素が、指定のテキストを持っている」という検証ができるようだ

await expect(page.getByTestId('some-id').getByText('some-text')).toBeVisible()

つまり複数のlocatorを組み合わせて使えるらしい

公式

You can chain methods that create a locator, like page.getByText() or locator.getByRole(), to narrow down the search to a particular part of the page.
In this example we first create a locator called product by locating its role of listitem. We then filter by text. We can use the product locator again to get by role of button and click it and then use an assertion to make sure there is only one product with the text "Product 2".

翻訳

page.getByText() や locator.getByRole() など、ロケーターを作成するメソッドを連鎖させて、ページの特定の部分に検索を絞り込むことができます。
この例では、最初に listitem の役割を見つけて product というロケーターを作成します。次に、テキストでフィルタリングします。製品ロケーターを再度使用して、ボタンの役割を取得してクリックし、アサーションを使用して、テキスト「Product 2」を持つ製品が 1 つだけであることを確認します。

以下の例では一時変数を使ってるが、やっていることは変わらないはず

const product = page.getByRole('listitem').filter({ hasText: 'Product 2' });

await product.getByRole('button', { name: 'Add to cart' }).click();

await expect(product).toHaveCount(1);

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

プロフィール・経歴