Playwrightで待機処理（wait）の書き方（C# / .NET）

PlaywrightでE2Eテストを書くとき、画面の読み込みや要素の表示を待つ処理（wait）は非常に重要です。

例えば次のようなケースです。

ページ遷移後に要素が表示されるまで待つ
Ajax通信が終わるまで待つ
ボタンが表示されるまで待つ
モーダルが表示されるまで待つ

適切に待機処理を書かないと、次のような問題が発生します。

要素が表示される前にクリックして失敗する
テストが不安定になる
CI環境でテストが落ちる

この記事では、Playwright（C# / .NET）での待機処理の書き方を解説します。

なお、この記事では IPage はすでに取得済みとします。
Playwrightの起動処理については、別記事で解説している PlaywrightHooks クラスを使用します。

Playwrightは自動待機（Auto Wait）を持っている

Playwrightの大きな特徴は、多くの操作に自動待機があることです。

例えば次のコードです。

await PlaywrightHooks.Page.ClickAsync("#login-button");

Playwrightは内部で次の状態になるまで待機します。

要素がDOMに存在する
要素が表示されている
要素がクリック可能

そのため、基本的なクリックや入力ではwaitを書く必要がない場合が多いです。

要素が表示されるまで待つ

要素の表示を待つ場合は WaitForSelectorAsync を使います。

例

await PlaywrightHooks.Page.WaitForSelectorAsync("#login-button");

このコードは、#login-button が表示されるまで待機します。

その後クリックする場合

await PlaywrightHooks.Page.WaitForSelectorAsync("#login-button");

await PlaywrightHooks.Page.ClickAsync("#login-button");

要素が表示状態になるまで待つ

表示状態を指定することもできます。

await PlaywrightHooks.Page.WaitForSelectorAsync(
    "#login-button",
    new PageWaitForSelectorOptions
    {
        State = WaitForSelectorState.Visible
    });

指定できる状態

状態	説明
Attached	DOMに存在
Visible	表示されている
Hidden	非表示
Detached	DOMから削除

多くの場合は Visible を使います。

ページ遷移を待つ

リンククリック後などのページ遷移を待つ場合は WaitForLoadStateAsync を使います。

例

await PlaywrightHooks.Page.ClickAsync("#login-button");

await PlaywrightHooks.Page.WaitForLoadStateAsync();

これにより、ページの読み込みが完了するまで待機します。

特定のURLになるまで待つ

ページ遷移後のURLを確認する場合は WaitForURLAsync を使います。

await PlaywrightHooks.Page.WaitForURLAsync("**/home");

このコードは、URLに /home が含まれるページになるまで待機します。

ログイン画面の例

await PlaywrightHooks.Page.ClickAsync("#login-button");

await PlaywrightHooks.Page.WaitForURLAsync("**/dashboard");

一定時間待つ（Sleep）

単純に時間待機する場合は WaitForTimeoutAsync を使います。

await PlaywrightHooks.Page.WaitForTimeoutAsync(2000);

このコードは 2秒待機します。

ただし、この方法はあまり推奨されません。

理由

テストが遅くなる
不安定になる

可能な限り

要素待機
URL待機
ロード待機

を使う方が良いです。

Locatorで待機する

Playwrightでは Locator を使った待機もよく使われます。

例

await PlaywrightHooks.Page
    .Locator("#login-button")
    .WaitForAsync();

表示状態を指定

await PlaywrightHooks.Page
    .Locator("#login-button")
    .WaitForAsync(new LocatorWaitForOptions
    {
        State = WaitForSelectorState.Visible
    });

LocatorはPlaywrightで推奨されているAPIです。

ReqnrollのStepDefinitionでの例

ReqnrollとPlaywrightを組み合わせる場合、StepDefinitionで待機を書くことがよくあります。

例

[Then(@"ログインボタンが表示される")]
public async Task ThenLoginButtonIsVisible()
{
    await PlaywrightHooks.Page.WaitForSelectorAsync("#login-button");
}

クリックするStep

[When(@"ログインボタンを押す")]
public async Task WhenClickLogin()
{
    await PlaywrightHooks.Page.ClickAsync("#login-button");
}

このように書くことで、BDDスタイルのE2Eテストを実装できます。

Playwrightの待機処理まとめ

Playwrightでよく使う待機処理は次の通りです。

メソッド	用途
WaitForSelectorAsync	要素表示待機
WaitForLoadStateAsync	ページロード待機
WaitForURLAsync	URL変更待機
WaitForTimeoutAsync	固定時間待機

基本方針は次の通りです。

まず自動待機を利用
必要なら要素待機を書く
固定時間waitはできるだけ使わない

まとめ

Playwrightでは、UIテストを安定させるために待機処理（wait）が重要になります。

よく使う待機処理は次の通りです。

要素待機

await Page.WaitForSelectorAsync("#element");

URL待機

await Page.WaitForURLAsync("**/home");

ロード待機

await Page.WaitForLoadStateAsync();

Playwrightには自動待機機能（Auto Wait）があるため、多くの場合は明示的なwaitを書かなくても動作します。

しかし、ページ遷移や非同期処理がある画面では、今回紹介した待機処理を使うことで安定したE2Eテストを書くことができます。