0Pricing
Angular Academy · レッスン

セレクターとアサーション

要素を対象にして状態をアサートします

「セレクターとアサーション」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

優れたセレクターで安定したテストを作る

要素の検索方法によって、テストの堅牢性が決まります。CSSクラスやDOM構造に結び付いたセレクターは、デザイン変更のたびに壊れます。セマンティックでユーザー向けのロケーターは、ユーザーが実際に認識するものを反映するため、リファクタリング後も機能します。

getByRole：推奨されるロケーター

getByRoleは、アクセシビリティロールとアクセシブルネームで要素を検索します。最も堅牢なロケーターであり、アクセシビリティのチェックも兼ねます。

page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });

getByLabelとgetByPlaceholder

フォームフィールドは、ユーザーが特定する方法と同じように、関連付けられたラベルまたはプレースホルダーで検索します。

page.getByLabel('Email address');
page.getByPlaceholder('Search products');

getByTextとgetByTestId

getByTextは表示テキストに一致します。セマンティックな手掛かりがない場合は、意図的に追加したdata-testid属性を読み取るgetByTestIdを代わりに使用します。

page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">

壊れやすいCSSセレクターを避ける

page.locator('.css-selector')も使用できますが、最後の手段と考えてください。クラス名や入れ子構造は頻繁に変わりますが、ロールやラベルはほとんど変わりません。

// Fragile, avoid when possible:
page.locator('div.row > button.primary');

Webファーストアサーション

ロケーターに対するPlaywrightのexpectはWebファーストです。条件が満たされるかタイムアウトするまで、自動的に再試行します。これが、不安定でないアサーションの鍵です。

await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();

よく使うアサーションマッチャー

マッチャーは、要素またはページに期待される状態を表します。

await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);

リストの件数を検証する

繰り返し表示される要素を確認するには、それらをすべて検索して件数を検証します。ロケーターはすべての要素に一致し、toHaveCountは安定するまで再試行します。

const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');

否定アサーション

.notを使うと、アイテムを削除した後などに、何かが存在しないことや非表示であることを検証できます。

await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();

ロケーターのフィルタリングと連結

filterでロケーターを絞り込んだり、親要素の内部に対象範囲を限定するために連結したりできます。これにより、アサーションを正確に保てます。

const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();

Webファーストが手動ポーリングに勝る理由

Webファーストアサーションは、古いスナップショットを読み直すだけでなく、式全体を再試行します。そのため、await expect(loc).toHaveText('Done')はテキストが表示されるまで待機し、手作業で記述した待機処理につきものの競合状態をなくします。

クイックチェック

最も堅牢なロケーターを選んでください。

まとめ

セマンティックロケーターであるgetByRole、getByLabel、getByTextを優先し、代替手段としてgetByTestIdを使用します。自動的に再試行するWebファーストマッチャー（toBeVisible、toHaveText、toHaveCount、toHaveURL）で検証し、.notとfilterを使って正確さを保ちます。

よくある質問

「セレクターとアサーション」レッスンは無料ですか？

はい。「セレクターとアサーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「セレクターとアサーション」で何を学びますか？

要素を対象にして状態をアサートします ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「セレクターとアサーション」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. E2Eテストの概要
  2. Playwrightテストの作成
  3. セレクターとアサーション
  4. CI統合
← Angular Academyに戻る