Vývoj na poli automatizace testování webů otevírá spousta možností, které by ještě před pár lety byly nereálné. Podíváme se na některé aktuální trendy a ukáži pár moderních technologií a služeb, které vám mohou pomoci automatizovat (a tedy urychlit, zlevnit nebo zlepšit) různé části QA procesu: visual testing, docker, web performance testing.

1. Trendy a nové možnosti
test automation
anotovaná verze
TechMeetup Ostrava
23. května 2018
Ondřej Machulda
 @OndraM

2. How to sound smart in your Talk
Will Stephen | TEDxNewYork
https://www.youtube.com/watch?v=8S0FDjFBj8o

3. Trendy v test automation
Důraz na rychlost
– agilita, zkracování feedback loop
Continuous Deployment
– kratší release cycle (až „permanentní release“)
Posun testování blíže k vývojářům
– nezbytné kvůli rychlosti; změna QA kultury
Kontejnerizace, Docker aj.
– aplikace jako mikroservicy v kontejnerech; kontejnerizace testování
Testování (monitoring) produkce

4. Změna QA kultury
●
„QA je odpovědností vývojářů“
●
Je nezbytná rychlá zpětná vazba (feedback loop)
– Agilní vývoj, časté releasy (continuous deployment)
– Nemůžeme dlouho čekat na ověření, že jsme nic nerozbili
●
Regresní testy by si měli psát sami vývojáři
– Musí to jít jednoduše – nástroje, infrastruktura, nejlépe stejný jazyk
jako aplikace
●
Posun role testera
– Od toho „co píše testy“ právě směrem k automation engineerovi který
zajišťuje infrastrukturu a nástroje pro vývojáře

5. Kontejnerizace

6. Kontejnerizace aplikace
●
Aplikace spouštíme v izolovaném kontejneru
(Docker), bez další instalace
●
Můžeme vytvořit a spustit kontejnery s aplikací
– Klidně pro každý commit
– S malými náklady a systémovými nároky
●
A oproti němu můžeme testovat end-to-end testy

7. Kontejnerizace funkčních testů
●
Je problematické instalovat závislosti prohlížečů přímo
– Týká se Selenia i Cypressu
●
Možnost snadného spuštění v různých prohlížečích a různých
verzích
– Které mohou díky Dockeru běžet vedle sebe na jednom stroji
●
Pohodlnější i pro lokální spouštění
– Jen jeden příkaz
●
Snazší údržba
– Nezaneřádí to systém, kdyžtak se jen smaže
●
Snadné škálování
– Pokud potřebujeme pouštět hodně testů paralelně

8. Selenium v Dockeru 🐳
$ docker run -p 4444:4444 -p 5900:5900
selenium/standalone-chrome-debug:3.6.0
$ vncviewer localhost:5900 # Linux
$ open vnc://127.0.0.1:5900 # MacOS
https://hub.docker.com/r/selenium/

9. Continuous Deployment Pipeline
Nový merge do repozitáře aplikace
⇓
CI server vytvoří a spustí Docker image aplikace
⇓
Na CI serveru se oproti tomu automaticky spustí testy
(včetně funkčních)
⇓
Pokud projdou, aplikace se automaticky nasadí na
produkci

10. Vizuální testování
aneb
Co když nemusíte na všechno
testy psát?

11. Funkční (e2e) testy
●
Ve stanoveném scénáři
ověřují konkrétní
skutečnosti
●
Umíme je automatizovat
●
Pro každou validaci
musíme napsat kód
●
Selektory... 😭
●
Stejně neověříme vše
Vizuální testy
●
Ověřují, že stránka/její
část vypadá, jak má
●
Neřešíme kód pro
validaci (ani selektory)
●
Najdeme chyby, které
jsme vůbec nehledali
●
Mohou nahradit/doplnit
část funkčních testů
●
Jdou také automatizovat
🎉

13. Zdroj: https://speakerdeck.com/corevo/codeless-visual-testing-using-selenium-ide

16. Automated Visual Testing workflow
1. Scénář testu
⇓
2. Pořídit screenshot
⇓
3. Porovnat rozdíl s baseline screenshotem
⇓
4. Reportovat chyby

17. Applitools
●
https://applitools.com/
●
postavené na Seleniu
●
komerční služba
●
integrace do všemožných jazyků
●
integrace do stávajících testů

18. 1. Scénář testu
public function testLoginAndDashboard()
{
$this->wd->get('https://.../login');
$this->assertSame('Admin Dashboard Login', $this->wd->getTitle());
$this->findByName('email')
->sendKeys('foo@example.com');
$this->findByName('password')
->sendKeys('password');
$this->findByCss('[type=submit]')
->click();
$this->waitForCss('#morris-area-chart', true);
$this->assertSame('Admin Dashboard Main Page', $this->wd->getTitle());
}

19. 2. Pořídit screenshot
protected function setUp()
{
$this->eyes = new Eyes();
...
}
public function testLoginAndDashboard()
{
$this->wd->get('https://.../login');
$this->assertSame('Admin Dashboard Login', $this->wd->getTitle());
$this->eyes->checkWindow('Login page');
$this->findByName('email')
->sendKeys('foo@example.com');
$this->findByName('password')
->sendKeys('password');
$this->findByCss('[type=submit]')
->click();
$this->waitForCss('#morris-area-chart', true);
$this->assertSame('Admin Dashboard Main Page', $this->wd->getTitle());
$this->eyes->checkWindow('Dashboard');
}

20. 3. Porovnat rozdíl s baseline
4. Reportovat chyby
●
Ukázky
– Rozbitý icon font, nenačtené css, rozbitý javascriptový prvek
●
Ignorování oblastí
– Datum, anketa, banner apod.
●
Poradí si s dynamickým obsahem
– Náhodné pořadí položek, změna úvodního článku apod.
– Různé způsoby porovnání (hlídání layoutu apod.)
●
Hromadné ignorování stejné chyby
– Změna loga, rok v patičce...
●
Rozhraní pro správu výsledků / baseline screenshotů

21. Vizuální testování – nástroje
●
Applitools - $$$
●
Backtrac - $$$
●
Wraith - Ruby
●
Gemini - JavaScript
●
Kobold - JavaScript, npm
●
Galen Framework (primárně na css testování) – Java
●
ImageMagick ☺
– compare before.png after.png diff.png # exit code 1
●
Viz github.com/mojoaxel/awesome-regression-testing

22. Web Performance testing

23. Web Performance testing
Kdo monitoruje odezvu serveru?
Kdo monitoruje rychlost načtení webu?
„80-90 % of the end-user response time is spent
on the frontend“

24. Web Performance testing
●
Navigation Timing API 🆕
●
Jak dlouho trvá, než s webem může pracovat uživatel?
●
Jaké množství dat se načetlo (css, javascript, obrázky)?
●
Není problém jen v nějakém prohlížeči?

25. Web Performance testing – sitespeed.io
●
https://www.sitespeed.io/
●
Open-source, provozujete si sami, na svém železe
●
Pod kapotou Selenium => cross-browser

26. Web Performance testing – sitespeed.io

27. Web Performance testing – sitespeed.io

28. Web Performance testing – sitespeed.io

29. Web Performance testing – nástroje
●
Sitespeed ukázka: https://dashboard.sitespeed.io/
●
Další možnosti:
– Google Chrome Lighthouse (extension, npm, cli)
– SpeedCurve – $$$
– New Relic – $$$
– …

30. Cloud testing services

31. Cloud testing services
BrowserStack
SauceLabs
TestingBot
Ukázka:
https://saucelabs.com/u/OndraM
Vlastní linux server
s prohlížečem
nainstalovaným
přímo v systému
Na serveru běží Docker,
a v něm kolik chceme
prohlížečů.
Nebo se můžeme připojovat k
prohlížečům běžícím v cloudu.
Výhoda je mj. velké množství
prohlížečů a to, že se
nemusíme starat o vlastní
infrastrukturu. Je to ale
pekelně drahé. Je možné to
použít jako doplněk k
předchozím variantám.

32. Shrnutí
Mění se QA kultura
Kontejnerizace je tu a nikam neodchází
Vše směřujte k continuous deployment pipeline
Vizuální testování může nahradit část e2e testů
Měření frontend performace na produkci
Cloud testing služby

33.  Ondřej Machulda
 ondrejmachulda.cz
 @OndraM
 lmc-eu/steward