CodeceptJS でユーザーの操作をテストコードに変換する方法

はじめに

CodeceptJS には、ユーザーの操作を簡単に記録し、自動でテストコードに変換する方法 があります。

本記事では、CodeceptJS をメイン に、ユーザーが実際に行った操作を 自動でテストコード化する方法 を紹介します。

1. pause() を使って手動で操作を記録

pause() を使用すると、テストを一時停止し、手動で操作しながらコードを記録できます。

• テストコード例

Feature('User Interaction');

Scenario('manual recording', async ({ I }) => {
  I.amOnPage('https://example.com');
  I.pause(); // ここでテストを一時停止

  // 一時停止後、手動で操作すると、対応するコードがコンソールに表示される
});

• 実行方法

npx codeceptjs run --debug

• 動作の流れ

1. pause() でテストが 一時停止
2. 手動でブラウザを操作
3. codeceptjs のコンソールに 対応する操作コード が表示される
4. 表示されたコードをテストに組み込む

この方法を使うと、実際の挙動を見ながらテストを作成 できます。

2. codegen を使ってユーザー操作を自動記録（Playwright 使用）

CodeceptJS は Playwright を利用して、ユーザーの操作を自動的にテストコードとして出力する ことができます。

• 実行コマンド

npx playwright codegen --target=codeceptjs https://example.com

• 動作の流れ

1. https://example.com を開いた ブラウザ が起動
2. クリック・入力などの操作を自動記録
3. 記録された操作が CodeceptJS のコードとして出力

• 出力されるコード例

Feature('Example');

Scenario('recorded test', ({ I }) => {
  I.amOnPage('https://example.com');
  I.click('text=Login');
  I.fillField('input[name="username"]', 'testuser');
  I.fillField('input[name="password"]', 'password123');
  I.click('text=Submit');
  I.see('Welcome, testuser');
});

この方法を使うことで、初心者でも簡単にテストコードを作成 できます。

3. どちらの方法を使うべき？

方法	使いどころ
pause()	実際に試しながら細かく修正したい時
playwright codegen	ユーザーの動きを自動で一気に記録したい時

基本的には、

1. 最初に playwright codegen で大まかに記録
2. その後、pause() を使って微調整

という流れで進めるのが 最も効率的 です！

まとめ

• pause() を活用すると、手動で操作を確認しながらテストコードを作成 できる

• Playwright の codegen を使うと、ユーザーの操作を自動で CodeceptJS のテストコードに変換 できる

これらを組み合わせることで、効率的にテストを作成可能！

CodeceptJS の強力な記録機能を活用して、簡単に E2E テストを作成 しましょう！