🎭

[Playwright] 高度なロケーターのfilter()種類と使い方

に公開
初心者向け
Playwright
tech

はじめに

この記事では、Playwright の filter() についてをまとめております。

結論

1. 特定のテキストを持つ: { hasText: テキスト }

// getByRole('button') でページ上のすべてのボタンを取得
// filter({ hasText: 'Login' }) で「Login」というテキストを持つボタンをフィルタリング
// そのボタンをクリック
await page.getByRole('button').filter({ hasText: '/Login/' }).click();

2. 特定のテキストを持たない: { hasNotText: テキスト }

// getByRole('button') でページ上のすべてのボタンを取得
// filter({ hasText: 'Login' }) で「Login」というテキストを持たないボタンをフィルタリング
// そのボタンをクリック
await page.getByRole('button').filter({ hasNotText: '/Login/' }).click();

3. 特定の属性を持つ: { has: ロケーター }

// getByRole('textbox') でテキスト入力フィールドを取得
// filter({ has: page.locator('input[name="email"]') }) でname="email"属性を持つ入力フィールドをフィルタリング
await page
  .getByRole('textbox')
  .filter({ has: page.locator('input[name="email"]') });

4. 特定の属性を持たない: { hasNot: ロケーター }

// getByRole('textbox') でテキスト入力フィールドを取得
// filter({ has: page.locator('input[name="email"]') }) でname="email"属性を持たない入力フィールドをフィルタリング
await page
  .getByRole('textbox')
  .filter({ hasNot: page.locator('input[name="email"]') });

5. 複数の条件で絞り込む

// getByRole('button') でボタンを取得
// filter({ hasText: 'Next', has: page.locator('.enabled') }) で「Next」というテキストを持ち、かつクラス名が.enabledのボタンを絞り込む
await page
  .getByRole('button')
  .filter({ hasText: '/Next/', has: page.locator('.enabled') })
  .click();

YouTube のご案内

ポモドーロタイマー（25 分勉強＋ 5 分休憩）を活用した作業・勉強配信を行っています。
集中したいときや、誰かと一緒に頑張りたいときに、ぜひご活用ください。

ご興味のある方は、ぜひお気軽に遊びに来てください！
「Zenn から来ました!!」とコメントを貰えると泣いて喜びます 🤣

GitHubで編集を提案

Discussion