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).
Let’s 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 the page contains multiple entries for “test” and there’s a link to Wikipedia entry. Also, I want to make sure that the page contains links to 10 results pages.
OK, let’s go.
Let’s start with Jasmine tests, usual describe/it/expect.
Create a 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 the JS side, we need to create a Jasmine reporter that will collect the test results, bootstrapper 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 the 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 the data provider:
Results:
