When automated Selenium Integration UI tests such as Regression tests or Smoke tests runs, the controlled browser window never failed to annoy me. This forced me to do some research on automated tests using Headless browsers.

I started writing tests using amazing phantomJS , sooner found out that the maintainer of PhantomJS announced that he is stepping down as maintainer in favour of Google Chrome Headless.

Google added support for headless testing in Version 59.

Download source code for this article

The source code is available in Github repository., the readme file contains additional information about setting up your environment and running tests.

Build and Test status

This github repository uses Travis CI
Link to travis ci build page

What is headless Integration testing

Headless testing is basically running UI integration tests on a browser without the Head a.k.a User interface.

Why should we care about< it?/h3>

1. Can run UI tests from Headless Linux box, CI agents and Build Agents

This is so far my most liked feature. I can literally run all my tests in my ubuntu server box, no need to set up a build agent on another computer. I have also added my tests project in Travis Ci and it works perfectly fine.

2. No visible user interface at all

When integration tests run in Build agents or CI environments, usually nobody looks at the browser window to see what it is doing.

3. Better performance

As headless testing does not have a user interface, it can avoid all draw operations. Which mean more cpu cycles for real computing. Even though headless chrome is not faster than real chrome, as it doesn’t have to render the pixels to screen; there is a performance difference.

How to do Headless testing

Integration testing with headless chrome is very similar to integration testing with regular chrome. In my test project I used .net core, xUnit.net, selenium chrome driver, and Google Chrome browser. The main difference is the ChromeOptions that you pass into new ChromeDriver() function.

1. Create chrome driver

    private ChromeOptions desiredCapabilities;
    private string googleUrl;
    private ChromeDriver chromeDriver;
    desiredCapabilities = new ChromeOptions();
    desiredCapabilities.AddArgument("--headless");
    desiredCapabilities.AddArgument("--no-sandbox");
    desiredCapabilities.AddArgument("--ignore-ssl-errors=true");
    desiredCapabilities.AddArgument("--ssl-protocol=any");
    desiredCapabilities.AddArgument("--disable-gpu");
    desiredCapabilities.AddArgument("window-size=1400,600");

    googleUrl = "https://www.google.com";

    chromeDriver = new ChromeDriver(
      Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location), 
      desiredCapabilities
    );

The --headless and --disable-gpu essentially makes the browser session headless.

2. Create tests using ChromeDriver

I created 2 tests, 1 to verify is Google site is up, second verify user can enter a search string and search for it.

  [Fact]
  public void GoogleHomePageVerifyPageIsLoading()
  {
    chromeDriver.Navigate().GoToUrl(googleUrl);
    var pgTitle = chromeDriver.Title;
    chromeDriver.Quit();

    Assert.Equal("Google", pgTitle);
  }

  [Fact]
  public void GoogleHomePageVerifyUserIsAbleToSearch()
  {
    chromeDriver.Navigate().GoToUrl(googleUrl);
    IWebElement searchInputBox = chromeDriver.FindElement(By.Name("q"));
    searchInputBox.SendKeys("codewithdot.net");
    searchInputBox.Submit();
    var pgTitle = chromeDriver.Title;

    chromeDriver.Quit();

    Assert.Equal("codewithdot.net - Google Search", pgTitle);
  }

3. Run the tests

Clone my git repository

Enter following in a terminal. If you dont have git-scm, install it from here

    git clone https://github.com/shibut12/headless-integration-testing-csharp-chrome.git
Restore dependencies

If you see my csproj file, you can see that I have following dependencies for this project.

    
    
    
    
    
    

Restore them running following command on terminal window.

    cd headless-integration-testing-csharp-chrome
    dotnet restore 
Run Tests

Run dotnet test on terminal window to run all tests.

Got questions?

If you have any questions, please feel free to leave a comment on this post