How to run Jasmine tests as nUnit tests and test sites you don’t own.

Problem:
We’ve been using a 3rd party tool to generate a page, and I had to test some data there.
Since I had no knowledge of the DOM (it would be preferable to think of it as a black box), I couldn’t really use traditional tools that would validate the presence of certain elements on a page. A better way would be to inject a script into a page and validate the content of some global variables.

In my scenario it also would be preferable to keep test code separate from the site being tested and treat it as something I don’t own (it’s being built by another team, so it would be easier).

So I want to be able to inject my Jasmine tests into a page; I want to see the list of tests as NUnit tests.

Solution:

TLDR: Selenium’s WebDriver allows to inject and execute scripts on a page.

I’ve used WebDriver to inject Jasmine core and my tests to a page, all running in PhantomJS browser (but there’s support for Chrome, Firefox, Opera, IE and Safari too).

Lets test a Google search page.

Create a new project (I’ll use class library).
In a NuGet, add these:
Selenium WebDriver
JSON.NET
PhantomJS (if that’s what you planning to use)
jQuery

If you’ll be using NUnit:
NUnit
NUnit Test Adapter

Doesn’t have to be NUnit, of course, can be pretty much any other testing framework.

I’ve used JasmineJS from CDN (https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.js), the one from NuGet didn’t work (if someone has time to figure out why and why they’re different I’d be curious to know).

Also I’ve used TypeScript, so I will install definitions for jquery and jasmine.

I going to load a page (say https://www.google.com/search?q=test), and write tests that will verify that page contains multiple entries for “test” and there’s a link to Wikipedia entry. Also I want to make sure that page contains links to 10 results pages.

OK, lets go.

Lets start with Jasmine tests, usual describe/it/expect.
Create new JS file, write your tests.

Important: All JS files must be copied to output directory. Set “Copy to Output Directory” in file options to “Copy if newer”.

On a JS side we need to create a Jasmine reporter that will collect the test results, bootsrapper to wire up the jasmine, and tests.

Collector will take spec results after each spec is run, and push them into an array. When all specs are done it will set a status variable to “Finished”.

Bootstrapper will wire up the jasmine:

We’ll also need a one-liner to actually run tests:

jasmine.getEnv().execute();

And actual tests:

OK, we’re done with client side, lets make jasmine show up as NUnit tests.

C# classes that will contain results from Jasmine

Then we need a test data provider, which will run jasmine tests and collect the results:

And at last, the actual test that will pull data from data provider:

Results:
tests

Solution on GitHub

Leave a Comment

Your email address will not be published.