Visuelle Regressionstests

HK Hamburg Abschlussprojekt

Sommer 2016

 

Jan Dahlke

15.07.2016

zur Person

Jan Dahlke

  • geboren 03.09.1979
  • Studium der Germanistik mit Schwerpunkt Syntaxtheorien
  • Quereinsteiger in die IT seit 2011
  • seit 2013 in der Ausbildung zum Fachinformatiker (AE) bei t8y.com

das Unternehmen t8y.com GmbH

Tochter der Omnicom Media Group - global führendes Kommunikationsunternehmen

zunächst technische Abteilung bei DDB Tribal

Gründung von t8y.com in 2011

Webseiten + Content Managment Systeme mit Java und Magnolia

E-Mail Marketing

Inhalt der Präsentation

  • Was sind visuelle Regressionstests?
  • die Grenzen des Verfahrens
  • Integration in den Workflow
  • das Testszenario
  • das Tool - der Tech-Stack
  • das Tool - die Benutzung desselben
  • die Codebeispiele
  • die Grenzen des Tools und deren Erweiterung
  • Zusammenfassung
  • Quellen

 

was sind visuelle Regressionstests?

 was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

  • zielt auf das Ergebnis des Programms
  • bei Webseiten also die Darstellung im Browser
  • kann als Blackbox Test gelten

Nur nach außen sichtbares Verhalten fließt in den Test mit ein.

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

Ablaufplan VRT:

  1. Festlegen der Baseline
  2. Screenshoten der Baseline mit Headless Browser
  3. Anpassungen am Quellcode durchführen
  4. mit Fertigstellung - Definition Testline
  5. Screenshoten der Testline
  6. Vergleich anstoßen
  7. Resultat Report/Bilder händisch sichten
  • Cross-Browser Vergleich ist nicht möglich! 
  • <iframe> - Einbettung in die Sidebar mit abweichenden Inhalten
  • Slider Elemente rotieren
  • Gefahr von falsch-positive Ergebnissen wegen des Pixelvergleichs

 was ist VRT // Grenzen des Verfahrens // Workflow// Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

Grenzen der Testbarkeit des angewandten Verfahren:

Auch bei nur geringen Abweichungen kann ein Fehler gemeldet werden. Hier gilt es den MSE (Mean-Square-Error) auf die Bildgröße hochzurechnen und durch Erfahrungswerte eine gute Toleranzschwelle zu definieren.

was ist VRT // Grenzen des Verfahrens  // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

Baseline

Anwendung VRT

Der Testfall

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall  // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

Umstellung des Backends [Automobilherstellerxyz-Seite] von Magnolia 4.5 auf Magnolia 5.4.5, aber kein Etat für Frontend.

mehr als 2400 Unterseiten, die über URLs erreichbar waren

Die V5.4.5 wird nach Fertigstellung als Testline betrachtet, die gegen die Baseline Screenshots gehalten werden.

Die V4.5 wird als Baseline definiert

  • XML Sitemap crawl und append der TabContainer #'s

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall //  das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

das Tool - verwendete Technologien (Frameworks)

die konkrete Nutzung des Tools:

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall //  das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

node start.js <Befehl>

Schema

Befehlssatz:

node start.js createBaseline
node start.js createTestline
node start.js fullReport
node start.js compareImage
node start.js help

Das Tool wendet sich an Entwickler und Tester, die mit dem Umgang des Command Line Interface vertraut sind.

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

node start.js createBaseline
node start.js compareImage

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

Codebeispiele:

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

start.js - der Einstiegspunkt

var caseDiffer = function(){
	var arg = process.argv[2];
switch(arg)
	{
	case 'createBaseline':
		//*
	case 'createTestline':
		//*
	case 'fullReport':
		//*
	case 'compareImage':
		//*
	case 'help':
		//*
	default:
		console.log('your input does not match any commands. Try typing: node start.js help');	
	}
}();
case 'fullReport':
	if(checkDirIsEmpty()){
		console.log('fullReport');
		walk.walks(base).then(function(res){
			console.log(res);
			for(var val of res){
				compare.compareImgFullReport(path.join(val.base), path.join(val.test));
			}
		});
	}
	else{
		console.log('Either the directory of base or test is empty.\nConsider to run createBaseline or createTestline.');
	}
        break;
case 'compareImage':
		console.log('compareImage');
		if(checkDirIsEmpty()){
			console.log('createDifferImg');
			walk.walks(base).then(function(res){
				//namecounter
				var count = 0;
				for(var value of res){
					compare.createDifferImg(value.base, value.test, count);
					count = count+1;
				}
			});
		}
		else{
			console.log('Either the directory of base or test is empty.\nConsider to run createBaseline or createTestline.');
		}
		break;
//own modules imports-------------------
var walk = require('./js/walker.js');
var compare = require('./js/compare.js');
var help = require('./js/help.js');
var screens = require('./js/screens.js'); 
//--------------------------

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

compare.js - die Vergleichsmethode

function createDifferImg(baseImg, newImg, count){
	var resultPathMade = ''+resPath+resName+count+resEnding;
	var options = {
		file: resultPathMade,
		highlightColor: 'yellow'
		}
		gm.compare(baseImg, newImg, function(err, isEqual, equality, raw){
		if(err){
			throw err;
		}
		// !=0 instead trying to approach the float(->discuss in theory)
		if(equality != 0 ){
			gm.compare(baseImg, newImg, options, function(err){
				if(err){
					throw err;
				}
				console.log(color.red('es trat eine Abweichung auf zwischen '+baseImg+' und '+newImg));
		 		console.log(color.yellow('Das Differenzbild liegt in: ./results'));
		});	
		}
		else{
			console.log(color.green('es gab keine Abweichung zwischen '+baseImg+' und '+newImg));
		}
	})
};

Grenzen des Tools:

bei v4.5 waren alle Zustände der Seite über URL erreichbar:

URL mapping in baseline.txt und testline.txt ist zwingend notwendig!

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

http://autoherstellerxyz-seite/it/it/start/online-devices.html#tab/open/app-connect

nicht aber bei v5.4.5, weil legacy Code überflüssig wurde

--> das Testverfahren bricht!

Lösungsansätze:

Projektseitige Anpassungen:

Javascript basierte window.history() & window.location() URLs generien

Testseitige Erweiterung (= Neuausrichtung):

Implementation des Page Object Models

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

Zusammenfassung:

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

                          >                                          -> Falschfarbenbilder

Page Object Model andenken

  • Vorteile: statt Seitenbasiert, dann Komponentenbasiert
  • Nachteil: hoher Umsetzunsgaufwand (Langzeitprojekte)

URL's sind notwendig, um alle Zustände abzubilden

Vor Projektbeginn den Einsatz eines solchen Programms abwägen.

"Das Programm VRTT kann nur als Hilfsmittel dazu gelten, eine große Anzahl von Seiten und Unterseiten, repräsentiert durch Bilder, miteinander zu vergleichen. "

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

Quellen:

was ist VRT // Grenzen des Verfahrens // Workflow // Testfall // das Tool - Technologien // Tool - Nutzung // Codebeispiele // Grenzen des Tools // Zusammenfassung // Quellen

Bilder:

  • Workflow Darstellung - Alexander Hems, t8y.com Mitarbeiter
  • Titelbild - https://t3.ftcdn.net/jpg/00/38/54/52/500_F_38545252_JgLCAVmtbbMXn6bvZp8v5lS7Snu5Yo1i.jpg
  • Gebäude - http://www.arbonia.com/res/Media/arbonia.com/Media/Referenzen/KV/Atl_Haus1/1/Atlantic-Haus-Hamburg_NEU.jpg
  • Technologien - Seiten der Anbieter direkt

Texte:

Spillner, Andreas / Linz, Tilo: Basiswissen Softwaretest, Heidelberg, dpunkt.Verlag, 5.te Auflage, 2012

Ressourcen:

Darstellungsumgebung - https://slides.com/

Vielen Dank für Ihre Interesse und Ihre Aufmerksamkeit.

Ergebnisse im Überblick

baseline:  Beispiel Projekt

testline:  Beispiel Projekt

results:  Beispiel Projekt

Made with Slides.com