HomeSelenium

Perform Visual Testing by Extending Selenium IDE with ‘Applitools for Selenium IDE’ plugin

Perform Visual Testing by Extending Selenium IDE with ‘Applitools for Selenium IDE’ plugin

As part of explaining all the new features in the latest Selenium IDE, I will explain extending the latest Selenium IDE with ‘Applitools for Selenium IDE’ for performing Visual Testing using Selenium IDE.

Before performing Visual Testing using Selenium IDE by extending it with ‘Applitools for Selenium IDE’ plugin, I will first explain the basic concepts and requirements for performing Visual Testing.

What is Visual Testing?

Visual Testing is performed to verify that an application’s GUI is visible correctly to its users.

Example: Using Visual Testing we can check whether a correct logo is displayed on the page. Visual Testing will check the GUI of the displayed logo against the required logo on the page and tell us whether the correct logo is displayed on the page.

Similarly, many such things can be visually identified by Visual Testing like Color of a button, Text Overlapping on UI elements, expected font, expected layout, rendering issues and many more.

Traditional automation testing is performed in a blind manner, where if a button needs to be clicked, the automation testing will only verify the existence of the button for clicking and whether the button is clicked successfully, etc. But if we add Visual Testing to this traditional automation testing, we not only test the working of the functionality but also the GUI of the buttons and the page on which the button is available will be verified along with the basic testing things in the traditional automation approach.

For more details on Visual Testing, you can go through the below article:

As you have now understood about Visual Testing, I will explain the implementation of Visual Testing from scratch in Selenium IDE.

Let’s get started.

Perform Visual Testing by Extending Selenium IDE with ‘Applitools for Selenium IDE’ plugin

Follow the below steps for understanding the implementation of Visual Testing in Selenium IDE:

1) Check whether the Selenium IDE is installed in your browser say Chrome by checking whether the ‘Selenium IDE’ icon option is displayed on the browser as shown below:

Visual Testing Selenium IDE - icon available

2) Let’s google search for ‘Applitools for Selenium IDE’ and click on the below search result as shown below:

Visual Testing Selenium IDE - search results applitools

3) In the displayed Chrome Web Store for ‘Applitools for Selenium IDE’ plugin page, click  on ‘Add to Chrome’ button as shown below:

Visual Testing Selenium IDE - Add to chrome

4)  In the displayed dialog, click on ‘Add Extension’ button as shown below:

Visual Testing Selenium IDE - Add Extension

5)  Observe that the ‘Applitools for Selenium IDE’ is added to the Chrome Browser as shown below:

Visual Testing Selenium IDE - Added

6) Click on ‘Applitools for Selenium IDE’ icon option on the browser and observe that is will ask for the account details as shown below:

Visual Testing Selenium IDE - Account details required

Note: In order to provide the above details (i.e. API Key), we need to first create an Account with Applitools by following the below steps.

7) Google search for ‘Create Account Applitools’ and click on the below-shown link from the search results:

Visual Testing Selenium IDE - Applitools Create Account

8) Create an Applitools account by providing the details in the below-displayed page and click on ‘Create Account’ button as shown below:

Visual Testing Selenium IDE - create account

Note: You will get an email for your confirmation. Once you confirm your email address you can log in to your Applitools account by following the below steps.

9) Navigate to the login page of Applitools using the link: https://applitools.com/users/login , enter your credentials  and click on ‘Sign In’ button as shown below:

Visual Testing Selenium IDE - Sign in

10) On logging in, click on ‘User’ icon and select ‘My API Key’ option as shown below:

Visual Testing Selenium IDE - My API Key

11) In the displayed ‘Your API Key for running tests’ dialog, click on ‘Copy’ option and click on ‘OK’ button as shown below:

Visual Testing Selenium IDE - Copy API Key

12) Click on ‘Applitools for Selenium IDE’ icon option on the browser, paste the above-copied API key into the field and click on ‘Apply’ button as shown below:

Visual Testing Selenium IDE - Apply API Key

13) It will ask you to open Selenium IDE as shown below:

Visual Testing Selenium IDE - open selenium ide

14) Click on ‘Selenium IDE’ icon option on the Chrome browser and observe that the Selenium IDE is opened as shown below:

Visual Testing Selenium IDE - opened Selenium IDE

15) Click on ‘Create a new project’ option as shown below:

Visual Testing Selenium IDE - Create a new project

16) Given any project name say ‘Project1’ in the displayed ‘Name your new project’ dialog as shown below:

Visual Testing Selenium IDE - project name

17) Enter the URL say http://omayo.blogspot.com/ into the ‘Playback base URL’ field and click on ‘Start Recording’ option as shown below:

Visual Testing Selenium IDE - Record

18) Record any Test Scenario and click on ‘Stop Recording’ option as shown below:

Visual Testing Selenium IDE - stop recording

19) In the displayed ‘Name your new test’ dialog, enter any test name say ‘Test1’ into the text field and click on ‘OK’ button as shown below:

Visual Testing Selenium IDE - Name Test

As we have extended Selenium IDE by installing ‘Applitools for Selenium IDE’ plugin, we can now execute Applitools commands in Selenium IDE by following the below steps.

20) Select any new step and enter any Applitool command say ‘eyes check window’ in the ‘Command’ field in Selenium IDE as shown below:

Visual Testing Selenium IDE - eyes window check

Now enter any step name say ‘checking window GUI ‘ into the Target field as shown below:

Visual Testing Selenium IDE - Target

Run the Test by clicking on the ‘Run Current Test’ option and observe that the Test will pass as shown below:

Visual Testing Selenium IDE - Passed

After completing the above execution, the test results for Visual Testing by Applitools will be automatically opened and displayed along with a GUI screenshot in the Applitools page as shown below:

Visual Testing Selenium IDE - Visual Testing Passed

Tomorrow when there are UI changes in the application and when you rerun the earlier recorded Selenium IDE Test, you will see that the Applitools step will fail in Selenium IDE as shown below:

Visual Testing Selenium IDE - Differences

Also, more results on the Visual issue will be displayed in the Applitools page as shown below:

Visual Testing Selenium IDE - Unresolved

To learn more about using ‘Applitools for Selenium IDEa’ plugin commands in Selenium IDE, you can go through the Tutorial – https://applitools.com/tutorials/selenium-ide.html

Here concludes the practical demonstration of Visual Testing using Selenium IDE by extending it with Applitools for Selenium IDE plugin.

In the next article, I will practically demonstrate another new feature in the latest Selenium IDE. (new features in the latest Selenium IDE)

Next Steps:

  • > Check complete Selenium Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning 🙂

About Me > Arun Motoori

On a mission to contribute to the Software Testing Community in all possible ways.

If you like this article, share it on LinkedIn using the below button:

Comments (2)

Leave a Reply

Your email address will not be published. Required fields are marked *