Am I responsive? Test me! - Galen framework
-
Upload
fernando-martin-gil -
Category
Software
-
view
832 -
download
0
Transcript of Am I responsive? Test me! - Galen framework
![Page 1: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/1.jpg)
Am I responsive? Test me!
Galen Framework
Thursday, Oct. 29th
Fernando Martín
![Page 2: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/2.jpg)
➔ Software QA engineer
➔ Focus on automation
➔ Tech lover
➔ Social
About me
2
http://fernando-martin.github.io
https://www.linkedin.com/pub/fernando-mart%C3%ADn-gil/62/426/114
fer.martin33
https://github.com/fernando-martin
![Page 3: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/3.jpg)
1. UI testing2. What’s Galen?3. Configuration4. Galen Spec Language5. Running tests6. Reports7. Demo
3
What am I showing today?
![Page 4: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/4.jpg)
● Manually
● What about RWD?
4
UI testing
![Page 5: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/5.jpg)
● Automated testing for responsive websites● Human readable● Basic and advanced syntax● Reports● JS and Java API● Selenium integration
and more ...
5
What’s Galen
![Page 6: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/6.jpg)
Configuration● Run this command in project directory
● Properties○ Range approximation○ Custom listeners○ Default browser○ Selenium grid○ Screenshots
$ galen config
6
![Page 7: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/7.jpg)
Galen Spec Language
HTML
<body> <div id='search-bar'> <input type='text' name='search' value=''/> <a href='#' class='search-button'>Search</a> </div> <ul id='menu'>
<li><a href='#'>Home</a></li> <li><a href='#'>Blog</a></li></ul>
</body>
GALEN
@objects search-panel id search-bar search-panel-button css #search-bar a menu-item-* css #menu li a
● Object definition
7
![Page 8: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/8.jpg)
● Ranges○ width 100px
○ width 50 to 200 px
○ width > 40 px
○ width < 40 px
○ width ~ 100 px
○ width 30 to 100 % of screen/width
● Variables
● Tagging and sections
@set headerMargin 10 to 20px
= Header = header-icon: inside header ${headerMargin} top left
= Main section = @on *
menu: height 300 px
@on desktop login-button: height 40 px
Galen Spec Language
8
![Page 9: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/9.jpg)
❏ near❏ below❏ above❏ left-of, right-of❏ inside❏ width❏ height❏ aligned❏ text❏ visible
❏ centered❏ absent❏ contains❏ on❏ component❏ Frame support❏ count❏ color-scheme❏ Image
● Object specs
Galen Spec Language
9
![Page 10: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/10.jpg)
❏ Importing❏ Same spec to multiple objects❏ If statements❏ Loops❏ Warning level❏ Custom rules❏ Custom functions
Galen Spec Language● Advanced object specs
10
![Page 11: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/11.jpg)
● Single page test
➔ Args:◆ url◆ javascript◆ include◆ exclude◆ size◆ htmlreport◆ testngreport◆ jsonreport
$ galen check specFile [args] galen check homepage.gspec --url "http://example.com" --size "640x480" --include "mobile" --exclude "desktop" --htmlreport "htmlreport-dir"
Running tests
11
![Page 12: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/12.jpg)
● Test Suite
➔ Args:◆ htmlreport◆ testngreport◆ parallel-tests◆ recursive◆ filter
$ galen test testSuite [args] galen test mytest01.test --testngreport "report/testng.xml" --parallel-tests 4
Running tests
12
![Page 13: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/13.jpg)
Reports
13
![Page 14: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/14.jpg)
14
![Page 15: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/15.jpg)
● Official website, http://galenframework.com/
● GitHub, https://github.com/galenframework
● More examples, http://mindengine.net/category/galen/
15
Resources
![Page 16: Am I responsive? Test me! - Galen framework](https://reader033.fdocuments.net/reader033/viewer/2022042907/587c17f21a28abb5068b4a47/html5/thumbnails/16.jpg)
16
QUESTIONS?