Visual Review (Visual Regression Testing)

The best of the visual regression tools. As with most similar tools, it utilises selenium screenshots, and image diff tools, to measure change. The difference with this one is it’s smart gui regression tests management tool, and it’s api which enables a variety of framework to plug into it.

Visual Review (Visual Regression Testing)


Adding click-jacking and cross-site scripting protection

Two of the common found vulnerabilities found by the OWASP ZAP tool are missing X-Frame-Options and X-XSS-Protection response header values. These go some way to prevent clickjacking and cross-site scripting attacks. The fix is to add headers refs to the web server confirmation files. Below is example for Nginx (nginx.conf):

server { ...
location / {
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header X-Frame-Options "SAMEORIGIN" always;

Protractor: waiting before clicking

If you have been working with protractor, you may have come up with common issue of waits. Protractor should have this built in, but it doesn’t always get it right. So after attempting several different approaches, with partial successes, the code below (appears) to do a solid job. This example is in context of cucumberjs framework, but not dependant on it.

this.Given(/^I click the (.*) (button|filter|radio|tab|checkbox|link|icon|record|person|asset|accordion)$/, function (buttonName, buttonType, callback) {
var elm = element(by.css('#button_id'));
var EC = protractor.ExpectedConditions;
var isClickable = EC.elementToBeClickable(elm);
browser.wait(isClickable, 20000);;

Using “switch” to combine Cucumberjs step functions

Those who write automated tests all know that we commonly end up repeating code, especially as web pages tend to contain many common elements. Instead of ending up with blocks of step code that vary very little, using Switch is a neat way to combine steps. Switch checks for a certain value, then ascribes variables with certain values based on that.

Protractor and dropdowns with autocomplete

Commonly dropdowns that can be overly long, implement an “as-you-type” filter. This presents an issue, insofar as actual buttons need to be pressed to action the auto-completion.

this.Given(/^I select (.*) from (.*)$/, function (selection, dropdown) {
// click on dropdown field to initiate dropdown
element(by.css('.dropdown')).click().then(function () {
var dropdownField = element(;
//clear the as-you-type field if already populated
dropdownField.clear().then(function () {
// enter text to search dropdown values
sendKeys(dropdownField, selection);
// click TAB button to exit (populated) field
return dropdownField.sendKeys(protractor.Key.TAB);