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.
First we are going to setup the project. We'll create a C# Console Application. And host a static website using Owin Self-Host.
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.
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.
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.
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.
- 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.
As expected is on Github
I had a lot of fun writing this and I hope you liked it. If you any remarks or feedback please post it below.