Introduction
In the first part of this series, we discussed how to set up PhantomCSS and CasperJS, and we ran a basic test.
In this part, we shall discuss each section of a CasperJS test, and customizing PhantomCSS, CasperJS and relevant functions required in basic visual regression tests.
Below are the customizations and functions we will generally need in a test case. For a basic test structure, please refer to Part 1 of Visual Regression Testing with PhantomCSS and CasperJS.
1. Customizing PhantomCSS
phantomcss.init({
//mention the folders for the particular test case
screenshotRoot: '/var/qa/screenshots/mytest',
failedComparisonsRoot: './failures/mytest',
comparisonResultRoot: './results/mytest',
//customize the mismatch tolerance level for a specific test
//there are videos and dynamic content on the page
mismatchTolerance: 0.50,
rebase: casper.cli.get('rebase')
});
2. Initialize Phantom web page instance
start() creates and initializes a Phantom web page instance, and initializes the resources array, history and logs. Generally, one should use start() first and then proceed to using the then*() functions family.
casper.start();
3. Adding steps to the stack
Next, you can start using the then*() functions. Refer to http://docs.casperjs.org/en/latest/. thenOpen() will add steps to the stack.
casper.thenOpen('http://mytest.com/user', function() {
this.fill('form#user-login', {
'name': 'admin',
'pass': ‘password’
}, true);
});
});
4. Adding a wait step
Add a wait function to allow the page to load completely before taking a screenshot for comparison. Here, 1000 = 1 second.
casper.wait(2000, function() {
this.echo("I've waited for 2 seconds.");
});
5. Defining the viewport size
By declaring the viewport size, we can take screenshots for different screen sizes (eg: iPhone, iPad, tablet, smartphone, etc).
casper.viewport(1024, 768);
6. Taking a screenshot for the body and elements on the page
//Function to take a screenshot for the body
casper.then(function() {
// take the screenshot of the whole body element and save it
// under "mytest.png" the first parameter is the CSS selector
phantomcss.screenshot('body', ‘mytest’);
});
//Similarly, to take a screenshot for a particular element, specify the css-selector as below:
casper.then(function() {
// take the screenshot of the CSS selector under test. phantomcss.screenshot(‘css-selector’, `elementname`);
});
We hope you’ve found this post helpful. Leave a comment below if you have any questions!
Bring this dispatch into a working session - one page in, scoping memo out.
Brief Foyer