ݺߣ

ݺߣShare a Scribd company logo
Trendy a nové možnosti
test automation
anotovaná verze
TechMeetup Ostrava
23. května 2018
Ondřej Machulda
 @OndraM
How to sound smart in your Talk
Will Stephen | TEDxNewYork
https://www.youtube.com/watch?v=8S0FDjFBj8o
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
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
Kontejnerizace
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
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ě
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/
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
Vizuální testování
aneb
Co když nemusíte na všechno
testy psát?
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
🎉
Trendy a nové možnosti test automation
Zdroj: https://speakerdeck.com/corevo/codeless-visual-testing-using-selenium-ide
Trendy a nové možnosti test automation
Trendy a nové možnosti test automation
Automated Visual Testing workflow
1. Scénář testu
⇓
2. Pořídit screenshot
⇓
3. Porovnat rozdíl s baseline screenshotem
⇓
4. Reportovat chyby
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ů
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());
}
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');
}
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ů
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
Web Performance testing
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“
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?
Web Performance testing – sitespeed.io
●
https://www.sitespeed.io/
●
Open-source, provozujete si sami, na svém železe
●
Pod kapotou Selenium => cross-browser
Web Performance testing – sitespeed.io
Web Performance testing – sitespeed.io
Web Performance testing – sitespeed.io
Web Performance testing – nástroje
●
Sitespeed ukázka: https://dashboard.sitespeed.io/
●
Další možnosti:
– Google Chrome Lighthouse (extension, npm, cli)
– SpeedCurve – $$$
– New Relic – $$$
– …
Cloud testing services
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.
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
 Ondřej Machulda
 ondrejmachulda.cz
 @OndraM
 lmc-eu/steward

More Related Content

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
  • 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 🎉
  • 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
  • 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 – $$$ – …
  • 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