この記事は「Reqnroll × Playwrightで始めるE2Eテスト入門」シリーズの一部です。
Playwrightで要素をクリック・入力する方法（.NET / C#）
Playwrightを使ったE2Eテストでは、画面の要素をクリックしたり、テキストを入力する操作が頻繁に登場します。
例えば、次のような操作です。
- ボタンをクリックする
- テキストボックスに入力する
- 検索フォームに文字を入力する
- ログインフォームにIDとパスワードを入力する
この記事では、.NET（C#）のPlaywrightで要素をクリック・入力する基本的な方法を解説します。
なお、この記事では IPage オブジェクトはすでに利用できる前提とします。
Playwrightの起動処理については、以下の別記事で解説している PlaywrightHooks クラスを使用します。
⇒.NETのReqnrollプロジェクトでPlaywrightを使うときのコード構成（基本）
Playwrightで要素を操作する基本
Playwrightでは、ページ内の要素をセレクタで取得して操作します。
基本の流れは次の通りです。
- 要素をセレクタで指定
- Playwrightのメソッドで操作
例
await PlaywrightHooks.Page.ClickAsync("button");
このコードは、ページ内の button 要素をクリックします。
要素をクリックする
ボタンなどの要素をクリックするには ClickAsync を使います。
例
await PlaywrightHooks.Page.ClickAsync("#login-button");
このコードは、IDが login-button の要素をクリックします。
HTML例
<button id="login-button">ログイン</button>
クラス名でクリックする
クラス名を使ってクリックすることもできます。
await PlaywrightHooks.Page.ClickAsync(".submit-button");
HTML例
<button class="submit-button">送信</button>
テキストでクリックする
Playwrightでは、テキストを指定してクリックすることも可能です。
await PlaywrightHooks.Page.ClickAsync("text=ログイン");
この場合、表示テキストが「ログイン」の要素をクリックします。
テキストを入力する
テキストボックスなどに入力する場合は FillAsync を使います。
例
await PlaywrightHooks.Page.FillAsync("#username", "testuser");
HTML例
<input id="username" type="text">
このコードは、IDが username の入力欄に testuser を入力します。
パスワード入力
パスワード入力も同様です。
await PlaywrightHooks.Page.FillAsync("#password", "password123");
HTML例
<input id="password" type="password">
入力してボタンをクリックする例
ログイン画面の例を考えてみます。
HTML
<input id="username">
<input id="password">
<button id="login-button">ログイン</button>
Playwrightコード
await PlaywrightHooks.Page.FillAsync("#username", "testuser");
await PlaywrightHooks.Page.FillAsync("#password", "password123");
await PlaywrightHooks.Page.ClickAsync("#login-button");
このコードで
- ユーザー名入力
- パスワード入力
- ログインボタン押下
という一連の操作を実行できます。
StepDefinitionでの使用例（Reqnroll）
ReqnrollとPlaywrightを組み合わせると、StepDefinition内でこのように書くことができます。
[When(@"ユーザー名とパスワードを入力する")]
public async Task WhenLogin()
{
await PlaywrightHooks.Page.FillAsync("#username", "testuser");
await PlaywrightHooks.Page.FillAsync("#password", "password123");
}
ボタンをクリックするStep
[When(@"ログインボタンを押す")]
public async Task WhenClickLogin()
{
await PlaywrightHooks.Page.ClickAsync("#login-button");
}
このようにすると、FeatureファイルのシナリオとUI操作が対応したテストを書けます。
よく使うセレクタ
Playwrightでは様々なセレクタを使えます。
| セレクタ | 例 |
|---|---|
| ID | #login |
| クラス | .button |
| 要素 | button |
| テキスト | text=ログイン |
| 属性 | [name='username'] |
例
await PlaywrightHooks.Page.FillAsync("[name='username']", "testuser");
Locatorを使う書き方
Playwrightでは Locator を使う書き方もよく使われます。
クリック
await PlaywrightHooks.Page.Locator("#login-button").ClickAsync();
入力
await PlaywrightHooks.Page.Locator("#username").FillAsync("testuser");
Locatorを使うと、要素操作をまとめて管理しやすくなるメリットがあります。
まとめ
Playwrightで要素をクリック・入力する基本操作は次の通りです。
クリック
await Page.ClickAsync("selector");
入力
await Page.FillAsync("selector", "text");
よく使うセレクタ
#id.classtext=文字[attribute=value]
Reqnrollと組み合わせることで、BDDスタイルのE2Eテストを簡潔に記述できます。
Playwrightを使ったテストを書く場合は、まず今回紹介したクリックと入力の操作を理解しておくと、多くのUIテストを作成できるようになります。
