Webテスト(npm test)が失敗し、エラーが発生した時にスクリーンショットを取る方法(コード)をご紹介。
※私はMacですが、多分Windowsでもここに書いてある手順でいけるはずです。
環境(Angular、node、Visual Studio Code)
コードはTypeScriptで書き、フレームワークはAngularを使います。
IDEは何でもいいですが、TypeScriptを書くなら早くて便利なVisual Studio Codeがおすすめです。
参考にしたページ
英語のページですが、Google翻訳で日本語にすれば何をするかは読み取れます。
実装（コード）
まず、始める前にnodeをインストールしてください。
ディレクトリ作成
Visual Studio Codeを使って説明します。
最初にディレクトリを作成します。
gistd3a009b5327c6a5569c0bd2d59a6a2d0
ディレクトリ作成後
protoractorとかjasmineとかインストール
ProtractorAutomationフォルダ配下で下記のコマンドを実行。
gistf0b82b720b719ab2b6aa17ddde92fee0
package.json作成
ProtractorAutomation配下にpackage.jsonを作成します。
gist6e4d9596967f58d44cc8fd2e130d051a
tsconfig.json作成
ProtractorAutomation配下にtsconfig.jsonを作成します。
gist258208ad6b6fce7835e747cad6561da0
package.jsonとtsconfig.jsonファイルを作成後
テストコード作成
specsフォルダの下にFistSpec.tsを作成
gist3e398abf2965bfbc90fb7a1c3834314c
config.ts作成
ProtractorAutomation配下にconfig.jsonを作成します。
gist885f01660570102867038bf021ffba3c
正常にWebテスト(npm test)ができる事を確認
selenium起動
gistca62c6518f05da858e6cd48a63bcb928
プラスマークをクリックしてコマンドプロンプトをもう１つ開きます。
Webテスト実行
gist9944cacb77ce0081cbde6e4e63e48b57
テスト1件(1 spec)、エラー0件(0 failures)で無事Webテスト完了です。
ScreenShotを撮る仕組み
次にScreenShotを撮る仕組みを作ります。
jasmine_reporter.ts作成
ProtractorAutomation配下にjasmine_reporter.tsを作成します。
gist424f8bb734249e26cd924cc69128c302
config.tsの修正
以下のコードをconfig.tsに上書きしてください。
gist977e151fc850346470581b6eebb968dd
FistSpec.tsの修正
11行目の’3’を’0’に修正
Webテスト(npm test)失敗でスクリーンショットを取る
seleniumをもし落としてる場合は、もう一度コマンドプロンプトで”webdriver-manager start”を実行してseleniumを起動してください。
その状態で、”npm test”を実行。
“reports/screenshots”フォルダが作成され、スクリーンショット(pngファイル)があればOKです。
Webテスト失敗時のスクリーンショットを撮る事ができました！！
Gitにソース登録しました。
コメント