フリーランス チャレンジ!!

フリーランス チャレンジ!!

現役フリーランスエンジニアが書く雑記ブログ

【Angular】Webテスト(npm test)が失敗した時のスクリーンショットを撮る方法

スポンサーリンク

スポンサーリンク

Webテスト(npm test)が失敗し、エラーが発生した時にスクリーンショットを取る方法(コード)をご紹介。

 

※私はMacですが、多分Windowsでもここに書いてある手順でいけるはずです。

 

 

環境(Angular、node、Visual Studio Code)

コードはTypeScriptで書き、フレームワークはAngularを使います。

 

IDEは何でもいいですが、TypeScriptを書くなら早くて便利なVisual Studio Codeがおすすめです。

 

参考にしたページ

www.webdriverjs.com

 

www.webdriverjs.com

 

英語のページですが、Google翻訳で日本語にすれば何をするかは読み取れます。

 

 

実装(コード)

まず、始める前にnodeをインストールしてください。

nodejs.org

 

ディレクトリ作成

Visual Studio Codeを使って説明します。

最初にディレクトリを作成します。

gistd3a009b5327c6a5569c0bd2d59a6a2d0

 

ディレクトリ作成後

f:id:ksakae1216:20190304221732p:plain

 

protoractorとかjasmineとかインストール

ProtractorAutomationフォルダ配下で下記のコマンドを実行。

gistf0b82b720b719ab2b6aa17ddde92fee0

 

package.json作成

ProtractorAutomation配下にpackage.jsonを作成します。

gist6e4d9596967f58d44cc8fd2e130d051a

 

tsconfig.json作成

ProtractorAutomation配下にtsconfig.jsonを作成します。

gist258208ad6b6fce7835e747cad6561da0

 

package.jsonとtsconfig.jsonファイルを作成後

f:id:ksakae1216:20190304223044p:plain

 

テストコード作成

specsフォルダの下にFistSpec.tsを作成

gist3e398abf2965bfbc90fb7a1c3834314c

 

config.ts作成

ProtractorAutomation配下にconfig.jsonを作成します。

gist885f01660570102867038bf021ffba3c

 

正常にWebテスト(npm test)ができる事を確認

selenium起動

gistca62c6518f05da858e6cd48a63bcb928

f:id:ksakae1216:20190304224114p:plain

 

プラスマークをクリックしてコマンドプロンプトをもう1つ開きます。

f:id:ksakae1216:20190304224402p:plain

 

Webテスト実行

gist9944cacb77ce0081cbde6e4e63e48b57

f:id:ksakae1216:20190304224908p:plain

 

テスト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'に修正

f:id:ksakae1216:20190304230347p:plain

 

Webテスト(npm test)失敗でスクリーンショットを取る

seleniumをもし落としてる場合は、もう一度コマンドプロンプトで"webdriver-manager start"を実行してseleniumを起動してください。

 

その状態で、"npm test"を実行。

"reports/screenshots"フォルダが作成され、スクリーンショット(pngファイル)があればOKです。

Webテスト失敗時のスクリーンショットを撮る事ができました!!

f:id:ksakae1216:20190304231056p:plain

 

Gitにソース登録しました。

github.com