Codeception VisualCeption

Codeception. VisualCeption.
$I->see(“Automatisierte funktionale Tests“);
Nils Langner. Sebastian Neubert. Torsten Franz.
Stand 5. Februar 2015

$I->amOnPage(2);
Motivation.1
Anforderungen.2
Die Lösung(en).3
4 Stolperfallen + Fazit.
Agenda.
5 VisualCeption.
6 Einsatz bei G+J.
0 Vorstellung.

$I->amOnPage(3);
Wir.

$I->amOnPage(4);
Das kleine Wir.
Nils Langner
 Head of Quality Management G + J Digital Products GmbH
Studium Informatik (B.Sc.) an der Universität Freiburg
 ISTQB zertifiziert
 Softwareprojekte im Open-Source-Bereich
 Autor für diverse Fachmagazine
 Sprecher auf Konferenzen
 Buchautor
 Twitter: @phphatesme
 Gewinner Malwettbewerb Grundschule Haag i. OB

$I->amOnPage(5);
Das kleine Wir.
Torsten Franz
 Quality Manager G + J Digital Products GmbH
Sparkassenkaufmann
 Ubuntu Member (Projekt: ubuntuusers.de)
 Autor für diverse Fachmagazine
 Sprecher auf Konferenzen
 Twitter: @toddyfranz
 Seepferdchen in der dritten Klasse

$I->amOnPage(6);
Das kleine Wir.
Sebastian Neubert
 Quality Manager G + J Digital Products GmbH
Studium eBusiness (B.Sc.) an der BTU Cottbus
 leidenschaftlicher Webentwickler
 angehender Author für Fachmagazine und Sprecher auf Konferenzen
 Volleyballtrainer
 Twitter: @testcontroller
 Gewinner des Amateurfeldes beim Silpion IT-Kickertunier 2015

$I->amOnPage(7);
Das große Wir.
 Gruner + Jahr
Die Gruner + Jahr GmbH & Co KG ist eine Tochter der Bertelsmann SE & Co. KGaA.
500 Magazine und digitale Angebote Stern, Financial Times Deutschland, Eltern, Brigitte, Gala, Essen&Trinken, Neon,
Business Punk, Nido, Beef, Häuser, Schöner Wohnen, GEO, Capital, Börse Online, chefkoch, roomido, Flow
Mitarbeiter 10.819, in Hamburg circa 3.000 (Stand: 2013)
In der G+J Digital Products GmbH sind sämtliche Digital-Aktivitäten der Markenwebsites und deren Mobile- Auftritte
von Gruner + Jahr gebündelt.

$I->amOnPage(9);
Das große Wir.
 Gruner + Jahr
 Ganz toll.
 Super nett.
 Eine Menge Magazine.
 Viel Spaß.
 Yeah!

$I->amOnPage(10);
Disclaimer.
 BDD
 „Beim Behavior Driven Development (verhaltensgetriebene Softwareentwicklung) werden
während der Anforderungsanalyse die Aufgaben, Ziele und Ergebnisse der Software derart
textuell festgehalten, dass diese später automatisiert auf ihre korrekte Implementierung
getestet werden können.“
 Und das macht Codeception?
 Immer das richtige Tool und die eierlegende Wollmichsau?

$I->amOnPage(11);
Motivation.
Anfang 2014:
 Bisher kein funktionierendes Testtool für automatisierte
anwendungsfallbasierten Systemtests im Einsatz.
 Legacy-Projekte (und Drupal) schwer zu unit-testen.
 Manuelles Testen
 ist teuer
 dauert lange
 passiert in der Durchführung sehr spät.
 und …

$I->amOnPage(12);
Ist ****** langweilig.

$I->amOnPage(13);
Anforderungen.
 Überprüfung von funktionalen Anforderungen.
 Kontinuierliche Ausführung.
 Integration in das bestehende CI.
 Allgemein verständlich (natürlichsprachlich).
 Stabile Tests.
 Soll beim Entwickeln Spaß machen.

$I->amOnPage(14);
Lean Testing.
 Risikobasiertes Testen.
 „So viel wie nötig, so wenig wie möglich.“
 Abhängig von der Eintrittswahrscheinlichkeit und den Kosten. (Risikomatrix)

$I->amOnPage(15);
Hackathon. Die Lösungen.
 Selenium IDE
 Selenium PHPUnit
 Selenium Junit
 CasperJS
 Codeception
Code geht schnell
kaputt. Nicht mit
Selenium2 kompatibel.
Syntax fies. IDE-
Unterstützung nicht
optimal.
Wir können gar kein
Java?!
IDE-Unterstützung
nicht vorhanden.
JavaScript kann
komplex werden.
Perfekt. (1)
(1) In der Theorie!

$I->amOnPage(16);
Die Lösung.
CodeceptionProjektseite: http://codeception.com/
Sourcecode: https://github.com/Codeception/Codeception

$I->amOnPage(17);
Codeception.
 Selenium WebDriver integration
 Elements matched by name, CSS, XPath
 Symfony2, Laravel4, Yii, Zend Framework integration
 PageObjects and StepObjects included
 BDD-style readable tests
 Powered by PHPUnit
 API testing: REST,SOAP,XML-RPC
 Facebook API testing
 Data Cleanup after each run
 HTML, XML, TAP, JSON reports
 CodeCoverage and Remote CodeCoverage

$I->amOnPage(18);
Codeception.
 Selenium-WebDriver-Integration
 Firefox, Chrome, PhantomJS, Internet Explorer, Safari
 Selendroid, iOS-Driver
 PHPBrowser-Integration
 Elements matched by name, CSS, XPath
 BDD-style readable tests
 XML reports
 Leicht erweiterbar
 Sauberer Code
 Hohe Aktivität auf GitHub
 Schnelle Reaktion auf Fragen
 PHP

$I->amOnPage(19);
Codeception.

$I->amOnPage(20);
Die Lösung. Aufbau.
Bamboo
Lokal
ELA
Chrome
Chromedriver
Webdriver
Entwickler-Rechner
Tests
Codeception Selenium Server
Bamboo
Chrome
Chromedriver
Webdriver
Selenium-Rechner
Tests
Codeception Selenium Server

$I->amOnPage(21);
Die Lösung. Module.

$I->amOnPage(22);
Die Lösung. ExecuteJS.

$I->amOnPage(23);
Die Lösung. Best Practice.
 Problem: Meine Tests gehen relativ häufig kaputt!
 Lösung:
a) Verwendung von Html-Ids. Bei der Entwicklung drauf achten.
b) Wahl der richtigen Selektoren (xPath, CSS, Name, Label).
c) Verwendung von Konstanten in Codeception. Page Objects.
 Problem: Meine Daten sind nicht stabil!
 Lösung:
a) Fixtures, Fixtures, Fixtures!
b) Stabile Elemente auf (Live-)Seite suchen.
 Problem: So viele Tests, so wenig Struktur.
• Lösung:
a) Test-Code ist Source-Code und sollte den gleichen Regeln folgen.
b) Aufräumen nach jedem Testdurchlauf. SetUp, TearDown.
c) Komponenten.
d) Steps.

$I->amOnPage(24);
Heiliger Gral?
Codeception

$I->amOnPage(25);
Heiliger Gral?
Nein!
cydonna / photocase.com

$I->amOnPage(26);
Stolperfallen.
Wait
 Problem
 Bei Interaktionen mit Browsern ist es nötig manchmal zu warten bis etwas geschieht.
 Die Zeitdauer lässt sich aber nur „schätzen“, da das Neuladen einer Seite unterschiedlich lang
dauern kann.
 Lösung
 Mit Zeitintervallen zu Arbeiten ist schwierig im Selenium Umfeld.
 Es sollte mit Interaktionen gearbeitet werden.
 Beispiele
$I->waitForElement("#FrontendCommentType_body", "10 ");
$I->waitForElementNotVisible("#dialog > div.narrow", "10 ");

$I->amOnPage(27);
Stolperfallen.
File-Upload
 Problem
 Bei Remote-Rechner muss ein File, welches im Testfall hochgeladen werden soll, ankommen.
 Lösung
 Übergabe der Datei durch Funktion in einem zentralen Modul.
 Beispielaufruf
$I->attachFileRemote('//input[@id="FrontendDesignDilemmaType_file"]', $remoteFileName);

$I->amOnPage(28);
Stolperfallen.
Werbung
 Problem
 Werbeflächen können die Klick- bzw. Schreibbereich überdecken.
 Lösung
 Verhalten herstellen, dass entweder die Anwendung immer Werbeblöcke ausspielt und diese im
Test berücksichtigt werden oder die Werbung ausschalten.
 Oder Werbeblocker installieren.

$I->amOnPage(29);
Stolperfallen.
Umgang mit mehr als einem Fenster
 Problem
 In manchen Webanwendungen bewegt der Anwender sich nicht nur in einem Fenster, sondern
arbeitet auch in einem zweiten.
 Lösung
 Bevor zwischen Fenster gesprungen wird, muss man sicher stellen, dass alle Fenster einen
Namen haben, sonst müssen sie per JavaScript benannt werden.
 Beispielaufruf
$I->executeJS('old_window_name = window.name; window.name="mainwindow"');
$I->switchToWindow(‘newwindow');
$I->switchToWindow('mainwindow');
$I->executeJS(‘window.name=old_window_name');

$I->amOnPage(30);
Fazit.

$I->amOnPage(31);
Fazit.
 Tool fühlt sich nach anfänglichen Problemen gut an.
 Browserkompatibilität prüfen zu aufwändig.
 Das Tool ist erweiterbar.

$I->amOnPage(32);
VisualCeption.

$I->amOnPage(33);
VisualCeption.
 Motivation
 Codeception ist einfach für Entwickler, aber schwer für ProductOwner
 Layout-Tests
 ohne großen Aufwand testen
 „Viele Asserts auf einmal“  z.B. Hauptnavigation oder ganzer Footer

$I->amOnPage(34);
VisualCeption. Behat.
 Gherkin Language for Product Owner
Feature: ls
In order to see the directory structure
As a UNIX user
I need to be able to list the current directory's contents
Scenario:
Given I am in a directory "test"
And I have a file named "foo"
And I have a file named "bar"
When I run "ls"
Then I should get:
"""
bar
foo
"""

$I->amOnPage(35);
VisualCeption. Codeception.
 VisualCeption for Product Owner
 alle Vorteile von Codeception
 PHP, Codevervollständigung, Syntax-Highlight, Lesbar
<?php
class FeatureCest
{
public function myFeatureShouldLookGood(WebGuy $I)
{
$I->amOnUrl(‚http://www.stern.de‘);
$I->amOnPage(‚/newFeature‘);
$I->dontSeeVisualChanges(‚newFeature‘, ‚#featureID‘);
}
}

$I->amOnPage(36);
VisualCeption.
 Visuelle Regressionstests (Definition nicht verfügbar)
 Vergleich von Bildern

$I->amOnPage(37);
VisualCeption 1.0
 Codeception Modul, OpenSource, von G+J, in PHP
 Wie funktioniert es?
 $I->seeVisualChanges();
 $I->dontSeeVisualChanges();
 Inject JQuery
 Auswahl von Containern durch CSS-Selektoren oder XPath
 exclude von Inhalten (ebenfalls durch CSS-Selektoren oder XPath)
 Angabe von einer Standardabweichung zum Referenzbild „deviation“
 Requirements: Imagick, Codeception mit Webdriver Modul

$I->amOnPage(38);
VisualCeption 2.0
 Integration in ein CI System (Bamboo, Jenkins)
 HTML Reports mit einfacher Kontrolle über Templates

$I->amOnPage(39);
VisualCeption 3.0
 Liste von URL:DIV-Container
 Web-Oberfläche
https://github.com/DigitalProducts/codeception-module-visualception

$I->amOnPage(40);
Einsatz bei G+J.
 roomido.com
 livingathome.de
 eltern.de
 stern.de
 …

$I->amOnPage(41);
Danke.

$I->amOnPage(42);
Kontakt.
Team Qualitätsmanagement
qm@guj.de

Codeception VisualCeption

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Codeception VisualCeption

Ähnlich wie Codeception VisualCeption (20)

Codeception VisualCeption

Hinweis der Redaktion