Images from test logs in TeamCity

TeamCity_TestStackTrace_Images.md

#Selenium Screenshots in TeamCity results The idea is to show a screenshot below the stack trace of a failed test.

#Make you test output image to logs I used an s3 account for uploading failed test screenshots.

Using Specflow on AfterScenario if the test failed I log a screenshot. These are then displayed in the TeamCity logs and in the stack trace of failed test.

        [AfterScenario]
        public void TearDown()
        {
                if (this.ScenarioContext.TestError != null)
                {

public static readonly IAmazonS3 Client = new AmazonS3Client(new BasicAWSCredentials("", ""), RegionEndpoint.EUWest1);

var takesScreenshot = driver as ITakesScreenshot;

if (takesScreenshot != null)
{
	var request = new PutObjectRequest
	{
	    BucketName = "regression/images",
	    Key = key,
	    FilePath = filePath
	};
	var response = Client.PutObject(request);


	Console.WriteLine(response.HttpStatusCode != HttpStatusCode.OK
	    ? "Error uploading to S3"
	    : string.Format("http://somethinglikes3/images/{0}", key));
}

#Configure TeamCity

• Install TeamCity extension https://confluence.jetbrains.com/display/TW/StaticUIExtensions
• Goto C:\ProgramData\JetBrains\TeamCity\config\_static_ui_extensions on the TeamCity Server
• Add new rule to static-ui-extensions.xml

  <rule place-id="TEST_DETAILS_BLOCK" html-file="test-images.html">
    <url equals=""/>
    <url starts=""/>
  </rule>  

• Add file with name test-images.html
• Add the content below to the file. Replacing imagePathStart = 'http://somethinglikes3/images/' with the file directory of your images.

<ul class="image-block" style="background-color: #ffffff; margin-top: 1em; padding: 10px;  border: 1px solid #ffffff; font-size: 14px;"></ul>

<script>

	  (function () {
		

		window.setTimeout("function locations(substring, string) { var a = [], i = -1; while ((i = string.indexOf(substring, i + 1)) >= 0) a.push(i); return a; } jQuery('.image-block').each(function() { var imagePathStart = 'http://somethinglikes3/images/' var div = jQuery(this);  console.warn(div.html()); if(div.html() == ''){ stackTraceHtml = div.parent().children('.testBlock').first().children('.fullStacktrace').html(); var urls = locations(imagePathStart, stackTraceHtml); for (var i = 0; i < urls.length; i++) { var endPosition = stackTraceHtml.indexOf('_screenshot.png', urls[i]); var imageUrl = stackTraceHtml.substring(urls[i], endPosition + 15); if (imageUrl.indexOf('html') == -1) { div.append('<li><a target=\"_blank\" href=' + imageUrl + ' ><img height=\"500px\" src=' + imageUrl + ' /></a></li>') } }} } );",500);
	  
	})(); 
</script>