Advanced Logger for UI Tests - now on NuGet Package!

[Microsoft_Testing_Team]

By @Edwin Hernandez 

Hello everyone,

We published on this blog some time ago a post about an Advanced Logger for UI tests. You can follow this link if you are interested in reading that post. For an improved version of that Logger that is now on a NuGet package, please continue reading for features, how to install it and a example:

Features:

• This logger can be added to a Selenium Test Project running on Visual Studio as a NuGet Package.
• The logger is compatible with Selenium, WinAppDriver and Xamarin iOS.
• The package makes available an AdvLogger class that can help you log messages into an integrated HTML file.
• The messages can contain screenshots (which expand on hover) and optional messages.
• Screenshots are embedded into single HTML for easier management.
• You can categorize your messages in 4 levels (info, warning, passed & error) and filter in/out as needed.
• The HTML log file is added to the TextContext as an attachment. This makes it part of the results file which you can see in Visual Studio and gets uploaded automatically to Azure DevOps if you are running your UI-test project from Azure DevOps.
• Adding an attachment to the TestContext was initially supported only for MSTest. Starting on version 1.0.0.9, this is now supported for NUnit.

If you want to know more about setting up a Azure Pipeline that contains a Selenium UI test project, please follow the link posted above, it has some intro into this topic. We also have a upcoming article about this that will be publish in the coming weeks.

Walkthrough

Now that we have seen the features, let's do a walkthrough of how to install it and use it on a sample Selenium C# project.

We are going to use a sample project that has a single test that validates that a "User is able to create a product review". The target app is a demo website of OpenCart.

The following would be our starting code:

The code has a Test Class and a single Test Method. All libraries related to Selenium and Test Libraries have already been imported into a Visual Studio MSTest Project. This project implements a Page Object Model for the design (if you want to learn more about selenium designs, please check this article).

The files on the solution would look like this:

The page classes contain the actual selenium code that interacts with the browser. This model allows for these classes to be reused and helps with maintenance.

Here is one of the page classes:

    public class StoreHome
    {
        public static void SearchItem(IWebDriver driver, string searchStr)
        {
            driver.FindElement(By.Name("search")).SendKeys(searchStr + Keys.Enter);
        }
 
        public static void LoadStoreHome(IWebDriver driver)
        {
            driver.Manage().Window.Maximize();
            driver.Url = "https://demo.opencart.com/";
        }
    }

The test class is as follows:

[TestClass]
    public class OpenCartTests
    {
        IWebDriver driver;
 
        [TestInitialize]
        public void Initialize()
        {
            driver = new ChromeDriver(@"C:\Users\edwinh\source\repos\BlogDemoNuget\BlogDemoNuget");
        }
 
        [TestMethod]
        public void OpenCart_ValidateReviewSubmision()
        {
            StoreHome.LoadStoreHome(driver);
 
            StoreHome.SearchItem(driver, "iphone");
 
            SearchResults.SortItemsBy(driver, 4);
 
            SearchResults.OpenItem(driver, 1);
 
            ItemPage.GotoReviews(driver);
 
            ItemPage.PostAReview(driver
                , "UITester", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget nisi a nunc varius dictum at sit amet diam. Donec posuere gravida dui vitae elementum. In efficitur sodales erat a consectetu"
                , 4);
 
            string msg = ItemPage.GetReviewMessage(driver);
 
            Assert.AreEqual("Thank you for your review. It has been submitted to the webmaster for approval.", msg);            
        }
 
        [TestCleanup]
        public void CleanUp()
        {
            driver.Quit();
        }

You can get this whole project by cloning it from this public GitHub repo here, which would include all the other page classes.

For now, please look at the OpenCart_ValidateReviewSubmision Test Method, as you can see, since this we are implementing the Page Object model, the test is relatively easy to follow.

First load the store page > then search for an item > sort the list > open the first item > go to reviews > and post a review. We additionally have a validation.

The test works as it is but Selenium and MSTest do not produce any kind of report other than passed/fail.

This is where the Advance Logger for UI-tests comes into play.

To add it first search for it from the NuGet Package Manager:

Install it and solve any dependency incompatibilities with your project.

Now that the library is available for your project, the following changes are needed:

1) Create a Test Context in your test class (but outside of your test method):

        private TestContext testContextInstance;
        public TestContext TestContext
        {
            get { return testContextInstance; }
            set { testContextInstance = value; }
        }

2) Initialize the AdvLogger

        AdvLogger.imageSize = 400;                                  
                  //In Pixels. Default is 300
        AdvLogger.includeSnapshootsForPassAndError = true;          
                  //Only Pass and Error levels include snapshots. Default is true.
        AdvLogger.onHoverImageSizeAsPercentageOfWindow = 50;        
                  //How big you want your screenshots to expand to. Default is 100% of browser screen width.
        AdvLogger.Current.LOGLEVEL = 1;                             
                  //Logger will include only messages at specified level or above. E.g. Level=1 means no filters
                  //levels: 1=info, 2-passed, 3-warning, 4-error

3) Add some Log Messages in your test method and page object classes

One of the Page Object classes:

    public class StoreHome
    {
        public static void SearchItem(IWebDriver driver, string searchStr)
        {
            driver.FindElement(By.Name("search")).SendKeys(searchStr + Keys.Enter);
            AdvLogger.Current.LogMessage("Passed", driver);
        }
 
        public static void LoadStoreHome(IWebDriver driver)
        {
            driver.Manage().Window.Maximize();
            driver.Url = "https://demo.opencart.com/";
            AdvLogger.Current.LogMessage("Passed", driver);
        }
    }

For a better report, you will need to add a LogMessage to each Page Object method, so that there is a sequence of screenshots or messages in your HTML report. LogMessage uses reflection to get the class and method name and uses this to build the report.

Test Method:

        [TestMethod]
        public void OpenCart_ValidateReviewSubmision()
        {
            AdvLogger.Current.InsertDividerForNewTest();
 
            StoreHome.LoadStoreHome(driver);
 
            StoreHome.SearchItem(driver, "iphone");
 
            SearchResults.SortItemsBy(driver, 4);
 
            SearchResults.OpenItem(driver, 1);
 
            ItemPage.GotoReviews(driver);
 
            ItemPage.PostAReview(driver
                , "UITester", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget nisi a nunc varius dictum at sit amet diam. Donec posuere gravida dui vitae elementum. In efficitur sodales erat a consectetu"
                , 4);
 
            string msg = ItemPage.GetReviewMessage(driver);
 
            Assert.AreEqual("Thank you for your review. It has been submitted to the webmaster for approval.", msg);
            
            AdvLogger.Current.LogMessage("Info", driver, "Validation passed");
 
            AdvLogger.Current.LogMessage("Info", driver, "REACHED END OF TEST CASE");
        }

You need to insert a New Test Divider at the start of your test method. The other two "Info" messages are optional but I think it gives the report a nice wrap up.

4) EndLogging to generate html

        [TestCleanup]
        public void CleanUp()
        {
            driver.Quit();
            var fileName = AdvLogger.Current.EndLogging(TestContext);
            System.Diagnostics.Process.Start("explorer.exe", fileName);
        }

EndLogging processes all the messages and screenshots into an HTML report and attaches it to the TestContext. Once it's in the TestContext it's part of the Results File in Visual Studio and it gets uploaded into Azure DevOps if you run this project as part of an Azure Pipeline.

Process.Start just opens up the report at the end of each test, this is optional.

The end result is an HTML report that would look like this:

I hope this Logger continues to help anyone that needs it. You can find these resources in the following locations:

NuGet Package URL: https://www.nuget.org/packages/AdvUITestLogger

GitHub Repository of the Project described above: https://github.com/edwin-hernandez-maynez/BlogDemoNuget

Please leave any questions in the comment are below. Thanks for reading!

P.S. We added support for NUnit:

NUnit Example

Starting with NuGet Package 1.0.0.9, the Logger supports NUnit (in addition to MSTest). The dependency on a test framework is only used when calling the EndLogging method to generate the report and attach it to the TestContext. 

You can find in this branch of the repo, an example implementing NUnit and the AdvUITestLogger:

https://github.com/edwin-hernandez-maynez/BlogDemoNuget/tree/UsingNUnit