This document discusses tools for automating user interface (UI) quality assurance testing. It begins with introductions and defines UI quality as including code quality, look and feel consistency with designs, functional testing across browsers/devices, and performance testing. It then recommends specific open source tools for automating each type of testing, including Selenium for functional testing, Galen for look and feel testing, Linters for code quality checking, and performance testing services. The presentation aims to help share knowledge about quality assurance and convince attendees that automated testing is important and helps catch errors early. It concludes by thanking attendees and announcing an upcoming conference.

1. UI QA tools
@agomezmoron

2. Hello!
I am Alejandro Gómez
QA & Tech lover (Selenium, Java, TypeScript, Drupal, Ionic,
AngularJS, Gulp…)
I work at @Emergya and @EPSUPO / @SevillaQA organizer.
I am passionate about challenges and I hate repeating
processes!

3. What is our aim?
Share knowledge about #QA

4. Roadmap
✖ Introduction
✖ What is UI quality for you?
✖ UI Quality
✖ Tools to automate!
✖ Demo

5. Do we really need it?
I think you are exaggerating...

6. Front-end guys NEVER break things

7. Front-end guys NEVER break things

8. Front-end guys NEVER break things

9. Everybody breaks things
✖ But they don’t always break things!
✖ We need to focus and detect when something is
broken.

10. Untold number of errors
Minor changes can be more dangerous than
big ones

11. Early testing habit
You can feel
counterproductive. But
it can have long-term
benefits.
Little and often
The Big Test approach
creates more work
than it saves.
Small steps forward
are still steps.
Test as you go
Identifying problems and bugs as early in the
process as possible.

12. UI Quality
Ensuring the UI Quality is not only
checking it looks great

13. What is ui quality for you?
This definition matters....

14. UI Quality
1) Code Quality
● Use code linters.
● For HTML, JS, TS and CSS.

15. 1) Code Quality
UI Quality
● htmlint
● gulp-html5-lint
● htmlhint
● htmlhint-stylish

16. 1) Code Quality
UI Quality
● stylelint
● CSSLint
● stylelint-scss
● stylelint-config-sass-guidelines
● parker
● scss-lint

17. 1) Code Quality
UI Quality
● JSHint
● JSCS
● Plato

18. 1) Code Quality
UI Quality
● ESLint
● TSLint

19. UI Quality
2) Look & Feel Quality
● Does the app look as it was designed?
● Do we have differences between the design and the
implementation?

20. 2) Look & Feel Quality
UI Quality
Paid
Open Source

21. UI Quality
3) Functional Testing
● Test in different browsers/OS.
● Maintaining your own set of browsers and devices to
test on can be a big drain on time and money!
● Cloud testing services.

22. UI Quality
3) Functional Testing
450+ browser/OS/device/platform combinations.
1000+ desktop browsers

23. UI Quality
4) Performance Testing
● Users cannot be waiting to have our website loaded.
● Maybe it works for a single user, what about
simulating our estimate/real visit rate?

24. UI Quality
4) Performance Testing

25. Place your screenshot here
You can automate!

26. Tools to Automate!
1) Code Quality
+

27. Place your screenshot here
MIT License
natete/matrix-angular-gulp

28. MIT License
agomezmoron/docker-gulp

29. 2) Look & Feel Quality
Tools to Automate!
mozilla / geckodriver

30. MIT License
agomezmoron/galen-framework-js-
project-structure
✖ Standard structure.
✖ Parametrized.
✖ Desktop / Tablet / Phablet / Phone
support.
✖ ~ 60 defined devices.

31. Tools to automate
3) Functional Testing
Selenium PhantomJS Webdriver.io

32. Tools to automate!
4) Performance Testing

35. Let’s play together!

37. Don’t be the same,
Be better!

38. Quality begins on the
inside... then works its
way out.
Doreen Virtue

39. People forget how fast you did
a job – but they remember
how well you did it
Howard Newton

40. references
Special thanks to all the people who shared their knowledge:
✖ SlideCarnival’s team for this awesome template
✖ How to lint SCSS with stylelint - Brett Jankord http://bit.ly/2m3XkSp
✖ Responsive Testing with Galen
http://hypery2k.github.io/presentations/galen_workshop/en.html#/

41. Questions?

42. March 21 - 25 - Isla Mágica - #DrupalDevDays

43. Thanks!
@sevillaqa