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:
2) Let’s google search for ‘Applitools for Selenium IDE’ and click on the below search result as shown below:
3) In the displayed Chrome Web Store for ‘Applitools for Selenium IDE’ plugin page, click on ‘Add to Chrome’ button as shown below:
4) In the displayed dialog, click on ‘Add Extension’ button as shown below:
5) Observe that the ‘Applitools for Selenium IDE’ is added to the Chrome Browser as shown below:
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:
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:
8) Create an Applitools account by providing the details in the below-displayed page and click on ‘Create Account’ button as shown below:
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:
10) On logging in, click on ‘User’ icon and select ‘My API Key’ option as shown below:
11) In the displayed ‘Your API Key for running tests’ dialog, click on ‘Copy’ option and click on ‘OK’ button as shown below:
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:
13) It will ask you to open Selenium IDE as shown below:
14) Click on ‘Selenium IDE’ icon option on the Chrome browser and observe that the Selenium IDE is opened as shown below:
15) Click on ‘Create a new project’ option as shown below:
16) Given any project name say ‘Project1’ in the displayed ‘Name your new project’ dialog as shown below:
17) Enter the URL say http://omayo.blogspot.com/ into the ‘Playback base URL’ field and click on ‘Start Recording’ option as shown below:
18) Record any Test Scenario and click on ‘Stop Recording’ option as shown below:
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:
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:
Now enter any step name say ‘checking window GUI ‘ into the Target field as shown below:
Run the Test by clicking on the ‘Run Current Test’ option and observe that the Test will pass as shown below:
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:
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:
Also, more results on the Visual issue will be displayed in the Applitools page as shown below:
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)
- > Check complete Selenium Tutorial Contents here (Click here)
Please leave your questions/comments/feedback below.
Happy Learning ?
On a mission to contribute to the Software Testing Community in all possible ways.