VisualStudioとSpecFlowでSeleniumとPhantomJSでUIテストの開発効率をちょい足しで激上げする方法

ニッチすぎるテーマですが、ニッチだからこそ情報が少なく、欲している人はいるのではないかと思ったのでのせときます。

と言ってもやることはシンプルでたった１つです。

だけど自分がふと思いついて試しに組み込んでみたら凄く便利でした。

テストが失敗したらその時の画面を見れば原因特定が早い

しかし、PhantomJSではヘッドレスなので画面は見れません。

ChromeDriverを使えば実行中は見れますが、操作が奪われるし、奪い返すと失敗します。

最近だとChromeのInspectorを立ち上げると失敗します。

画面をキャプチャー

Seleniumを使うと実行中の状態をキャプチャーできてpng画像としてエクスポートできます。

var ss = ((ITakesScreenshot)WebDriver).GetScreenshot();
ss.SaveAsFile(fileName, ImageFormat.Png);

このキャプチャーを利用します。

テストエクスプローラにはテスト結果が表示されます

この時点で何をどうするか分かったと思います。

MSTestなどでテストするとテストエクスプローラにテスト結果が出ます。

失敗したテストを選択すると、アサーションなどに出力されたエラーが表示されます。

このエラーを表示する内容に、先ほどの画面キャプチャーを組み込むことで、

テストが失敗したらエラーメッセージから失敗時の画面のキャプチャー画像を見ることができます。

コード

コードが見やすいように不要コードは取り除きました。

Definitions.cs

public string CaptureWebPageToFile(string filePath)
{
  // ページイメージをファイルに保存する
  var now = DateTime.Now;
  Screenshot shot = null;
  do
  {
    shot = ((ITakesScreenshot )WebDriver).GetScreenshot();
    if(DateTime.Now - now >= TimeSpan.FromSeconds(10))
    {
      throw new SpecFlowException( "キャプチャに10秒以上かかりました。" );
    }
  }while(shot.AsByteArray.Length == 0 );

  shot.SaveAsFile(filePath, ImageFormat.Png);
  return filePath;
}

private void AreNotEqual<L, R>(L lhs, R rhs, string msg)
{
  try
  {
    Assert.AreNotEqual(lhs, rhs);
  }
  catch (AssertFailedException e)
  {
    Assert.AreNotEqual(lhs, rhs, CreateErrorMessage(e, msg));
  }
}
private void Fail( string msg)
{
  try
  {
    Assert.Fail(msg);
  }
  catch (AssertFailedException e)
  {
    Assert.Fail(CreateErrorMessage(e, msg));
  }
}
private string CreateErrorMessage( AssertFailedException e, string msg)
{
  return string.Format("\n{0} \nURL:{1} \nSS:{2}\n" , msg ?? "" , WebDriver.Url, TestUtil.ConvertUrlFromPath(CaptureWebPageToFile()));
}

TestUtil.cs

public static string ConvertUrlFromPath(string path)
{
  var absPath = Path.GetFullPath(path);
  return "file:///" + absPath;
}

コード簡単に説明

• CaptureWebPageToFileがスクショを作成するメソッドです。
• AreNotEqual, Failメソッドが失敗時にスクショのファイルパスを自動で組み込むメソッド群です。
• 必要に応じて増やします。

まとめ

たったこれだけで、失敗したらエラーメッセージだけでなくキャプチャのパスも表示されます。
パスはクリックするだけで画像ビューワーが立ち上がります。
何気なく思いついた方法でしたが、これを組み込んでから失敗時の原因特定がだいぶ楽になりました。

以上になります。