CodeceptJS (+ Puppeteer) を触ってみた
きっかけ
今までSelenium WebDriverでE2Eテストを書いてきました。
が、開発チームから「もっと楽に書こうよ」という話が出て調べてみたところ、CodeceptJSが良さそうなので触ってみた話。
CodeceptJS + WebDriverも出来るようですが、Puppeteerの方が手軽で実行速度も速いようなのでPuppeteerを選択。
ただクロスブラウザやBrowserStackでテストをしたいので将来的にはWebDriverに移行予定。けど今じゃない。
CodeceptJSの何が良かったのか
- テストコードが自然言語っぽく書けて誰でも読みやすい
- 要素指定が簡単で分かりやすい(良い意味で雑に書ける)
- プラグインが充実してる
- WebDriverとかPuppeteerとか複数のヘルパーに対応してる
インストール + 初期設定
$ npm init -y
$ npm install codeceptjs puppeteer --save-dev
$ npx codeceptjs init # ここから対話形式
? Where are your tests located? (./*_test.js) # 指定のファイル名を自動でテストファイルと認識してくれる
? What helpers do you want to use? (Use arrow keys) # Puppeteerを選択
WebDriver
❯ Puppeteer
TestCafe
Protractor
Nightmare
Appium
Playwright
? Where should logs, screenshots, and reports to be stored? (./output) # スクリーンショット等の出力先
? Do you want localization for tests? (See https://codecept.io/translation/) (Use arrow keys) # 日本語を選択
pl-PL
zh-CN
zh-TW
❯ ja-JP
de-DE
English (no localization)
pt-BR
(Move up and down to reveal more choices)
? [Puppeteer] Base url of site to be tested (http://localhost) # ドメイン以降が同じ構成で、ドメインでテスト環境や本番環境を分けている場合はBase URLを指定すると便利
? [Puppeteer] Show browser window (Y/n) # テスト時にブラウザを表示するかどうか
? [Puppeteer] Browser viewport size (1200x900) # ブラウザサイズ
$ npm init -y
$ npm install codeceptjs puppeteer --save-dev
$ npx codeceptjs init # ここから対話形式
? Where are your tests located? (./*_test.js) # 指定のファイル名を自動でテストファイルと認識してくれる
? What helpers do you want to use? (Use arrow keys) # Puppeteerを選択
WebDriver
❯ Puppeteer
TestCafe
Protractor
Nightmare
Appium
Playwright
? Where should logs, screenshots, and reports to be stored? (./output) # スクリーンショット等の出力先
? Do you want localization for tests? (See https://codecept.io/translation/) (Use arrow keys) # 日本語を選択
pl-PL
zh-CN
zh-TW
❯ ja-JP
de-DE
English (no localization)
pt-BR
(Move up and down to reveal more choices)
? [Puppeteer] Base url of site to be tested (http://localhost) # ドメイン以降が同じ構成で、ドメインでテスト環境や本番環境を分けている場合はBase URLを指定すると便利
? [Puppeteer] Show browser window (Y/n) # テスト時にブラウザを表示するかどうか
? [Puppeteer] Browser viewport size (1200x900) # ブラウザサイズ
一旦ここで初期設定は終了です。初期設定が終わると必要なファイルやフォルダが作成されます。
npx codeceptjs init
がうまく行かない場合があるようなので、その場合は代わりにnode node_modules/.bin/codeceptjs
を実行します。
作成されたファイルの中のcodecept.conf.js
に上記で設定した内容が書かれています。もちろん後からも内容変更可能です。
続いてテストケースファイルの作成が対話形式で行われます。
Almost ready... Next step:
Creating a new test...
----------------------
? Feature which is being tested (ex: account, login, etc) # テストケースファイル毎に付けられる名前
? Filename of a test (『上で付けたFeature名』_test.js) # ファイル名
なお、この対話形式のテストケースファイル作成は、初期設定後に以下のコマンドでも呼び出せます。
$ npx codeceptjs gt
以下が作成されたテストケースファイルの中身です。
(ここではFeatureをQiita Test
とし、ファイル名をQiita_Test_test.js
としています)
Feature('Qiita Test'); // ? Feature which is being tested で指定した名前
Scenario('test something', (I) => {
});
作成されたファイル・フォルダは以下になります。
.
├── codecept.conf.js
├── jsconfig.json
├── node_modules
├── output
├── package-lock.json
├── package.json
├── Qiita_Test_test.js
├── steps.d.ts
└── steps_file.js
テストケースの書き方
最初にも上げましたが、CodeceptJSは自然言語っぽく書くので、テスト内容が分かりやすいです。
また要素指定もボタン名とかを書くと、いい感じに要素特定してくれて素敵です。具体的にはこんな感じになります。
Feature('Qiita Test');
Scenario('test something', (I) => {
I.amOnPage('https://qiita.com/'); // 指定URLにアクセスして
I.seeInTitle('Qiita'); // ページタイトルが「Qiita」になっていることを確認して
I.see('How developers code is here.'); // 画面上に「How developers code is here.」と表示されていることを確認して
I.click('マイルストーン'); // 「マイルストーン」と書かれているところをクリックして
I.wait(1); // 1秒待って
I.seeCurrentUrlEquals('https://qiita.com/milestones'); // URLが期待値通りか確認して
I.saveScreenshot('Qiita01.png', true); // スクリーンショットを撮る(撮ったファイルはoutputフォルダの中に入る)
});
詳しくはTesting with Puppeteer | CodeceptJSを参照してみてください。
テスト実施
テスト実施方法は複数あります。
まずは基本パターンです。
最初の初期設定? Where are your tests located? (./*_test.js)
で設定したファイル形式のファイルをすべて実行します。
$ npx codeceptjs run
#### 以下結果 ####
CodeceptJS v2.6.6
Using test root "xxxxxxxxxxxxxxxx"
Qiita Test --
✔ test something in 6668ms
OK | 1 passed // 9s
指定のファイルのみ実施したい場合はファイル名を指定します。
$ npx codeceptjs run [ファイル名]
上記のやり方だとテスト成功した場合、詳しい結果が分かりません。
なので詳しく知りたい場合は以下の3つの方法で実施します。
--steps
をつけるとテストケースっぽく出力されます。
$ npx codeceptjs run --steps
#### 以下結果 ####
CodeceptJS v2.6.6
Using test root "xxxxxxxxxxxxxxxx"
Qiita Test --
test something
私は ページを移動する "https://qiita.com/"
私は タイトルに文字が含まれるか確認する "Qiita"
私は テキストがあるか確認する "How developers code is here."
私は クリックする "マイルストーン"
私は 待つ 1
私は U r lが等しいか確認する "https://qiita.com/milestones"
私は スクリーンショットを保存する "Qiita01.png", true
✔ OK in 7568ms
OK | 1 passed // 11s
もっと詳しく実施。
$ npx codeceptjs run --debug
さらに詳しく実施。
$ npx codeceptjs run --verbose
詳しい使い方はReporters | CodeceptJSを参照してみてください。
レポート
プラグインを導入するとかっこいいレポートを出力できます。
インストール
$ npm install -g allure-commandline --save-dev
codecept.conf.js
のplugins
にallureを追加します。
// 編集前
plugins: {
retryFailedStep: {
enabled: true
},
screenshotOnFail: {
enabled: true
}
}
// 編集後
plugins: {
retryFailedStep: {
enabled: true
},
screenshotOnFail: {
enabled: true
},
allure: {
enabled: true
}
}
起動
レポート出力するには以下のようにallureを有効にしてテストを実施します。
$ npx codeceptjs run --plugins allure
output
フォルダがある場所(=codecept.conf.js
がある場所)で以下のコマンドを実行してレポートサーバを立ち上げます。
$ allure serve output
するとブラウザが自動で立ち上がり、レポートが表示されます。
レポートサーバーはCtrl+c
で終了です。(macの場合)
まとめ
Puppeteerはどの文字が2つ続くのか毎回分からなくなる
We're hiring!
AIチャットボットを開発しています。
ご興味ある方は Wantedlyページ からお気軽にご連絡ください!
参考
Testing with Puppeteer | CodeceptJS
Reporters | CodeceptJS
Plugins | CodeceptJS
E2Eテストの面倒くさいことはCodeceptJSにお願いしよう - Qiita
E2EテストでWEBサイトをチェック(CodeceptJS × Puppeteer) | HAFILOG
Author And Source
この問題について(CodeceptJS (+ Puppeteer) を触ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/takeh/items/8ea694c6e8513b062210著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .