自動テストチュートリアル

Playwright、Seleniumなどの自動テストツールを学ぼう

テキストボックス(Text Box)

最初は全ての基本となる「テキストボックスへの入力」です。

利用頻度 難易度
★★★★★ ★☆☆☆☆

Playwrightを使って、テキストボックスに文字を自動で入力する方法を学びます。これは、自動テストで最も基本かつ、最もよく使う処理です。これができるようになると、ログイン画面やお問い合わせフォームなど、様々な画面のテストを自動化できるようになります。

必ずお読みください

これから書くコードには、必ず await page. というおまじないのような言葉が最初につきます。まずは「そういうもの」くらいに考えておいて大丈夫です。

そして、Pick locatorで取得した要素のコードは、この await page. の直後にくっつけます。

await page.[ここにPick locatorで取得したコード].fill("入力したい値");

この「型」を意識すると、コードの組み立てがとても楽になります。

今回使用するコマンド：fill()

fill() は、テキストボックスに文字を自動で入力するための命令（コマンド）です。

これを使えば、入力欄に好きな文字を自由自在に入力できます。

基本的な書き方

await page.[ここにPick locatorで取得したコード].fill("入力したい値");

具体例

// 「#userName」というIDを持つ入力欄に「山田 太郎」と入力する場合
await page.locator("#userName").fill("山田 太郎");

ポイント

  • 入力する文字列は、" "（ダブルクォーテーション）で囲んでください
  • 数字、日本語、英語、記号など、どんな文字でも入力できます

「ん？」となった場合は、深く考え込む前にまずは実践してみましょう。 実際に手を動かして試すことで、理解できることが一気に増えていきます。

やってみよう

以下の手順に沿って、4つのテキストボックスに指定された値を入力するテストコードを完成させてください。

演習ファイル

tests/document-2/lesson-01.spec.ts

入力する値

項目 入力値
Full Name Yamada Tarou
Email hogehoge@gmail.com
Current Address Tokyo
Permanent Address Osaka

手順動画

手順

  1. ファイルを開く： VSCodeで、上記の演習ファイルを開きます
  2. ブレークポイントで一時停止： コードを書きたい場所の少し手前にブレークポイント（赤い丸印）を設定して、デバッグモードでテストを実行して、目的の画面で一時停止させます
  3. Pick locatorで要素を特定： 「Pick locator」を使って、1つ目の入力欄（Full Name）をクリックし、その要素を特定するためのコードを取得します
  4. コードを書く： 取得したコードと、先ほど学んだ fill() を組み合わせて、1行目の入力処理を完成させます
  5. 残りも同様に： 同じ手順を繰り返し、4つの入力欄すべてのコードを書き上げます
  6. 最終確認： ブレークポイントを全て外し、もう一度テストを実行します。緑色の「passed」が表示されたら、課題は完了です！

このステップのゴール

正しく要素を取得し、指定された値を入力できていれば、テストは成功します。テストを実行し、ターミナルに緑色のチェックマークや「passed」という文字が表示されればOKです！

ちなみに...

fill() で入力する値は、それが「文字」や「数字」なのか、あるいは「変数」なのかによって、少しだけ書き方のルールが違います。

変数を使う場合

あらかじめ用意しておいた「変数」という箱の中身を使いたい場合は、" で囲まずに、変数名をそのまま書きます。

// 変数を定義
const userName = "山田 太郎";

// 変数を使って入力（ダブルクォーテーションなし）
await page.locator("#userName").fill(userName);

（※変数の詳しい説明は、後のレッスンで行いますので、今回は「こんな書き方もあるんだな」と見ておくだけで大丈夫です。）

目次に戻る