galen-tastisch: layout-testen leicht gemacht mit dem galen ... · galen-tastisch: layout-testen...
TRANSCRIPT
![Page 1: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/1.jpg)
Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework
1
![Page 2: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/2.jpg)
�
Agenda
2
1 Motivation
2 Galen Framework
Features
Demo
Test Driven Development
6 Fazit3
5
![Page 3: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/3.jpg)
Motivation
3
![Page 4: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/4.jpg)
Motivation
4
![Page 5: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/5.jpg)
Galen Framework
5
• Setup anlegen• Zu testende Seite
• Bildschirmgrößen / Browser / Geräte
• Galen DSL• Java• JavaScript• Selenium• Selenium Grid (SauceLabs)
• Galen ausführen• Galen öffnet Browser
• ruft Seite auf• ändert Browsergröße• testet Layout gegenüber Spezifikation
• Spezifikation erstellen• Definition, wie Seite aussieht• Galen DSL
Specs�� �
640x480 | 980x1280 | 1024x768
��
![Page 6: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/6.jpg)
6
Galen Framework
@objects container id container button css #container .blue-button textfield xpath //input[contains(@class,'textfield')]
= Content = button: width 100 px
![Page 7: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/7.jpg)
‘[...] test location of objects relatively to each other on page.’
7
galenframework.com
Galen Framework
![Page 8: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/8.jpg)
Quelle: http://galenframework.com/docs/reference-galen-spec-language-guide/ 8
Galen Framework: Beispiel „inside“
button: inside container 10 px top left
![Page 9: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/9.jpg)
Quelle: http://galenframework.com/docs/reference-galen-spec-language-guide/ 9
Galen Framework: Beispiel „left-of“ & „right-of“
textfield: left-of button 10 px
button: right-of textfield 10 px
![Page 10: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/10.jpg)
>=
10
Feature
Logische Operatoren
Import von Spezifikationen
Vergleich mit Bildern / Text
Variablen
Schleifen
Und noch mehr…
$
![Page 11: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/11.jpg)
Demo
11
�
![Page 12: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/12.jpg)
Problem: Interaktion mit Webseite
• Buttons müssen gedrückt werden
• Formulare müssen ausgefüllt werden
• Interaktion mit Browser über JavaScript
• JavaScript kann Injected werden• Und damit Selenium angesprochen werden
• Cookie kann gesetzt werden
12
![Page 13: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/13.jpg)
13
Beispiel: JavaScript injecten
$(“#popup-link”).click();
@Testpublic void testLocalhost() { load("http://example.com", 1024, 768); inject("open-popup.js"); checkLayout("localhost.gspec", null);}
![Page 14: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/14.jpg)
Test Driven Development
14
Tests ausführenLayout umsetzenSpecs definieren
![Page 15: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/15.jpg)
Fazit
• Praktisches Tool
• Durch Selenium (Grid) universell
• Höherer Aufwand bei Interaktion mit Webseite
• Eigene DSL
15
![Page 16: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/16.jpg)
Links
• http://galenframework.com/
• https://github.com/diva-e/galen
• https://www.npmjs.com/package/galenframework-cli
• https://github.com/galenframework/galen-extras
16
![Page 17: Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen ... · Galen-tastisch: Layout-Testen leicht gemacht mit dem Galen Framework 1](https://reader036.vdokument.com/reader036/viewer/2022063001/5f182c4b6229cf34ee0fd019/html5/thumbnails/17.jpg)
17
Vielen Dank für Ihre Aufmerksamkeit.See You Next Time
Adressediva-e Digital Value Enterprise GmbHOffice Karlsruhe
Ihr KontaktJonas KnopfDeveloper
T +49 721 92060 [email protected]