Automation Test With Selenium, .NET And Azure DevOps

Selenium + .NET is a good combination to create automated tests for web and desktop applications.

To create our first automation project for a web application, we only need to create a dotnet library using the following command (or using Visual Studio),

dotnet new classlib

After that, you must add a library for unit testing, you can use your favorite one. I suggest using xUnit because it is very simple and easy to implement. You can use the following command (or NuGet package manager in Visual Studio).

dotnet add package xunit

Then we need to add the Selenium library using the following command,

dotnet add package Selenium.WebDriver

Also, for web applications, you need to install a Chrome web driver. However, there are drivers for other browsers, but the chrome driver is always updated (it's recommended).

You can get it from this URL: ChromeDriver - WebDriver for Chrome (chromium.org)

And you need to install the Selenium Chrome web driver in your project using the following command,

dotnet add package Selenium.WebDriver.ChromeDriver

NOTE
ChromeDriver must be updated depending on the Chrome version. This is very important because the test is not going to start if you are using an old version. ChromeDriver version depends on the Chrome browser version.

At this point, you can start with your first test.

For this demo, we will perform a test over this Site - https://mango-flower-00e2aa010.azurestaticapps.net/

This is a simple React.js application where we can choose a color, the idea is to test if the div container is changing the background depending on the selected color.

To do this, we only need to create a chromedriver session, navigate to the site, and then using the FindElement method we can interact with the site.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.Extensions.Configuration;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using Xunit;

namespace dotnetseleniumdemo
{    public class ChangeColorTest
    {
        public IWebDriver driver; 

        public readonly string site;    

        public ChangeColorTest()
        {
            driver = new ChromeDriver();
            driver.Manage().Window.Maximize();
            site = "https://mango-flower-00e2aa010.azurestaticapps.net/";
        }

        [Fact]
        public void ChangeToBlueColor()
        {
            driver.Navigate().GoToUrl(site);
            System.Threading.Thread.Sleep(2000);
            var blueBox =  driver.FindElement(By.ClassName("color-blue"));
            blueBox.Click();
            System.Threading.Thread.Sleep(2000);
            var container =  driver.FindElement(By.ClassName("color-container"));            

            Assert.Equal("color-container color-blue", container.GetAttribute("class"));
            driver.Close();
            driver.Quit();
            driver.Dispose();
        }
     }
}

In the example, we are using classname to get the element using the method FindElement(By.ClassName()) but you can get the element ById, XPath, and others.

The Sleeps methods are useful to see the process with some delays and review how selenium navigate in the browser,

Also, it is very important to use Asserts to check if we got the expected result. Remember, you are creating a test, and even the whole workflow works the result could be wrong.

In this case, we are using xUnit and Assert.Equal method to verify the value. The method GetAttribute("class") is returning the current CSS class of the div container and "color-container color-blue" is the expected result,

Assert.Equal("color-container color-blue", container.GetAttribute("class"));

This is another example for red color but this time using XPath to get the element,

[Fact]
public void ChangeToRedColor() {
    driver.Navigate().GoToUrl(site);
    System.Threading.Thread.Sleep(1000);
    var redBox = driver.FindElement(By.XPath("//*[@id=\"root\"]//button[3]"));
    redBox.Click();
    System.Threading.Thread.Sleep(1000);
    var container = driver.FindElement(By.ClassName("color-container"));
    Assert.Equal("color-container color-red", container.GetAttribute("class"));
    driver.Close();
    driver.Quit();
    driver.Dispose();
}

Check out the code.