QAチームのメンバーにCodeceptJSのE2Eテストスクリプトを配布し実行できるよう準備を進めています。
普段コーディングしないメンバーへの配信となるため、Node.jsやVSCodeのセットアップを含めて、レクチャーが必要となります。
詳しい説明は省き、CodeceptJSのテスト実行環境を手早く構築することを目的として、記事を書いていきます。
私自身も開発職ではないので、プログラミングスキルは初心者レベルですので、間違った理解をしている箇所があるかもしれませんので、あらかじめご留意ください。
環境
職場は、Windowsですので、Windows10で説明しています。
Node.js をインストールする
公式サイトから、LTS版（.msi 形式）をダウンロードします。
ダウンロードしたファイルを実行して、インストールします（設定はデフォルトのまま）。
インストールが完了したら、コマンドプロンプトを起動して、Node.jsがインストールされていることを確認します。
node --version
VSCode をインストールする
VSCode のインストールは検索すればたくさん出てくるので、割愛します。
CodeceptJS をインストールする
ローカルに~~codeceptjs~~ MYCCJSフォルダーを作成します。
2021/10/14 修正
codeceptjsという名称の場合、パッケージ名と重複するため、後述のnpx create-codeceptjs .に失敗することを確認しました。
VSCodeを起動し、codeceptjsフォルダーを開きます。
ターミナル＞新しいターミナルを起動します。
次のコマンドを実行し、ワークスペースを初期化します。
npm init -y
package.json が作成されたことを確認します
次のコマンドを実行し、CodeceptJSをインストールします。
npx create-codeceptjs .
2021/10/14 追記
proxy 環境下の場合は、npmにproxy設定が必要です。
※VSCodeから開いたターミナルなどうまくいなかったため、コマンドプロンプトを起動し、以下コマンドを入力後に、
改めてnpx create-codeceptjs .を実行して回避した。
※SETコマンドは開いたコマンドプロンプト上でしか有効にならないことに注意すること。
npm config set https-proxy http://proxy:8080
npm config set proxy http://proxy:8080
npm config set registry "http://registry.nmpjs.org/"
SET ELECTRON_GET_USE_PROXY=true
SET GLOBAL_AGENT_HTTPS_PROXY=http://proxy:8080
SET HTTPS_PROXY=http://proxy:8080
SET HTTP_PROXY=http://proxy:8080
次のコマンドで実行すると、質問形式で答えることでcodeceptjsの初期化をします。
npx codeceptjs init
What helpers...? Playwright
Do you want localizaiton...? ja-JP
最初のテストスクリプトを作成して実行する
次のファイルを作成します。
ファイル名の末尾は必ず_test.jsとしてください。
Feature('Yahoo_test');
// Ver.3 系
Scenario('my_test', ({I}) => {
I.amOnPage('https://www.yahoo.co.jp/');
});
// Ver.2 系
//Scenario('my_test', (I) => {
// I.amOnPage('https://www.yahoo.co.jp/');
//});
次のコマンドを実行します。
ブラウザが起動し、コンソールの実行結果が、OK 1passedになれば成功です。
npx codeceptjs run yahoo_test.js
まとめ
お疲れさまでした。
いかがでしたでしょうか。
今回は、Windows10環境に、CodeceptJSを構築してテストスクリプトを実行する手順をご説明いたしました。
次回は、codecept.conf.jsファイルのパラメーターについて見ていきたいと思います。