Ui qa tools
- 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
- 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
- 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