Natuurlijk! Hier is een stapsgewijze gids om visuele validatietests met Applitools Eyes te integreren in je Java-TestNG Appium-testsuite voor iOS, inclusief tips voor gerichte validatie en het omgaan met layoutverschillen: 1. **Voorbereiding en dependencies** - Voeg de benodigde dependencies toe aan je `pom.xml` (bijvoorbeeld voor Maven): ```xml <dependency> <groupId>com.applitools</groupId> <artifactId>eyes-selenium-java5</artifactId> <version>3.214.0</version> </dependency> <dependency> <groupId>io.appium</groupId> <artifactId>java-client</artifactId> <version>8.0.0</version> </dependency> ``` 2. **Applitools Eyes setup** - Maak een `Eyes` instantie aan en configureer deze in je TestNG `@BeforeMethod` en `@AfterMethod`. ```java import com.applitools.eyes.selenium.Eyes; import com.applitools.eyes.selenium.StitchModes; import com.applitools.eyes.RectangleSize; public class VisualTest { private Eyes eyes; @BeforeMethod public void setUp() { eyes = new Eyes(); // Voeg je Applitools API key toe eyes.setApiKey("JOUW_API_KEY"); // Optioneel: set batch info eyes.setBatch(new BatchInfo("Mobiele App Test Batch")); } @AfterMethod public void tearDown() { if (eyes != null) { try { eyes.abortIfNotClosed(); } catch (Exception e) { e.printStackTrace(); } } } } ``` 3. **Visuele validatie in je testen** - Om gericht te valideren, kun je gebruik maken van `matchWindow` met `Target.region()` om specifieke UI-gebieden te controleren. - Voor het inlogscherm en hoofdmenu: ```java import com.applitools.eyes.selenium.fluent.Target; import org.openqa.selenium.By; @Test public void testInlogScherm() { try { // Start visuele test eyes.open(driver, "Mijn App", "Inlogscherm", new RectangleSize(375, 667)); // Voer handelingen uit, bijvoorbeeld inloggen // driver.findElement(By.id("username")).sendKeys("test"); // driver.findElement(By.id("password")).sendKeys("wachtwoord"); // driver.findElement(By.id("loginButton")).click(); // Validatie van het hele scherm eyes.check(Target.window().fully().withName("Inlogscherm volledig")); // Of focus op een specifiek UI-gedeelte (bijvoorbeeld login form) // Hier moet je de juiste locator gebruiken eyes.check(Target.region(By.id("loginForm")).withName("Login Form")); } finally { eyes.closeAsync(); } } @Test public void testHoofdmenu() { try { // Assumptie: je bent al ingelogd en op het hoofdmenu eyes.open(driver, "Mijn App", "Hoofdmenu", new RectangleSize(375, 667)); // Validatie van het hoofdmenu eyes.check(Target.window().fully().withName("Hoofdmenu")); // Gerichte validatie, bijvoorbeeld menu-knoppen eyes.check(Target.region(By.id("menuKnop1")).withName("Menu Knop 1")); } finally { eyes.closeAsync(); } } ``` 4. **Omgaan met layoutverschillen op oudere apparaten** - Gebruik `matchLevel` instellingen en `ignoreRegions` om minder gevoelige gebieden te definiëren. - Bijvoorbeeld, instellen van `MatchLevel` op `Layout` of `Content`: ```java import com.applitools.eyes.selenium.fluent.MatchLevel; eyes.setMatchLevel(MatchLevel.LAYOUT); ``` - Of definieer `ignoreRegions` voor dynamische delen die kunnen verschuiven: ```java eyes.check(Target.region(By.id("dynamischeElement")).ignoreRegion()); ``` 5. **Extra tips** - Gebruik `viewportSize` passend bij je testdevices. - Overweeg het gebruik van `TestNG` parameters om verschillende schermgroottes te testen. - Voor layoutverschillen op oudere apparaten, configureer je Applitools' `failureReports` en `diffs` om minder strenge validaties te doen. 6. **Samenvatting** - Integreer Applitools Eyes in je Appium Java-TestNG-tests. - Focus op specifieke UI-gebieden met `Target.region()`. - Stel `matchLevel` in op `Layout` of `Content` voor meer toleranties. - Gebruik `ignoreRegions()` voor dynamische of verschuivende elementen. - Test met verschillende schermgroottes en apparaten. --- Als je nog specifieke codevoorbeelden of hulp bij je configuratie nodig hebt, laat het gerust weten!

Hier is een stapsgewijze handleiding voor het implementeren van visuele validatietests met Applitools Eyes in je Appium-testsuite voor iOS: ### 1. Vereisten en Setup - Voeg de Applitools Eyes SDK toe aan je project: ```xml <dependency> <groupId>com.applitools</groupId> <artifactId>eyes-appium-java</artifactId> <version>5.66.0</version> </dependency> ``` ### 2. Basisconfiguratie Applitools ```java import com.applitools.eyes.appium.Eyes; import com.applitools.eyes.RectangleSize; public class VisualTestBase { protected Eyes eyes; protected static final String API_KEY = "JOUW_APPLITOOLS_API_KEY"; @BeforeMethod public void eyesSetup(ITestContext context) { eyes = new Eyes(); eyes.setApiKey(API_KEY); eyes.setMatchLevel(MatchLevel.LAYOUT); // Ideaal voor layoutverschuivingen } } ``` ### 3. Implementatie Inlogscherm Test ```java @Test public void testLoginScreenVisual() { try { // Start de visuele test eyes.open(driver, "Login Screen", "Visual Validation Login", new RectangleSize(375, 812)); // Pas viewport size aan // Navigeer naar inlogscherm driver.findElement(By.id("login_button")).click(); // Volledig scherm validatie eyes.checkWindow("Login Screen Full Layout"); // Specifiek element validatie (optioneel) eyes.checkElement(By.id("login_form"), "Login Form Area"); } finally { eyes.closeAsync(); } } ``` ### 4. Implementatie Hoofdmenu Test ```java @Test public void testMainMenuVisual() { try { eyes.open(driver, "Main Menu", "Visual Validation Main Menu", new RectangleSize(375, 812)); // Open hoofdmenu driver.findElement(By.id("menu_button")).click(); // Valideer menu layout eyes.checkWindow("Main Menu Expanded"); // Specifieke menu secties eyes.checkRegion(By.id("navigation_drawer"), "Menu Navigation Area"); } finally { eyes.closeAsync(); } } ``` ### 5. Geavanceerde Configuratie voor Layoutverschuivingen ```java @BeforeMethod public void configureEyesForLayoutShifts() { eyes.setMatchLevel(MatchLevel.LAYOUT); eyes.setIgnoreCaret(true); eyes.setIgnoreDisplacements(true); // Negeert kleine positionele verschillen // Stel viewport in voor verschillende devices eyes.setForceFullPageScreenshot(true); } ``` ### 6. TestNG Configuratie ```xml <?xml version="1.0" encoding="UTF-8"?> <suite name="Visual Tests"> <test name="iOS Visual Validation"> <parameter name="appiumPlatform" value="iOS"/> <classes> <class name="LoginVisualTests"/> <class name="MainMenuVisualTests"/> </classes> </test> </suite> ``` ### 7. Belangrijke Tips voor iOS: - Gebruik `setForceFullPageScreenshot(true)` voor scrollende content - Configureer iOS-specifieke selectors: ```java eyes.checkElement(By.iOSClassChain("**/XCUIElementTypeButton[`label == 'Login'`]")); ``` - Gebruik `MatchLevel.LAYOUT` of `MatchLevel.CONTENT` ipv strikte pixelvergelijking ### 8. Uitdagingen Oudere Devices: ```java // Layout tolerantie instellen eyes.setMatchTimeout(10); // Seconden eyes.setIgnoreDisplacements(true); // Device-specifieke viewports Map<String, RectangleSize> deviceViewports = new HashMap<>(); deviceViewports.put("iPhone_8", new RectangleSize(375, 667)); deviceViewports.put("iPhone_X", new RectangleSize(375, 812)); ``` ### 9. Best Practices: - Maak aparte testklassen voor elke scherm/sectie - Gebruik descriptieve checkpoint names - Implementeer error handling voor netwerk issues - Combineer visuele checks met functionele assertions ### 10. Testuitvoering: - Zorg dat Appium server draait - Stel `APPLITOOLS_API_KEY` in als environment variable - Gebruik TestNG om tests te groeperen per scherm Deze setup helpt je layoutverschuivingen consistent te detecteren terwijl je flexibiliteit behoudt voor acceptabele visuele verschillen tussen iOS devices.