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

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

繰り返し処理（ループ）

🔄 同じ作業を何度も繰り返す魔法
1回書くだけで、100回でも1000回でも自動で繰り返してくれる

もし「同じ作業を100回」頼まれたら？

想像してみてください。

「テスト用に、ユーザーを1人作成してください」

→ OK、簡単ですね。

await page.getByRole('button', { name: 'Add' }).click();
await page.getByRole('textbox', { name: 'First Name' }).fill('Tarou');
await page.getByRole('textbox', { name: 'name@example.com' }).fill('hogehoge@gmail.com');
await page.getByRole('textbox', { name: 'Age' }).fill('20');
await page.getByRole('button', { name: 'Submit' }).click();

「では次に、ユーザーを3人作成してください」

→ まあ、コピペで何とかなるでしょう。

await page.getByRole('button', { name: 'Add' }).click();
await page.getByRole('textbox', { name: 'First Name' }).fill('Tarou');
await page.getByRole('textbox', { name: 'name@example.com' }).fill('hogehoge1@gmail.com');
await page.getByRole('textbox', { name: 'Age' }).fill('20');
await page.getByRole('button', { name: 'Submit' }).click();

await page.getByRole('button', { name: 'Add' }).click();
await page.getByRole('textbox', { name: 'First Name' }).fill('Hanako');
await page.getByRole('textbox', { name: 'name@example.com' }).fill('hogehoge2@gmail.com');
await page.getByRole('textbox', { name: 'Age' }).fill('20');
await page.getByRole('button', { name: 'Submit' }).click();

await page.getByRole('button', { name: 'Add' }).click();
await page.getByRole('textbox', { name: 'First Name' }).fill('Jirou');
await page.getByRole('textbox', { name: 'name@example.com' }).fill('hogehoge3@gmail.com');
await page.getByRole('textbox', { name: 'Age' }).fill('20');
await page.getByRole('button', { name: 'Submit' }).click();

「では最後に、ユーザーを100人作成してください！」

…どうしますか？
まさか、同じ処理を100回もコピペしますか？
もし後から「作成する項目を追加して」と言われたら100ヶ所すべてを修正しますか？
繰り返し処理（ループ）の出番です！
このような「同じことの繰り返し」を、賢く、そして楽に解決してくれます

書き方と具体例

繰り返し処理にはいくつか種類がありますが、ここでは最も代表的な for文（フォーぶん） を学びます。for文は、「〇回繰り返す」という処理が得意です。

基本的な形

// 「こんにちは」と5回表示するプログラム
for (let i = 0; i < 5; i++) {
  console.log("こんにちは");
}

for文の分解

この for (let i = 0; i < 5; i++) の部分を分解してみましょう。

let i = 0;
【準備】
「i」という名前のカウンターを
0からスタートさせます
i < 5;
【続ける条件】
カウンター i が5未満の間は、
処理を繰り返します
(i が 0, 1, 2, 3, 4 の間)
i++
【1回終わるごとの処理】
{} の中の処理が1回終わるたびに、
カウンター i に1を足します
この3つの組み合わせで、「5回繰り返す」という命令になります。

処理の流れ

// i = 0 → 0 < 5 は true → 「こんにちは」を表示 → i++ で i = 1
// i = 1 → 1 < 5 は true → 「こんにちは」を表示 → i++ で i = 2
// i = 2 → 2 < 5 は true → 「こんにちは」を表示 → i++ で i = 3
// i = 3 → 3 < 5 は true → 「こんにちは」を表示 → i++ で i = 4
// i = 4 → 4 < 5 は true → 「こんにちは」を表示 → i++ で i = 5
// i = 5 → 5 < 5 は false → ループ終了！

自動テストでの使い方

自動テストでは、テストを実行する前のデータ準備で絶大な効果を発揮します。

例えば、「商品を10個登録する」「テストユーザーを20人作成する」といった作業をfor文を使えば数行で記述できます。

// 100人のユーザーを作成する
for (let i = 0; i < 100; i++) {
  await page.getByRole('button', { name: 'Add' }).click();
  await page.getByRole('textbox', { name: 'First Name' }).fill(`User${i}`);
  await page.getByRole('textbox', { name: 'name@example.com' }).fill(`user${i}@gmail.com`);
  await page.getByRole('textbox', { name: 'Age' }).fill('20');
  await page.getByRole('button', { name: 'Submit' }).click();
}
💡 DRYの原則
もし仕様変更があっても、for文の中の処理を1ヶ所修正するだけで、100人、1000人すべての処理に自動で反映されます。

これこそが、「DRY（Don't Repeat Yourself - 同じことを繰り返すな）」というプログラミングの重要な原則です。

⚠️ 無限ループによる要素待機は禁止

🚫 絶対にやってはいけないこと
不安定な要素が表示されるまでfor文やwhile文で待機し続ける、という実装は絶対に禁止です。

これは仕様変更やバグで要素の表示条件が変わった場合、テストが永遠に終わらない**「無限ループ」**に陥り、貴重な実行リソースを無駄にし、問題の発見を遅らせる原因となります。

やってみよう

📝 この演習について
ここはとても大切な内容ですが、最終課題で直接使うことはありません。

また、実際に繰り返し処理を使った関数を作るのは、主に開発寄りのQAエンジニアの役割になります。

今回は「繰り返し処理がどう動いているか」を理解できれば十分です。
そのため、この演習では「処理が繰り返し実行されている様子」に注目してご覧ください。

演習ファイル

tests/document-4/lesson-04.spec.ts

手順動画

進め方

  1. 動画を見て、繰り返し処理がどのように動くのかを確認してください。このステップでは**「動画を見るだけ」で十分**です

  2. もし実際の動きを自分で確かめてみたい方は、演習ファイルを実行して動作を確認してみてください

目次に戻る