LoginSignup
1
2

CodeceptJS : 思ったよりJavaScriptでE2Eテストスクリプト作成が簡単

Posted at

Codeceptjsとは

1.png

CodeceptJSとはテスト自動化のフレームワークです。Webアプリをテストするだけでなく、Appiumというエミュレータを使うことでモバイルアプリのテストも自動化できるそうです。

  • 初心者でも簡単に書ける
  • コーディングが複雑ではない
  • 同期的なテスト API の取り扱いもスムーズ

E2E テストが何か分からない方のために少し説明します。E2Eテストとは、ユーザーの実際の利用環境に基づき、システムが正しく動作するか・データフローが適切に機能するかどうかを、システム全体を通して検証するテストです。総合テストフェーズで実施されるもので、UIテストと呼ばれることもあります。

CodeceptJSを使う理由は

  1. シンプルな構文
    CodeceptJSはシンプルでわかりやすい構文を提供し、I.click()、I.see()など、開発者がコードを書きやすく理解しやすいように設計されています。

  2. 失敗時にスクリーンショット撮影
    CodeceptJSは何も設定していなくてもテストが失敗したときに自動的にスクリーンショットを残してくれます。

  3. Page Object & Step Objectを利用してCode Structureを管理しやすい
    コードの保守性が向上し、再利用性が高まり、可読性が向上します。これにより、テストスイートの管理が容易になります。

  4. Allureレポートのサポート
    Allureを使うとテストの実行結果だけではなく、スクリーンショットやテストケース毎の実行時間など様々な角度からテスト結果をHTMLで確認することが可能になります。

CodeceptJS 利用するライブラリ・フレームワーク

2.png

準備

事前に

  • NodeJS v8.9以上
  • npm
  • vscode
    をインストールしておいてください。

使ってみましょう。

  • 最初はフレームワークをインストールします

3.png

  • CodeceptJSの初期設定

4.png

  • WebDriverIO選択

5.png

  • テストケース作成

6.png

  • コマンド実行すると Testcase が生成されます

7.png

コードの説明

"I.amOnPage" は、ウェブページを Google のページに開くように指示します。
"I.fillField" は、Google の検索ボックスに 'codeceptjs' というテキストを入力するように指示します。
"I.pressKey" は、キーボードの Enter キーを押すように指示します。
"I.wait" は、待機するように指示します。

動作確認

10.png

  • 確認しましょう!!

1_jeItjML8K3ORj2hCRJlFsQ.gif

結論

CodeceptJS は、JavaScript 上での E2E テストのもう一つの選択肢であり、理解しやすい構文を持ち、それほど難しくない。他のツールとは異なる利点や欠点がありますが、次回以降、CodeceptJS を実際のプロジェクトでどのように使用できるかを段階的に共有していきますので、お楽しみに。

でも、Codeceptjsのドキュメントを読むだけで簡単に実装できます!
http://codecept.io
http://codecept.io/basics/
https://github.com/codeception/codeceptjs/

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2