Geeking out on things that excite us

Tags


Setting up Selenium UI tests with headless Chrome in Windows

20th August 2017

TL;DR

Simple step-by-step guide to setup automated UI tests with Selenium and headless Chrome in Visual Studio. We will also show you the proper way to crawl the web, while at it.

But why?

Even though unit testing is very useful for covering your business logic testing needs, some bugs in the user interface are very hard to find, and are often the ones that frustrate your users the most. Did you spend two months writing a cool new feature that allows people to insert-cool-feature-description-here, and just released it to your production servers? Well, too bad it broke your registration screen, you won't be getting new users to use it any time soon.

Wouldn't it be cooler if there was an easy way of testing all the critical functions and navigation paths of your web application magically, every time you made changes to your codebase? Well, Selenium Webdriver does just that: it loads your favorite browser (Internet Expl Chrome, of course!) and interacts with all the buttons, textboxes, links and javascript functions, as if you were standing there and doing it all by yourself. All you have to do is, ehm , write the tests!

By automating Chrome for parsing web pages, you also have another huge advantage: Chrome will happily execute all the javascript for you and render the page exactly as it would normally do. This makes it ideal for crawling web sites, even if they are using multiple ajax calls, delicate angular/react/ember/vue/you-name-it DOM manipulation or even complex single pages apps. The headless mode also means that no popup windows clutter your screen while also making the memory footprint much smaller, and can also be run in a non-graphical server environment.

But how?

Just follow these simple steps. They are so simple you really have no excuse not to give it a go right now!

1. Install Selenium WebDriver

The first thing you have to do is install Selenium Webdriver. Launch Visual Studio and create a new Unit Test project. Then open up nuget package manager and type:

PM> Install-Package Selenium.WebDriver  

This will add the necessary Selenium references to your project.

2. Install ChromeDriver

Next, you have to download ChromeDriver, the executable that implements the WebDriver wire protocol and actually controls Chrome from your code. It is developed by members of the Chromium and WebDriver teams, and can be downloaded from here. Make sure to download the latest version (2.31 as of this writing), one that supports Chrome 60. Once you download it, make sure to extract the single executable file in an easy-to-find location (e.g. c:\chromedriver)

3. Update Chrome

Support for launching Chrome in headless mode was introduced for Linux in version 59, and for Windows in version 60. So make sure you have updated Chrome to the latest version (to find out the current version, go to ⋮ -> Help -> About Google Chrome)

Let's crawl the web!

We now have everything we need in our arsenal to write UI tests. As a simple example, we will perform a sanity check by crawling Google's own search engine and verifying that it returns google.com as the first result for the keyword google.com (googleception!). In comparison, think how difficult this task would have been if you tried doing the same using WebClient and HTML parsing.

//Create a new ChromeOptions object and pass an argument 
//to activate headless mode
var options = new ChromeOptions();  
options.AddArgument("headless");  
//Launch ChromeDriver specifying the folder that contains 
//the chromedriver.exe executable (from step 2 above)
var driver = new ChromeDriver(@"c:\chromedriver", options);  
//Navigate to Google's homepage
driver.Navigate().GoToUrl("https://www.google.com/");  
//Find the search textbox using a CSS selector
var search = driver.FindElementByCssSelector("input[name='q']");  
//Type the search keyword and press Enter
search.SendKeys("google.com\n");  
//Find the first <cite> element
var cite = driver.FindElementByTagName("cite");  
//Check if the url is google.com
Assert.IsTrue(cite.Text == "https://www.google.com/");  
//Great success!

Wrapping it up

We have seen how easy it is to setup Selenium Webdriver and Chromedriver in order to control Chrome in headless mode for UI testing. This is also a great alternative for setting up a crawler that renders pages exactly the same as in the Chrome browser.

View Comments