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

Angular

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

 

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

 

  • ScreenShotを撮る仕組み
  • Webテスト(npm test)失敗でスクリーンショットを取る
  •  

    環境(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

    コメント

    タイトルとURLをコピーしました