OpenAIを利用して、CodeceptJSのテストコードを自動で書いてもらう

CodeceptJSのバージョン3.5.0にて、AI機能を追加したとのことだったので、試してみました。

CodeceptJSでのAIについて

https://codecept.io/ai/

必要なもの

• OpenAIのAPIトークン（有料アカウントが必要）

無料アカウント時に生成したAPIトークンでは利用できないので注意してください。

実行手順

1. npx create-codeceptjs .コマンドでインストールします。
2. openai_test.tsを作成し、以下のコードをコピペします。

openai_test.ts

Feature('ai');

Scenario.only('test ai features', ({ I }) => {
  I.amOnPage('https://getbootstrap.com/docs/5.1/examples/checkout/')
  pause();
});

3. OPENAI_API_KEY={APIトークン} npx codeceptjs run --debugを実行します。
4. pauseに到達した段階から対話モードとなり、生成してほしいテストパターンを入力後、Enterキーを押下します。

E2E用のテストコードを書いてもらう

全てのフィールドに対して入力するテストコードを書いてもらいました。

依頼内容

I.fill all fields. Don't submit.

依頼結果

生成されたコード

各フィールドの要素を調査し、値を入力するテストコードを作成してくれています。

// Open the web page
I.amOnPage('/');

// Fill the first name field
I.fillField({ id: 'firstName' }, 'John');

// Fill the last name field
I.fillField({ id: 'lastName' }, 'Doe');

// Fill the username field
I.fillField({ id: 'username' }, 'johndoe');

// Fill the email field
I.fillField({ id: 'email' }, '[e-mail]');

// Fill the address field
I.fillField({ id: 'address' }, '1234 Main St');

// Fill the address2 field
I.fillField({ id: 'address2' }, 'Apartment or suite');

// Select the country
I.selectOption({ id: 'country' }, 'United States');

// Select the state
I.selectOption({ id: 'state' }, 'California');

// Fill the zip field
I.fillField({ id: 'zip' }, '12345');

// Check the "Shipping address is the same as my billing address" checkbox
I.checkOption({ id: 'same-address' });

// Check the "Save this information for next time" checkbox
I.checkOption({ id: 'save-info' });

// Select the payment method (e.g., Credit card)
I.checkOption({ id: 'credit' });

// Fill the name on card field
I.fillField({ id: 'cc-name' }, 'John Doe');

// Fill the credit card number field
I.fillField({ id: 'cc-number' }, '1234567890123456');

// Fill the expiration field
I.fillField({ id: 'cc-expiration' }, '12/23');

// Fill the CVV field
I.fillField({ id: 'cc-cvv' }, '123');

// Click the "Continue to checkout" button
I.click({ css: '.btn-primary' });

日本語で入力してもらった結果

日本語で入力してもらいましたが、「John Doe」に代わる値で入力はしてもらえない感じでした。

日本語で依頼してみた

日本語で入力してくれましたが、違うそうじゃないって感じの結果が返ってきました😅

まとめ

便利そうではありますが、生成されるコードでもミスがあるので、注意が必要です。

実行に失敗したコードを自己修復してくれるプラグインがあったり、他の機能もあるので試したら紹介します。