だらだらやるアドベントカレンダー9日目
2021 だらだらやるアドベントカレンダー9日目
ということで2021/12/09を担当させていただきます「SesamiSesa」です。
該当のアドベントカレンダーは以下を参照してください。
12/03も担当しているのでもしよろしければ。
https://sesamisesa.hatenablog.com/entry/2021/12/03
書く内容
今回は自動テストについて紹介できればと思います。
現在主に使っているのはcodeceptjsです。
codeceptjsとは
Node.js で動作するテストするためのフレームワーク。
細かく言うと、様々な操作ツールを統合して操作できるやつ。えらい。
具体的には
- Playwright
- WebDriver
- Puppeteer
- TestCafe
- Protractor
- Appium
ここら辺が同じ書き方でテストできますよ～ってこと。
構造はこちら
エンジニアの方が普段使っていたテストの書き方からそこまで乖離しないと思われる。
ちなみに私は手動テストあがりなので事前知識は皆無だった。無問題。
何ができるの
自動テストって言われてもつまるところ何ができるのか。
結論、ブラウザ操作にまつわるものはたいてい可能となっている。
手動でやることとなんら遜色なく実行できる。
- ページを開く
- 要素・テキストが存在するか確認する
- 要素を取得する(コード上で比較・操作するため)
- クリックする
- テキストボックスに入力する
- セレクトボックスから選択する
- 指定期間待機する
ここまであれば並大抵のことはできそう。
何がいいのか
自動でできることは分かったけど、じゃあ手動と比べてなにがいいのか？？
- 操作時にスクリーンショットを取ってくれる。
- 操作ログに日本語をつかってどんな操作を行ったか見返すことができる。
- クリックや要素取得時のパラメータ指定が容易
が手動と比べていいなと思った点。異論は認める。
手動→自動テスト以降ももちろんコストがかかるので上記メリットじゃそこまでそそられないかもしれない。
・・・・でもテストの結果を自動でスクリーンショットしてくれるってめっちゃうれしいとおもいませんか。各ページスクリーンショットを取ってエクセルに張り付けてテスト報告書としていたあの作業が簡単になるんです！
しかも画像にどの操作を行ったか記載してくれるという！
ここではそんなcodeceptjsの導入部分だけでも紹介できればと。
codeceptjsのインストール
1.Node.jsのインストール
npx --versionが実行できればよし
2.codeceptjsのインストール
作業フォルダを任意で作成し下記のコマンドを実行。
npx create-codeceptjs .
yを入力し、進める
インストール完了後、下記のコマンドを実行。
npx codeceptjs init
そのままEnterを押下。
Playwrightを選択し、Enterを押下。
そのままEnterを押下。
ja-JPを選択しEnterを押下。
そのままEnterを押下。
テスト実行中にブラウザで操作を見たい方はyを入力しEnterを押下。
ブラウザーエンジンの選択。今回はchromiumを使用するのでそのままEnterを押下。
どんなテスト名にするか。任意の文字を入れてEnterを押下。
ファイル名を聞かれるので、そのままで問題なければEnterを押下。
初期化完了。
3.下準備
メリットで述べたスクリーンショットを取ってもらうために、設定ファイルを編集する。
作成したフォルダ内の「codecept.conf.js」を開き、下記内容を追加し保存する。
"stepByStepReport": {
"enabled": true,
"deleteSuccessful": false,
}
次に、テスト内容を変更する。先ほど作成した「XXXX_test.js」を開き、下記内容を入力して保存。
I.amOnPage('https://google.com');
I.fillField('検索','codeceptjs');
I.click('Google 検索');
I.wait(2);
下準備完了！
4.実行
下記コマンドを実行！
npm run codeceptjs
ブラウザが立ち上がり、テスト終了後にoutputフォルダに実行結果が保存される。
あとは思うがままにテストを書いたり、プラグインで便利な機能を追加したりしてみよう。
