How to perform Visual Regression Testing using Protractor

Protractor is a NodeJS-based open source test automation tool, managed by Google Team. Protractor use Selenium Webdriver under the hood. As Protractor wind Selenium in its fabric, it is very easy to use and feature-rich. It is mostly used for End to end testing.

Using a Protractor for Visual Testing makes testing leisurely and quicker. Visual Testing works by comparing Base screenshots and actual screenshots. Visual Comparison postulate less coding noesis and less try.

This article explains Visual Regression Testing expend Protractor, covering two methods of Visual Validation Testing

Protractor Visual Testing using protractor-image-comparison

Pre-Requisite

Step by Step Guide to using Image Comparison in Protractor

Follow the stairs below to perform Visual Regression Tests in Protractor:

Step 1: Install protractor-image-comparisonNPM bundle

Using the below bid install the image comparison NPM packet

npm install -- save protractor-image-comparison

Step 2:Configure Protractor Image Comparison Plugin

Navigate toprotractor.config.js, which is typically located in the root of your Project. Add the below code to it.

//protractor.conf.js const {sum} = require ('path '); exports.config = {plugins: [{// The module name package: 'protractor-image-comparison ', alternative: {baselineFolder: join (process.cwd (), './baseline/ '), formatImageName: ` {tag} - {logName} - {width} x {height} `, screenshotPath: join (process.cwd (), '.tmp/ '), savePerInstance: true, autoSaveBaseline: true},},], framework: 'jasmine ', specs: ['./protractor-visualtest.js '], directConnect: true,}

In the above code,

• baselineFolder: Baseline icon folder name
• formatImageName: Image file name
• screenshotPath: Actual and diff image files path

Once you finish the above set up, write the simple persona comparison test.

Step 3:Write the Protractor Visual Test

//protractor-visualtest.js describe ('Protractor Visual Test Demo ', () = & gt; {it ('Navigate to BrowserStack Homepage ', async () = & gt; {await browser.waitForAngularEnabled (false); await browser.get ('https: //www.browserstack.com '); await browser.imageComparison.saveScreen ('examplePaged ', {/ * some options * /}); expect (await browser.imageComparison.checkScreen ('examplePaged ', {/ * some options * /})) .toEqual (0);});});

Let ’ s look at the above code

• await browser.get (& # 8216; https: //www.browserstack.com & # 8217;);: Navigates to https: //www.browserstack.com
• await browser.imageComparison.saveScreen (& # 8216; examplePaged & # 8217;, {/ * some pick * /});: Takes the screenshots for the screen
• expect (await browser.imageComparison.checkScreen (& # 8216; examplePaged & # 8217;, {/ * some options * /})) .toEqual (0);: Compares actual image with the foundation image

Step 4:Execute Protractor Visual Test

Use the below command to fulfill your protractor test

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

npx protractor protractor.conf.js

The initiative clip when you execute the test, it bewitch thebaseline screenshot, which helps to compare withactual screenshotin future tally.

Step 5:Run the test again to see the difference.

After the second run, you will see the genuine image beguile in .tmp folder.

If tests are successful, that means no divergence between the substructure screenshot and the existent screenshot, the console log establish the test passed result.

If there are any failure, so the console log evidence the failed test result.

Example of Failed Test Result

• Command-line yield

In the IE window. Inside the.tmp leaflet, the folder namediffwill be created, which contains the difference between both the images

• Explorer window output

Ocular Comparison in Protractor for Specific Element

You can execute Optic Testing in Protractor for Single Element using the protractor image comparison package. The package providesaveElement and checkElementfunctions. These two functions assist you to compare the specific element in the Visual Screenshot examination.

Sample code for Visual Testing Specific Element in Protractor

//protractor-visualtest.js describe ('Protractor Visual Test Demo ', () = & gt; {it ('Navigate to BrowserStack Homepage ', async () = & gt; {await browser.waitForAngularEnabled (false); await browser.get ('https: //www.browserstack.com '); await browser.imageComparison.saveElement (element (by.css (' a [href= '' /pricing ''] ')), 'PricingButton ', {/ * some options * /}); anticipate (await browser.imageComparison.checkElement (element (by.css (' a [href= '' /pricing ''] ')), 'PricingButton ', {/ * some pick * /})) .toEqual (0);});});

How to Perform Protractor Visual Testing Using Percy

Percy is a most popular tool for Visual Validation Testing. Percy provides an on-line dashboard that helps to reexamine, approve and disapprove the compared images. Percy provides ocular equivalence across the browser. This helps in cross-browser ocular establishment in the protractor.

Step by Step guide habituate Percy in Protractor

Step 1:Install the required parcel using the below command

npm install -- save-dev @ percy/cli @ percy/protractor

Step 2:Create a Simple Percy Test

Let & # 8217; s make a mere test to direct a screenshot of BrowserStack home page and validate them.

//protractor-visualtest.js const percySnapshot= require (' @ percy/protractor '); describe ('Protractor Visual Test Demo ', () = & gt; {it ('Navigate to BrowserStack Homepage ', async () = & gt; {await browser.waitForAngularEnabled (false); await browser.get ('https: //www.browserstack.com '); await percySnapshot ('BrowserstackHomePage ');});});

Step 3: Set the PERCY_TOKENenvironment variable

• Login to Percy using your credentials (If you don & # 8217; t have them already, create a new)
• Create a New Project
• Navigate to Project Settings
• Copy PERCY_TOKEN
• Set the environment variable

To set the environment variable, use the command below establish on your depot:

• Powershell

$ env: PERCY_TOKEN= '' & lt; your_token & gt; ''

• Windows Command Line

set PERCY_TOKEN= & lt; your_token & gt;

• Mac/Linx/Unix-based Terminal

export PERCY_TOKEN= & lt; your_token & gt;

Step 4:Execute Percy Protractor Visual Test utilise the below command

npx percy exec -- protractor protractor.conf.js

Wait until Execution completes, Once Execution is finish, the command line output will be shown with the shape URL.

Navigating to the build URL, you can watch the Test issue. Percy Dashboard Shows the difference if thither any as seen below

If there is no difference, Percy testify the message & # 8220;No Changes”

Protractor Visual Testing is the best way to quiz the User Interface of the web application, it & # 8217; s easy and not very time-consuming. The recent development in the protractor is not very telling.

Protractor Team Decided toStop the Developmentof the Protractor framework and stopped turn any new features. The community plugin which was endorse protractor also now stopped its growing. The plugin which we are using for the visual regression testingprotractor-image-comparisonis deprecated however it is available to establish but is not maintained.

Since Protractor is depreciated, you need to think of. When it comes to finding Protractor choice there are many in the market, but you need to think of migration effort and features they are offer.NightWatchJSis one such model, which has features close to the Protractor.

Just like Protractor, NightwatchJS is too make on top of Selenium so most of the features will be uncommitted in NightWatchJS as well. It ’ s worth exploring NightWatchJS when you look for a new framework after Protractor.

You can run using Percy, just like Protractor.

Try NightwatchJS

Related Guides