The Alpha post - Testing a WebComponent using C# Selenium

Introduction

To get started on nojaf.com we are going to write a post on End-2-End testing.
We'll create a custom WebComponent using Polymer. And write a test with C# Selenium.

I always like a good codename for my projects. On http://online-generator.com I found that SledgehammerSheep had a nice ring to it.

If a lot of things are new to you, I encourage to check out the provide links to better understand what's going on here.

Project Setup

First we are going to setup the project. We'll create a C# Console Application. And host a static website using Owin Self-Host.

Project setup

So the Startup.cs contains the Owin pipeline configuration.
We are basically telling Owin to serve the files inside the website folder as static content.
The bootstrapping of the Startup.cs happens inside Program.cs

Next up we shall create a test project and writing a failing unit test.

You are not allowed to write any production code unless it is to make a failing unit test pass.
~Uncle Bob

Added a Unit Test project to the solution

This test starts the owin webserver, launches Firefox and browses to the home page.
Once there it tries to find an element of <x-sheep></x-sheep>. It obviously fails because we didn't write our WebComponent yet.

Failing Unit test

Writing a WebComponent

A HTML5 WebComponent consists of four different apis.

To make advantage of all these great technologies, We'll be using Polymer. The current stable version of Polymer is 0.5 but we'll be working with the new 0.8 api in this demo. 0.8 is still in alpha but will do just fine for this demo.

bower install polymer

I've copied the source of polymer inside my website folder. And created my sheep.html page for my WebComponent.

Now we can verify that the test works.

Working test

Additional test

Lastly we want to write one last test to be sure that the value in the title attribute is the same as in the h2 tag. We actually already know that this works but for the sake of demo...

This works as expected.

Remarks

  • Firefox doesn't fully support WebComponents so that's why I had to bring in the webcomponents-lite polyfill.
  • When doing serious Selenium testing you don't want any Selenium code in your tests. It's better to create a framework.
  • You can run this example in Chrome, IE and Safari as well but you need to download additional drivers to do so.

The Source

As expected is on Github

Final words

I had a lot of fun writing this and I hope you liked it. If you any remarks or feedback please post it below.

Yours truly,
nojaf

Florian Verdonck
Florian Verdonck

Florian Verdonck is web & .NET developer. He is passionate about clean code and is eager to learn new technologies.