Visual AI Testing Using Applitools
0 likes131 views
The document discusses using Applitools for visual AI testing. It provides an overview of Applitools, which allows testing user interfaces through visual assertions rather than traditional code-based assertions. This avoids issues like managing locators and adjusting assertions. The document then demonstrates how to set up and implement visual AI testing using Applitools in Java, including configuring Eyes, setting up tests, and executing visual checks on elements and full pages. It concludes that while visual AI testing has advantages, a hybrid approach combining it with traditional testing may be best to avoid false positives.
Visual AI Testing Using Applitools
- 1. Visual AI Testing using Applitools by Mikhail Laptev (@hotelsdotcom) t: @mikelaptev / in: https://www.linkedin.com/in/mikhaillaptev/
- 2. No photo required 🤳📵 after this slide! 💫 Presentation 📑 is already available on-line💡
- 3. Why I chose this area I have got a great experience while participating in Applitools Hackathon (https://applitools.com/hackathon) last year and, regardless of the fact that I was not nominated as one of the winners 🏆, I would be happy 🥳 to share my story with all of you ... and, at this time, in Java ☕.
- 4. A bit about Applitools 💭
- 5. E2E testing of UI is awesome 🤪 Unless you end-up managing endless sets of locators and adjusting your assertions during ±80% of your working day 😟
- 6. But everything is not as bad as we think, yeah 😊?
- 7. How can we do things better? 🧐 E2E tests are necessary - they give us the highest level of confidence 💂 that our product works as it should. But, you don’t need to cover every single change 🤯 by a new E2E test. You need to cover only critical business flows.
- 8. Small changes within the flow ➡ acceptance / integration tests ➡ help your developers to deal with that and never give up! 📢 “When you asked a developer to write a test for his/her change - he/she starts looking at you like you just asked them for a ride to the airport.“ © Cole & Marmalade
- 9. Okay, tell me more of those “beautiful jokes” about E2E! 🤔
- 10. What about... ● Assertions? ● User Experience? ● Layout? ● etc... 😲 Having raw assertions, especially for dynamic or graphic content might be a challenge. As an example, consider a case, when what you are using is a 3rd party component or a dynamic content of a tutorial or an advert. What you would like to avoid - an enormous amount of code being designed for those assertions 😩. What you would not like to avoid - losing confidence in what you are delivering 💷.
- 11. Your end-user approach your product via UI, so... 💡
- 12. Visual AI Testing 💡 The idea as simple as it can be - why we need all kinds of different assertions with different and, time-to-time complicated logic behind them? Can we replace them with just one assertion - asserting what our customers see on the screen? That’s exactly what Applitools (and a few other Applitools competitors) are dealing with. Long story short is - you don’t need your assertion code anymore 🤩. Navigate to a necessary point that represent one or another condition within your application and assert what is displayed on the screen 👀! Sounds tasty, right? 😋 So, let’s try and see how much is the fish 🎣.
- 14. Configuration 🔧 public class WebBase { ... public static Configuration configureEyes() { Configuration configuration = new Configuration(); configuration.setForceFullPageScreenshot(true) .setApiKey(AppProperties.getProperty("applitools.api.key")); return configuration; } ... }
- 15. Setup 🛠 public abstract class BaseUiTest { private static EyesRunner runner; private static Configuration configuration; protected Eyes eyes; protected WebBase base; … @BeforeAll static void setUpAll() { runner = new ClassicRunner(); configuration = WebBase.configureEyes(); } … }
- 16. Setup (cont.) 🛠 public abstract class BaseUiTest { private static EyesRunner runner; private static Configuration configuration; protected Eyes eyes; protected WebBase base; … @BeforeEach void setUpTest() { eyes = new Eyes(runner); eyes.setConfiguration(configuration); WebBase.setUpBase(); // Setup of the base (WebDriver & etc.) base = new WebBase(); } … }
- 17. Login form: v1 vs. v2 📷
- 18. Login form: v1 vs. v2 📸
- 19. Implementation 💻 … // Assert assertAll( () -> assertEquals("Login Form", loginPage.getHeaderTitle(), "Invalid title of the login form"), () -> assertEquals("Username", loginPage.getUsername().getLabel(), "Invalid label of the field for entering username"), () -> assertTrue(loginPage.getUsername().isIconDisplayed(), "Icon for the username field should be displayed"), () -> assertEquals("Password", loginPage.getPassword().getLabel(), "Invalid label of the field for entering password"), () -> assertTrue( loginPage.getPassword().isIconDisplayed(), "Icon for the password field should be displayed"), () -> assertTrue( isNullOrEmpty(loginPage.getStyleOfRememberMeCheckBox()), "Alignment for the 'Remember Me' checkbox is incorrect"), () -> assertEquals(expectedLinks.size(), actualLinks.size(), "Invalid amount of the 'Login with' buttons"), () -> assertIterableEquals(expectedLinks, actualLinks, "Invalid content of the 'Login with' buttons") ); ... … // Assert eyes.checkElement( loginPage.getLoginFormLocatorToAssert(), LOGIN.getTag()); assertEquals(TestResultsStatus.Passed, eyes.close(false).getStatus()); ...
- 20. Demo time 🎱 🎲 🎯
- 21. Conclusion IMHO 🤷🏻♂ Despite of a lot of advantages in using of Visual AI for testing, there are some areas where we need to limit ourselves in order to avoid false positives. It is not easy to switch entirely to Visual AI, you should consider a symbiosis of both classical 🏛 and visual 🔮 approaches.
- 22. Links ● https://testautomationu.applitools.com/automated-visual-testing-a-fast-path-to-t est-automation-success ● http://applitools.com/ ● https://testautomationu.applitools.com/modern-functional-testing/ ● https://applitools.com/ultrafast-grid ● https://applitools.com/blog/essential-components-continuous-testing
- 23. Thank you and happy testing! 👩💻👨💻