🦁

CodeceptJS✖️PlaywrightでE2Eテストを実装する

2024/10/08に公開

Playwright

はじめに

普段、Gauge×Playwrightを利用してE2Eテストを書いています。
Gaugeは受け入れテスト駆動開発として、markdownのテキストファイルから実行されるのはメリットですが、戻り値が管理しづらく他のものを探していました。CodeCeptJSがいいとのことだったので今回触ってみたいと思います！！

CodeceptJSとは

CodeceptJSはE2Eテストのフレームワークです。人が読むのに近い（Gherkinスタイル）でテストシナリオを記述できます。Webドライバーは持っておらず、PlaywrightやSeleniumなどのブラウザを操作するHelperを持っていません。それが故に色々なHelperツールと組み合わせる事ができます。

https://codecept.io/

チュートリアル実施

準備

~/develop/playwright-codeceptjs-demo$ npm init -y
~/develop/playwright-codeceptjs-demo$ npm install codeceptjs playwright --save-dev

プロジェクト作成

~/develop/playwright-codeceptjs-demo$ npx codeceptjs init

  Welcome to CodeceptJS initialization tool
  It will prepare and configure a test environment for you

 Useful links:

  👉 How to start testing ASAP: https://codecept.io/quickstart/#init
  👉 How to select helper: https://codecept.io/basics/#architecture
  👉 TypeScript setup: https://codecept.io/typescript/#getting-started

Installing to /Users/kawamurakouji/develop/playwright-codeceptjs-demo
? Do you plan to write tests in TypeScript? Yes
? Where are your tests located? 
? What helpers do you want to use? Playwright
? Where should logs, screenshots, and reports to be stored? ./output
? Do you want to enable localization for tests? http://bit.ly/3GNUBbh ja-JP
Configure helpers...
? [Playwright] Browser in which testing will be performed. Possible options: chromium, firefox, webkit or electron chromium
? [Playwright] Base url of site to be tested http://localhost
? [Playwright] Show browser window Yes

Steps file created at ./steps_file.ts
Config created at /Users/kawamurakouji/develop/playwright-codeceptjs-demo/codecept.conf.ts
Directory for temporary output files created at './output'
Installing packages:  typescript, ts-node, @types/node

added 17 packages, changed 1 package, and audited 1031 packages in 1s

89 packages are looking for funding
  run `npm fund` for details

4 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
TypeScript Definitions provide autocompletion in Visual Studio Code and other IDEs
Definitions were generated in steps.d.ts

 Almost ready... Next step:
Creating a new test...
----------------------
? Feature which is being tested (ex: account, login, etc) sample
? Filename of a test login_test.js
Test was created in ja-JP localization. See: https://codecept.io/translation/

Test for login_test.js was created in /Users/kawamurakouji/develop/login_test.js

--
CodeceptJS Installed! Enjoy supercharged testing! 🤩
Find more information at https://codecept.io

→途中で利用するブラウザやhelpersなどの設定がありました。プロジェクトに応じてカスタマイズしてください。本件では上記の用にセットアップしています！

~/develop/playwright-codeceptjs-demo$ tree -I node_modules 
.
├── codecept.conf.ts  // CodeceptJSの設定ファイル
├── output            // テスト結果やログファイル、スクリーンショットなどが出力されるディレクトリ
├── package-lock.json 
├── package.json
├── steps.d.ts        // TypeScriptの型定義ファイル
├── steps_file.ts     // CodeceptJSで使用するカスタムステップを定義するファイル
└── tsconfig.json

2 directories, 6 files

Goolge検索実施

sample_test.ts

Feature("sample");

Scenario("test something", ({ I }) => {
	I.amOnPage("https://www.google.com");
	I.see("Google");
	I.fillField("q", "CodeceptJS");
	I.pressKey("Enter");
	I.see("CodeceptJS");
	I.saveScreenshot("sample_test.png");
});

実行結果

~/develop/codecept_playwright$ npx codeceptjs run --steps
CodeceptJS v3.6.7 #StandWithUkraine
Using test root "/Users/kawamurakouji/develop/codecept_playwright"

google --
  test something
    I am on page "https://www.google.com"
    I see "Google"
    I fill field "q", "CodeceptJS"
    I press key "Enter"
    I see "CodeceptJS"
    I save screenshot "sample_test.png"
  ✔ OK in 1804ms

最後に

ConceptJSのチュートリアルを実施してみました。まだGaugeと比較するには何ともという感じなので、まだ試していこうと思います！

はじめに

CodeceptJSとは

チュートリアル実施

Goolge検索実施

最後に

Discussion