I senaste numret av Professional Tester magazine beskriver Viv Richards ett ramverk för visuell regressiontestning med Selenium webdriver. Jag kommer inte gå in i detalj hur det fungerar utan jag hänvisar till artikeln i PT eller Viv Richards blog. Jag har testat ramverket (skrivet i C#) dels direkt från det exempel-projekt som finns men även att implementera det i en Selenium Base Page Object-lösning.
I det stora hela fungerar det mycket bra. På bara några timmar var jag igång med en fungerande PoC. Jag ger här några exempel och delar med mig av erfarenheter och problem jag stött på.
Anropet är mycket enkelt:
// Arrange var baseImage = "TechnicalPage_Base.png"; // Act var difference = GetDifference(Driver, baseImage); // Assert Assert.IsTrue(difference == 0);
Ramverket ger även en enkel men fullt fungerande testrapport. Nedan ser ni en lyckad testkörning och en misslyckad (failed):
Kollar man vidare på det test som gav failed (i detta fall en enkel testsida jag gjort) ger skillnaden, dvs. det visuella felet, en bild med rosa markeringar på. Det kan vara svårt att se på exemplet nedan (klicka för större bild) men jag har ersatt två a med svenska tecken ö och å som ramverket upptäckte. Kontroll görs ner på pixelnivå:
Det som givetvis inte går att testa med visuell automatisering är dynamiskt innehåll (tex. Twitter-flöden). Det är givetvis inte möjligt ens med manuell testning… Det finns dock en inbyggd funktion för att skugga bort dessa partier:
// Cover specified dynamic element on page with blanket CoverDynamicElementBySelector(Driver, elementByCssSelector);
Och då blir det visuella resultatet enligt följande:
Det jag inte lyckats med att visuellt testa är inbäddade länkar från YouTube i WordPress. Här verkar det som om färgerna på den stillbild YouTube levererar blir olika ibland och därmed detekterar ramverket detta som förändring på pixelnivå.
Det som också beskrivs av Viv Richards är att det är viktigt att skapa basbilderna med den Selenium webdriver som ska utföra regressionstesterna. Det går inte att manuellt lägga till en bild.
Ramverket finns att testa och ladda ner från GitHub:
https://github.com/vivrichards600/AutomatedVisualTesting