protractor (5)

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)


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);

Using filter to find element within an element in Protractor

One of the challenges of test automation is minimising dependencies on test data. For most tests, you don’t care which specific data you use, it’s usually based on criteria. For example, take this list of users.

Waiting for elements to appear/disappear with cucumberjs/protractor

The cucumberjs/protractor combination can be awkward, testing angularjs, and using chai-as-promised helped, but reliability still can become an issue. So I started to lean towards more purist protractor code in these circumstances, to get round issue that waits are not always intelligent in cucumberjs and chai-as-promised didnt always provide solution (but is still great extension!). This following code has proved a reliable wait function.

this.Given(/^I wait for something to finish$/, function () {
function waitForElementToNotBePresent(elementToWaitFor) {
		var EC = protractor.ExpectedConditions;
		var el = element(;
		return browser.wait(EC.visibilityOf(el));
// Or to check if element is not there, return browser.wait(EC.invisibilityOf(el));

What is happening here is that protractor is waiting for the element to be be present or not, on page, before completing current step action.