UI QA tools

@agomezmoron

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!

You can find me at:@agomezmoron

What is our aim?Share knowledge about #QA

Roadmap✖ Introduction

✖ What is UI quality for you?

✖ UI Quality

✖ Tools to automate!

✖ Demo

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

Front-end guys NEVER break things

Front-end guys NEVER break things

Front-end guys NEVER break things

Everybody breaks things

✖ But they don’t always break things!

✖ We need to focus and detect when something is broken.

Untold number of errorsMinor changes can be more dangerous than

big ones

Early testing habitYou can feel counterproductive. But it can have long-term benefits.

Little and oftenThe Big Test approach creates more work than it saves.Small steps forward are still steps.

Test as you goIdentifying problems and bugs as early in the

process as possible.

UI Quality Ensuring the UI Quality is not only

checking it looks great

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

UI Quality1) Code Quality

● Use code linters.

● For HTML, JS, TS and CSS.

1) Code Quality

UI Quality

● htmlint● gulp-html5-lint ● htmlhint● htmlhint-stylish

1) Code Quality

UI Quality

● stylelint● CSSLint● stylelint-scss● stylelint-config-sass-guidelines● parker● scss-lint

1) Code Quality

UI Quality

● JSHint● JSCS● Plato

1) Code Quality

UI Quality

● ESLint● TSLint

UI Quality2) Look & Feel Quality

● Does the app look as it was designed?

● Do we have differences between the design and the

implementation?

2) Look & Feel Quality

UI Quality

Paid

Open Source

UI Quality3) 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.

UI Quality3) Functional Testing

450+ browser/OS/device/platform combinations.

1000+ desktop browsers

UI Quality4) 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?

UI Quality4) Performance Testing

Place your screenshot here

You can automate!

Tools to Automate!1) Code Quality

+

Place your screenshot here

MIT License

natete/matrix-angular-gulp

MIT License

agomezmoron/docker-gulp

2) Look & Feel Quality

Tools to Automate!

mozilla / geckodriver

MIT License

agomezmoron/galen-framework-js-project-structure

✖ Standard structure.✖ Parametrized.✖ Desktop / Tablet / Phablet / Phone

support.✖ ~ 60 defined devices.

Tools to automate3) Functional Testing

Selenium PhantomJS Webdriver.io

Tools to automate!4) Performance Testing

Let’s play together!

Don’t be the same,Be better!

Quality begins on the inside... then works its

way out. Doreen Virtue

People forget how fast you did a job – but they remember

how well you did itHoward Newton

referencesSpecial 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#/

Questions?

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

Thanks!

@sevillaqa