codeception visualception

Codeception. VisualCeption.$I->see(“Automatisierte funktionale Tests“);

Nils Langner. Sebastian Neubert. Torsten Franz.Stand 5. Februar 2015

Codeception. VisualCeption.

$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

ISTQB zertifiziert

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

ISTQB zertifiziert

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 + JahrDie 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.

Das große Wir.


$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ä[email protected]

codeception visualception

Engineering

klasse codeception

gmbh co

gruner jahrdie gruner

konferenzenbuchautor

konferenzen twitter

diverse fachmagazinesprecher

funktionalen anforderungen

risikobasiertes testen