You hold adjudicate to add the power of Seleniumautomated testingto your examine strategy, but are overwhelmed with how much learning is involved. The Selenium automation framework can be intimidating, and getting started with little to no experience can be a massive undertaking for any arrangement. The full news is that there is a outstanding way to get started with machine-driven functional examination and it ’ s not what you would expect:optic testing! 

Automated Functional Testing With Visual Testing

In this situation, I & # x27; ll take you through how you can use ocular testing to detect visual regressions and as a bonus, get automate functional screen out of it too.

Prerequisites:Sauce Visual, Screener Runner,and Javascript

In order to get started, you ’ ll need the Screener Runner Javascript parcel and Sauce Visual. I ’ ll part how using Sauce Visual, our ocular testing solution for detecting and reviewing visual change, can be used to automate optical and functional testing.

We ’ ll use the interaction testing capabilities provided in the Screener Runner bundle to execute functional examination, pared-down similar to what Selenium provides.

Interaction Testing

Screener Runner Interactions can be used for chatter push, hovering over elements, place values, and entering schoolbook, which are all utilise to check your components or pages are in their proper ocular state for the test. Functional testing through Screener Runner ’ s Interaction library is utilitarian for testing full web pages, individual components, and complete end-to-end flows.

To use interactions and create your functional exam, Screener Runner provides an API ring Steps. Each Step is an instruction to interact with the website. To see all available Steps, check out theGitHub repo. 

Example 1: Using screener-runner to beguile snap of a website

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

This simple tryout will use screener-runner to charge a website and take a snap.

module.exports = {
// total repository name for your project:
projectRepo: & # x27; mainconfig/stepsTest & # x27;,
// this example assumes Environment Variables name below exist on your system:
apiKey: process.env.SCREENER_API_KEY,
states: [
{
url: & # x27; https: //saucelabs.com/platform/visual-testing & # x27;,
name: & # x27; Visual Testing Page & # x27;
}
]
};

Example 2: Add interaction steps

Taking it up a pass, we ’ ll add interaction steps for functional flows. This exam will load up a demo website, enter a username and password, tick the login button, and occupy a snapshot.

var Steps = require (& # x27; screener-runner/src/steps & # x27;);
module.exports = {
// total repository gens for your projection:
projectRepo: & # x27; mainconfig/stepsTest & # x27;,
// this example assumes Environment Variables listed below exist on your system:
apiKey: process.env.SCREENER_API_KEY,
states: [
{
url: & # x27; https: //www.saucedemo.com/ & # x27;,
gens: & # x27; Sauce Labs & # x27;,
steps: new Steps ()
.setValue (& # x27; # user-name & # x27;, & # x27; standard_user & # x27;)
.setValue (& # x27; # password & # x27;, & # x27; secret_sauce & # x27;, {isPassword: true})
.click (& # x27; .btn_action & # x27;)
.snapshot (& # x27; signed-in & # x27;)
.end()
},
]
};

In the snapshot captured, we can deem the interaction were successful since the image will display an inventory page, which is only visible after entering credential and clicking the .btn_action button.

Example 3: Additional browsers/resolutions

Finally, run optical test across multiple browsers and mobile resolutions by adding the “ browsers ” and resoluteness ” options:

module.exports = {
...
browsers: [
{
browserName: & # x27; chrome & # x27;
},
{
browserName: & # x27; firefox & # x27;
}
],
resolutions: [
& # x27; 1024x768 & # x27;,
{
deviceName: & # x27; iPhone X & # x27;
}
]
};

More options can be found in ourdocsand Screener Runner GitHubrepo.

Benefits of Visual Testing

Just like you would write a functional test to do a click action, an interaction test is able to check for the same behavior AND lead a snapshot of the page to ensure that it visually looks correct—getting a two for one deal!

This entail testers no longer have to compose and maintain thousands of line of code to verify if an element is thither, reducing the number of assertions. Testers are able to preserve a lot of time and use mechanisation to purely focalize on what a user sees.

Visual Testing and Screener Runner

Sauce Visual provides organizations the ability to chop-chop automate the testing of their web pages across multiple browsers and screen resolutions. It automatize detecting visual and functional regressions. When used with Screener Runner, an open-source examination contrabandist, users can run lightweight E2E try with a shortlist of Selenium-like interactions to perform visual tests on components and unharmed pages. It can be expend to test arbitrary URLs and perform elementary interactions and seizure optical snapshots.

Conclusion

As organizations are get out and developing their testing strategy, they may need to regard adding visual testing to the inclination. With a visual testing answer, like Sauce Visual combined with Screener Runner, they ’ ll be able to run basic functional tests and draw the benefits of optic testing. This will allow them to quickly get up and running while having the reportage that they need.