In this article, we will see how Applitools can help Business and Manual testers who had very less or no coding experience.
As a Business/Manual tester you might be testing every page of the web application manually. This testing can include functional or Ui component level testing.
Have you every thought of automating the same activities you do on daily basis? But have less coding experience or not interested in writing code to automate the web application? Well, Applitools has an excellent solution for you.
Integration of Selenium IDE and Applitools can make your life easy. This requires NO coding at all. Easy peasy!
All you need is knowledge on how to record the tests and ass checkpoints for Applitools to do Visual Check.
Before we get started –
What is Applitools?
Applitools is an application visual management and AI-powered visual UI testing and monitoring software.
What is Selenium IDE?
Selenium IDE is a record and playback tool designed to record your interactions with websites to help you generate and maintain site automation, tests, and remove the need to manually step through repetitive takes.
Now, lets get started –
- You will need either Google Chrome or Mozilla Firefox to install Selenium IDE extension / add-on.
- You can download it from –
I will be using Google Chrome for this article.
- Next, we need a free Applitools Account, so get one from here – https://applitools.com/
- Next we need to install Applitools for Selenium IDE extension. So lets download from Chrome Web Store – https://chrome.google.com/webstore/detail/applitools-for-selenium-i/fbnkflkahhlmhdgkddaafgnnokifobik?hl=en
- Once you install and click on the extension you will be prompted to add API key like below
- Now, login into Applitools and navigate to Profile –> My API key
Copy and paste it in the API Key field and leave the Server URL as it is.
- Click Apply
- Now the Selenium IDE has been configured with Applitools Eyes.
It’s time to get hands-on!!!
- Open Selenium IDE from Chrome browser
- Enter Project Name as SwagLabs
- Enter URL – https://www.saucedemo.com/
- Click Start Recording. You will be able to see a new Chrome browser opened with SwagLabs URL launched
- Now perform a Login and logout test. Keep in mind, every action you perform in this browser will be recorded by Selenium IDE so please do only actions that are required.
- Once you record the flow, your Selenium IDE will show the steps that you have performed like below –
- We need to tell Applitools to take screenshot and store it in the Applitools. It’s very easy, add new command called, “eyes check window”. So, next time when you run the test when this command executes, Selenium IDE will take screenshot and uploads to Applitools without any extra effort.
- This screenshot is called as Baseline Image in Applitools terminology. Next time when you run the test, the screenshot will be taken automatically and compared with this Baseline to check for any changes.
- Now, I have added 2 more eyes check window –
- Now, let’s run once and see how Applitools looks like –
- Now when you click the image, you will be able to see that there is NO baseline image and this becomes the baseline image for the next run.
- Now, let’s run it again – Applitools will consider the second run as the Checkpoint Image and compares it with Baseline image for any changes. In this case, no differences seen.
- But in the below case – differences are identified
Note: I have manually made the changes, but in real time, we can consider the real-time application UI.
Conclusion:
Hence, this is how we can automate the application and at the same time, we can identify any UI has been changed or missed using Selenium IDE & Applitools.
References:
For more information –
Applitools Selenium IDE – https://applitools.com/selenium-ide
Test Automation University Course by Angie Jones – https://testautomationu.applitools.com/automated-visual-testing-a-fast-path-to-test-automation-success/
Photo Credits: https://it.badykov.com/blog/2019/09/16/automated-testing/
Giridhar Rajkumar 