Visual regression testing is the process of validating visual elements of an application or website to ensure that code modifications do not introduce any unexpected issues. It prevents the user interface bugs raised due to adding the new features to your application. It speed-up the development process and it is always good to automate it!
When regression testing is automated, it allows for checks into a variety of changes and frees up testers to conduct manual exploration into more unusual cases in the staging environment. The number of automated test coverage would increase the quality of existing functionality.
WebDriverIO is the next-generation test automation framework that is preferred by JavaScript developers for performing regression testing. This framework allows cross-browser and mobile test automation with Webdriver Protocol. As it has a lot of plugins and built-in services to run project-specific tests.
You can easily locate the WebdriverIO utility in nodejs. WebdriverIO is the easy way to write the test with Javascript in Behavior Driven Development (BDD) or Test-driven development (TDD). It manages the request/response using Selenium server via WebDriver Protocol. Visual Regression is one of the services provided by Webdriver API.
We are required to create a folder that keeps all Selenium test cases in one place. Type the following command in the terminal to create a test folder for this WebDriverIO tutorial.
mkdir -p ./test/specs
The next prerequisite for WebdriverIO will be a Test Script, which is a JavaScript file where you are going to write our Selenium automation testing script.
touch ./test/specs/myScript.js
WebdriverIO provides a test runner called wdio where you can run the script. It resides under the /node_modules/.bin directly.
./node_modules/.bin/wdio run wdio.conf.js
It will compile the wdio.conf.js and initialize the Selenium testing suite as per configuration specification. It will execute the tests mentioned in the spec file. The list spec file mentioned in the wdio.conf.js
Let’s write the Selenium automation testing script using the WebDriverIO. Initial configuration is done by following the steps mentioned above. You can use the below script to start off. Copy the below code and paste in the myScript.js file.
describe('Validate the blog link working as expected in crestdatasys.com website', () => {
it('The title should be present on Blogs page', () => {
browser.url(`https://www.crestdatasys.com/`)
$('nav').$('a=Resources').waitForDisplayed();
$('nav').$('a=Resources').click();
$('nav ul[aria-expanded="true"]').$('a=Blogs').waitForClickable();
$('nav ul[aria-expanded="true"]').$('a=Blogs').click()
$('h1.elementor-heading-title').waitForDisplayed();
expect($('h1.elementor-heading-title').getText()).toEqual("Blogs");
});
});
WebdriverIO test scripts are ready to run on local system
./node_modules/.bin/wdio run wdio.conf.js
OR
npx wdio wdio.conf.js –spec test/specs/myScript.js
Performance of the WebDriverIO tests for the website would be the best in real cloud devices and you can expect accurate results. So it’s highly recommended to run the automation suites in a real cloud environment and validate the website quality, cross browser compatibility, and the performance of user behaviour it offers.
The real world expects faster delivery with optimal software quality from the testing team. The Selenium automation testing gives the option to achieve the goals in a shorter time with precise output. The same scripts can validate the single website across the different platforms.
In this Visual regression testing with WebdriverIO blog, you’ve seen that the WebDriverIO setup is very easy to follow. There are a bunch of other features available to explore with WebDriver IO. Additionally, 3rd party services which can be connected to cloud-based services. Hope you found this WebDriverIO blog informative. You can find more detailed technical information on https://webdriver.io/
Feel free to share this article with your peers and help them in their journey of learning automation testing. In case of any doubts or questions, do reach out to us in the comment section below. That’s all for now. Happy Testing!!!
Nadir Riyani is a Technical Project Manager at Crest Data Systems, bringing over 15 years of experience in software development to his role. He has a proven track record of delivering successful software products across a range of domains, including Fintech, security, manufacturing and transportation. At Crest Data Systems, Nadir has worked extensively with cloud providers and frameworks such as AWS, Azure, GCP and Splunk.
