Trendy a nové možnosti test automation

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 🎉

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

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

14. 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ů

15. 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()); }

16. 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'); }

17. 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ů

18. 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

19. Web Performance testing

20. 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“

21. 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?

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

23. Web Performance testing – sitespeed.io

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

27. Cloud testing services

28. 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.

29. 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

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