Geautomatiseerd browser testen met Selenium Webdriver

In dit artikel ga ik laten zien hoe je in Visual Studio geautomatiseerde testen kan schrijven door gebruik te maken van Selenium Webdriver.

Er zijn een aantal vereisten waar ten eerste aan voldaan moet worden, namelijk:

  1. Er moet een Webdriver (executable) voor de te gebruiken browser aanwezig zijn. In dit artikel ga ik uit van Google Chrome.
  2. Het pad (path) naar de executable moet zijn opgenomen in de ‘PATH’ systeemvariabele.

De Chrome webdrivers zijn hier te vinden:
http://chromedriver.storage.googleapis.com/index.html

Downloadt de laatste versie, pak deze uit en zet de .exe in een voor jou handige map. Zelf heb ik een aantal webrivers staan in: C:\Program Files (x86)\Microsoft Web Driver.

3-webdriver

Nu de Webdriver is gedownload, moet het pad hierheen worden toegevoegd aan de ‘Path’ systeem variabele. In Windows 8.x en 10 kun je dat doen door middel van de Win Key + X sneltoets, dan te kiezen voor Systeem (System) en vervolgens in het scherm dat is geopend klikken op ‘Geavanceerde systeeminstellingen’ (Advanced system settings). Klik vervolgens op de knop ‘Omgevingsvariabelen’ (Environment variables) en zoek dan ‘Path’ op tussen de systeemvariabelen en bewerk deze vervolgens als volgt:

4-path

Zoals je ziet heb ik een nieuwe variabele toegevoegd.
Klik op ‘OK’ en nogmaals op ‘OK’ en sluit als het laatste het configuratiescherm.

Oke, we kunnen nu aan de slag in Visual Studio.

Open Visual Studio (ik ga uit van 2015) als je dat nog niet hebt gedaan en start een nieuw Console project:

1-nieuw-project

Open vervolgens de Nuget Package Manager en zoek naar ‘selenium.webdriver’ en installeer vervolgens de laatste versie. Op dit moment is dat 2.53.0.

2-nuget

Voeg vervolgens de volgende ‘usings’ toe aan Program.cs:

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Remote;

En vervolgens de volgende code aan de ‘Main’ method:

RemoteWebDriver driver = null;
try
{
	driver = new ChromeDriver();

	// Ga naar google.nl
	driver.Navigate().GoToUrl("https://www.google.nl");

	// Zoek input box (q)
	var searchBox = driver.FindElement(By.Name("q"));
	searchBox.SendKeys(".net");

	// Screenshot maken
	var screenshot = ((ITakesScreenshot)driver).GetScreenshot();
	screenshot.SaveAsFile(@"ScreenShot1.png", ImageFormat.Png);

	// Zoeken
	searchBox.SendKeys(Keys.Enter);

        // Hou de browser open
	Console.ReadLine();

}
catch (Exception e)
{
	Console.WriteLine(e.Message);
}
finally
{
	driver?.Quit();
}

Voer het project vervolgens uit.

Als alles goed gaat wordt er een nieuw Chrome venster geopend, wordt er vervolgens genavigeerd naar https://www.google.nl. Dan wordt er ‘.net’ ingetypt in het zoekvenster (q). Vervolgens wordt er een screenshot van het browservenster gemaakt en daarna wordt er op de Enter toets gedrukt zodat er wordt gegoogeld naar ‘.net’.

Resultaat:

5-result

Voor de volledigheid staat hieronder de volledige code van Main.cs:

using System;
using System.Drawing.Imaging;
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using OpenQA.Selenium.Remote;

namespace ConsoleApplication1
{
    class Program
    {
        static void Main(string[] args)
        {
            RemoteWebDriver driver = null;
            try
            {
                driver = new ChromeDriver();

                // Ga naar google.nl
                driver.Navigate().GoToUrl("https://www.google.nl");

                // Zoek input box (q)
                var searchBox = driver.FindElement(By.Name("q"));
                searchBox.SendKeys(".net");

                // Screenshot maken
                var screenshot = ((ITakesScreenshot)driver).GetScreenshot();
                screenshot.SaveAsFile(@"ScreenShot1.png", ImageFormat.Png);

                // Zoeken
                searchBox.SendKeys(Keys.Enter);

                Console.ReadLine();

            }
            catch (Exception e)
            {
                Console.WriteLine(e.Message);
            }
            finally
            {
                driver?.Quit();
            }
        }
    }
}

Dit was in het kort een beschrijving van het gebruik van Selenium Webdriver met C#.

Meer info:
http://www.seleniumhq.org/projects/webdriver/
https://github.com/SeleniumHQ/selenium/tree/master/dotnet

Configuratie in ASP.NET Core 1.0

Dit artikel gaat uit van een MVC6 solution gebaseerd op de ‘Standard Web Application’ template.

Een van de dingen waar ik tegenaan liep bij het opzetten van een van een MVC6 (ASP.NET 5) website, was het opslaan en benaderen van applicatie-instellingen.
Microsoft heeft het principe van instellingen oplaan in ‘Web.config’ in de root van een website overboord gegooid en in plaats daarvan besloten alles in een ‘appsettings.json’ bestand weg te stoppen. Dit bestand bevindt zich trouwens nog steeds in de root van de website.
Zoals de bestandsextensie wellicht doet vermoeden, heeft dit bestand een JSON opmaak. Standaard ziet ’t bestand er ongeveer zo uit:

{
    "Data": {
      "DefaultConnection": {
        "ConnectionString": "Server=(localdb)\\mssqllocaldb;Database=aspnet5-MVC6-a8450846-4306-4af8-8577-0d0749193aaf;Trusted_Connection=True;MultipleActiveResultSets=true"
      }
    },
    "Logging": {
        "IncludeScopes": false,
        "LogLevel": {
            "Default": "Verbose",
            "System": "Information",
            "Microsoft": "Information"
        }
    }
}

We gaan hier nu onze eigen instellingen aan toevoegen, zodat het bestand er als volgt uit komt te zien:

{
  "Data": {
    "DefaultConnection": {
      "ConnectionString": "Server=(localdb)\\mssqllocaldb;Database=aspnet5-MVC6-a8450846-4306-4af8-8577-0d0749193aaf;Trusted_Connection=True;MultipleActiveResultSets=true"
    }
  },
    "Logging": {
        "IncludeScopes": false,
        "LogLevel": {
            "Default": "Verbose",
            "System": "Information",
            "Microsoft": "Information"
        }
    },
    "AppSettings": {
        "Setting1": "dit is setting 1",
		"Setting2": "en dit is setting 2"
    }
}

Uiteraard is dit maar een voorbeeld en ben je verder vrij in naamgevingen.

Nu we dit gedaan hebben, moeten we voor bovenstaande een Class toevoegen:

public class AppSettings
{
	public string Setting1 { get; set; }
	public string Setting2 { get; set; }
}

Zoals je ziet komen de eigenschappen van deze Class overeen met toegevoegde instellingen in ‘appsettings.json’. Dit is heel belangrijk!

We zijn nu klaar om de instellingen aan de app toe te voegen door middel van Dependency Injection.

Open ‘Startup.cs’ in de root van de website en zoek de methode ‘ConfigureServices’.
Voeg de volgende 2 regels toe aan de methode:

services.AddOptions();
services.Configure<AppSettings>(Configuration.GetSection("AppSettings"));

Injecteer de instellingen vervolgens op de volgende manier in een Controller of Service:

using Microsoft.Extensions.OptionsModel;
[...]

public class HomeController : Controller
{
	// App Settings
	private string _setting1;
	private string _setting2;
	public HomeController(IOptions<AppSettings> appSettings)
	{
		_setting1 = appSettings.Value.Setting1;
		_setting2 = appSettings.Value.Setting2;
	}

	// Index page
	public IActionResult Index()
	{
		[...]
	}
	
	[...]
}

That’s it! Je kunt nu instellingen uit ‘appsettings.json’ gebruiken.