Testing with CasperJS - Part 3

Reading time ~3 minutes

In the previous tutorials ( 1 and 2 ) we have seen how to install CasperJS and make our first script. Today we are going to start writing tests with the API that CasperJS provide and doing some navigation between pages. To do that we will add a new model in our website:

public class InformationRequest
{
    public int InformationRequestId { get; set; }
    public string Name { get; set; }
    public string Surname { get; set; }
    public string Email { get; set; }
    public string Request { get; set; }
}

Now, using the capabilities of Visual Studio 2012 and ASP.NET MVC, we could make a new controller and views easily to create a form to request information. Add a new controller using the template which uses Entity Framework.

[caption id="attachment_73" align="alignnone" width="604"]add new controller add new controller[/caption]

Don't worry about the Data Context, we will not use it. Now we have a skeleton of controller methods and views to submit the form. Remove any reference to Entity Framework and the edit, delete, and list methods and views. Your project must look like the one in this screenshot

[caption id="attachment_75" align="alignnone" width="566"]solution explorer solution explorer[/caption]

The controller must have this code

public class InformationRequestController : Controller
{
    public ActionResult Index()
    {
        return RedirectToAction("Create");
    }

    public ActionResult Create()
    {
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(InformationRequest informationrequest)
    {
        return View("Thanks", informationrequest);
    }
}

And the Thanks.cshtml view is a very simple view with this markup

@model TestCasperJS.Models.InformationRequest

@{
    ViewBag.Title = "Thanks";
}

<h2>Thanks</h2>

Thanks @Model.Name @Model.Surname for contacting us. We will contact you as soon as possible.

<br/>

@Html.ActionLink("Return to index", "Index", "Home", null, new {id="returnToHomeLink"})

Finally, let's add the new option to main menu

<li>@Html.ActionLink("Information", "Index", "InformationRequest", null, new {id="informationRequestMenuLink"})</li>

Ok, now we can start writing our tests. Lets start with a simple assert. Go to the javascript file where your are writing the tests and put the following code

var url = 'http://localhost:8000/';
casper.start(url, function() {
    this.test.assert(this.getCurrentUrl() === url, 'url is the one expected');
});

casper.run(function () {
    this.test.done();
    this.echo("Done.").exit();
});

If you execute the file as usual

casperjs testCasperjs.js

The output should be

[caption id="attachment_80" align="alignnone" width="677"]test1 test 1[/caption]

Great! We have our first test passing.

Now, we will do the same same assertion than in the previous article, but using the test API.

casper.then(function() {
    this.test.assertResourceExists('error.js', 'error.js script was loaded');
});

And the output should be

[caption id="attachment_82" align="alignnone" width="677"]test 2 test 2[/caption]

Let's continue with our first interaction. We will click a link in the main menu and assert that we have navigated to the correct page.

casper.then(function() {
    this.click('#informationRequestMenuLink');
});

casper.then(function() {
    this.test.assertTitle('Information request', 'the page has the correct title');
});

The output should be:

[caption id="attachment_83" align="alignnone" width="677"]test 3 test 3[/caption]

Now we will fill a form, submit it and check that we are in the correct page.

casper.then(function() {
    this.fill('form', {
        'Name': 'John',
        'Surname': 'Smith',
        'Email': 'jsmith@example.com',
        'Request': 'Example request'
    }, true);
});

casper.then(function() {
    this.test.assertTextExists('Thanks John Smith', 'page body contains "John Smith"');
});

With the last parameter of the fill function we are telling CasperJs that we want to submit the form.

The ouput should be

[caption id="attachment_84" align="alignnone" width="677"]test 4 test 4[/caption]

That's great!

Finally we will return to the main page and assert than a particular selector exists to ensure that we are in the main page.

casper.then(function () {
    this.click('#returnToHomeLink');
});

casper.then(function() {
    this.test.assertSelectorExists('ol[class=round]', 'there is an ol with round class');
});

And the output should be.

[caption id="attachment_85" align="alignnone" width="677"]test 5 test 5[/caption]

We have seen how to use the test API from CasperJS and how to make a basic but useful interaction. I recommend you to take a look at the great documentation that CasperJS has. It's really good and has lots of information.

In the next tutorial we will see how to integrate this tests results into a Team Foundation Server build.

See you soon!

A simple Azure Function using F#

The other day my friend [Jero](https://twitter.com/jerolba) wrote an [article](http://www.jerolba.com/mujeres-y-hombres-y-serverless/) ex...… Continue reading

Definition of X

Published on March 24, 2017

Cargo cult

Published on March 16, 2017