I must admit, the inaugural time I heard about headless browser testing, I had zero knowledge of the technology. As I started to memorise more about headless browser testing and liken it withSelenium, it quickly arrive to my attention that both are different, and both receive different objective. There is no rivalry or battle; both testing model serve a purpose in your delivery chain.

A headless browseris a web browser without a graphical exploiter interface. Headless browsers provide automated control of a web page in an environment similar to popular web browsers, but are executed via a command line interface or utilize web communication.1) “Headless browser – Wikipedia, the gratis encyclopedia. ” 2015. 1 Jun. 2016

Seleniumis a portable software testing framework for web covering. Selenium also supply a record/playback tool for author tryout without memorize a test scripting language.2) “Selenium (software) – Wikipedia, the complimentary cyclopedia. ” 2011. 1 Jun. 2016

Let ’ s direct a closer look at CasperJS (headless browser testing framework) and how we can add another testing stratum to our delivery chain.

What is CasperJS?

CasperJSis a JavaScript scripting and testing framework establish on top of PhantomJS (WebKit) and SlimerJS (Gecko). What is a WebKit, and what is Gecko? WebKit is an open source browser locomotive for rendering web page in Safari, Chrome, and Opera. Gecko is the Firefox browser locomotive. The web browser engine renders content such as HTML, XML, images, and formats info (CSS). CasperJS is a prove utility for functional sailing, page status, network monitoring, screen seizure, and scraping data off the web page. CasperJS allows assertions, which are an easy way to trail failed test.

Handful of CasperJS Functions To Ease Testing

The CasperJS API has an extensive collection of features uncommitted. The almost significant of the features is the quizzer module. For one of my recent projection, I wanted a lightweight pre-commit exam to check the pageHTTP status codificationafter deployment. Calling theassertHttpStatus ()function was a unadulterated testing solution for me. Here is a lean of all the CasperJS modules:

Module

Description

Casper

Easy way to create Casper instance and passing Casper option

Clientutils

Client-side utility are injected in the remote DOM environment

Colorizer

Generates ANSI colouration output on the console screen

Mouse

Mouse operations like moving, tick, double-clicking, rollover, etc.

Tester

Unit and functional examination asseveration

Utils

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Simple helper functions

I highly recommend you assure out the onlineAPI documentationwhen measure a headless browser testing framework before making your net decision. The CasperJS online documentation is hands-down one of the best-documented testing frameworks out there. Each part has an splendid description with an example.

Writing a Simple HTTP Status Test

To get started, you involve to properlyinstall Casper, and then we can compose our first page http condition code tryout.

Let ’ s dive right into it. For the sake of this clause, I have initialized the substructure URL variable and a few arrays for links, page rubric, and page by gens inside the test file.

[code language= ” js ”] var baseUrl = ‘;

var linkup = [& quot; /resources & quot;, & quot; /features & quot;, & quot; /our-values & quot;, & quot; /enterprise & quot;,];

var saucePageTitles = [& quot; Sauce Labs: Resources & quot;, & quot; Sauce Labs: Features & quot;, & quot; Sauce Labs: Values & quot;, & quot; Sauce Labs: Enterprise-grade testing on Sauce & quot;,];

var saucePageByName = [& quot; Resources & quot;, & quot; Features & quot;, & quot; Company & quot;, & quot; Enterprise & quot;]; [/code]

To keep it simple, the test will fulfill each element of the array. The function‘casper.start().repeat(nTimes, function () ’Begin to run the test and will duplicate (loop) through the test a afford act of times. The varying nTimes touch the act of elements in the ‘ links ’ array (which is 4). Then function‘casper.thenOpen(baseUrl + links [i], use () ’will open a new location, which in our example is the baseUrl + links [0] () and execute assertions and screen capture lines of code within the use. Lastly, the virtually important function‘casper.run(function () ’runs the unhurt suite of steps and executes a recall when they ’ ve all be perform.FYI – Casper rooms will not run without a ‘ run () ’ function.

[code language= ” js ”] casper.test.begin (‘ Sauce Labs Pages HTTP Status Code ’, function suite (exam) {

var i = 0; var nTimes = links.length;

casper.start () .repeat (nTimes, function () {

casper.thenOpen (baseUrl + links [i], function () {var status = this.currentHTTPStatus; var title = this.getTitle ();

// Assertionstest.assertTitle (saucePageTitles [i], saucePageByName [i] + ‘ has the right rubric ’); test.assertHttpStatus (200, ’ HTTP Status: ‘ + position + ‘ – ‘ + baseUrl + join [i]);

// Capture the current screenvar currentPageName = saucePageByName [i] .toLowerCase (); this.capture (‘ ./screenshots/mlb- ‘ + currentPageName + ‘ -pg-httpstatus.png ’); console.log (”); i++;});});

casper.run (function () {test.done ();});}); [/code]

Now that we have created an HTTP condition test, let ’ s run it.

Run CasperJS Test from Command Line

[codification language= ” js ”] casperjs test tests/httpstatus.js [/code]

Example: Console for SUCCESSFUL Tests

[codification language= ” js ”] Test file: tests/httpstatus.js # Sauce Labs Pages HTTP Status CodePASS Sauce Labs Pages HTTP Status Code (NaN test) PASS Resources has the right titlePASS HTTP Status: 200 –

PASS Features has the right titlePASS HTTP Status: 200 –

PASS Company has the correct titlePASS HTTP Status: 200 –

PASS Enterprise has the right titlePASS HTTP Status: 200 –

PASS 8 examination executed in 20.644s, 8 passed, 0 failed, 0 dubitable, 0 skipped. [/code]

Example: Console for FAILED Test

[codification language= ” js ”] FAIL Enterprise has the correct title # type: assertTitle # file: tests/sauce/httpstatus.js:28 # code: test.assertTitle (saucePageTitles [i], saucePageByName [i] + ‘ has the correct rubric ’); # study: & quot; Sauce Labs: Enterprise-grade testing on Sauce & quot; # expected: & quot; Sauce Labs: Enterprise & quot; FAIL 7 tests executed in 19.263s, 6 legislate, 1 miscarry, 0 doubtful, 0 skipped. [/code]

It is easy to see that the console output for successful and failed tests are informational. I ’ ll focus principally on the failure exception heap tincture, which provides enough info on why the CasperJS assertion failed. It clearly identifies that the page title response doesn ’ t match the expected page title delimit inside the test.

Conclusion

The main inspiration behind this clause was to help everyone identify that both headless and real browser testing are different. I also want to prove how simple it is to write an http status test, and show that headless browser screen serves a purpose of everyone in the uninterrupted integration line. It takes a minimum amount of effort to design an acceptance test suite through CasperJS.

Greg Sypolt (@ gregsypolt) is a Elderly Engineer at Gannett – USA Today Network and co-founder of Quality Element. He is a passionate mechanization engineer seeking to optimize software development quality, while coach squad members on how to compose outstanding automation scripts and helping the testing community become better testers. Greg has spend most of his career working on software quality—concentrating on web browsers, APIs, and mobile. For the past five years, he has focused on the conception and deployment of automated test strategies, frameworks, tools and platforms.