Jak jsem začlenil automatizaci prohlížeče Selenium do své práce

Díky přednášce Ondřeje Machuldy na WebExpo jsem se konečně rozhoupal, zprovoznil jsem si Selenium a začlenil jej do svého pracovního procesu. Tato automatizace webového prohlížeče je kupodivu poměrně snadná a výrazně ulehčuje testování. V článku vám představím, jak Selenium momentálně používám.

Pro vás, kdo Selenium zatím neznáte. Jedná se o speciální nástroj, který umožňuje automatizovat webové prohlížeče. Má podporu pro Firefox, Chrome, Internet Explorer i Safari. Můžete si tedy vybrat podle platformy i prohlížeče, který používáte, nebo využít všech možností pro komplexní automatizaci a testování.

Ona automatizace za pomoci nástroje Selenium znamená, že si připravíte ve svém oblíbeném programovacím jazyku posloupnost úloh, které by měl prohlížeč vykonat a průběžně nebo po dokončení si uložíte výsledek.

Typicky si tedy naskriptujete například přidání produktu do košíku, přechod na nějakou stránku pro zadání údajů zákazníka, automatické vyplnění políček, odeslání k nákupu, odeslání objednávky. Přitom můžete sledovat, zda třeba údaje v košíku a ceny odpovídají tomu, co se do něj automatem vložilo, zda se správně vypočítalo poštovné atd. Při nějakých zásazích do procesu zpracovávajícího nákup je taková automatizace k nezaplacení. Místo toho, abyste vše v mnoha různých kombinacích ručně testovali, spustíte jen připravený proces a pouze si ověříte, zda se všude objevily odpovídající údaje.

Výstup ze Selenia je možný do screenshotu, souboru, do okna příkazového řádku, nápadům se meze nekladou.

Zůstaňte u svého programovacího jazyka

Selenium znám již delší dobu, ale nikdy jsem si nenašel čas jej vyzkoušet prakticky a začlenit do svého pracovního procesu. Ondřej Machulda měl na WebExpo jednu myšlenku, která mě povzbudila, abych Selenium začal opravdu používat v každodenní praxi. Zmínil totiž, že pro naskriptování Selenia není nutné se učit jiný programovací jazyk, než ve kterém weby běžně stavíme.

Já si z nějakého důvodu původně myslel, že je to všechno záležitosti node.js. Tedy ne, že bych se bál nebo měl problém s JavaScriptem, ale moc mě to pro činnosti jiné, než je manipulace s webovou stránkou a DOM, nebere. A právě pro WebExpo jsem zjistil, že se při tvorbě instrukcí pro Selenium nemusím vzdávat svého oblíbeného PHP. Totéž platí pro vývojáře, pro které je jejich favoritem Java, Python, C# nebo Ruby.

Sáhl jsem tedy po php-webdriver od Facebooku, který sice není oficiálním řešením přímo od tvůrců Selenia, je ale průběžně vyvíjený. První úkol, který jsem Seleniu svěřil, je procházení všech stránek nalinkovaných v menu zvoleného webu a pořízení stránek v různých rozlišeních. Pomáhá mi to testovat responzivitu webu a odhalovat případné chyby. Prohlížení během chvilky pořízených obrázků je rychlejší, než to celé dělat ručně sám v prohlížeči. O to více má pak člověk času se zaměřit na opravy chyb nebo nedokonalostí.

Instalujeme Selenium

Celá obsluha této automatizace se skládá z několika částí. První věc, kterou budete potřebovat, je Selenium samotné. Poté ovladač pro webový prohlížeč. Já střídám Chrome a Firefox, nějak se mi totiž podpora Safari na MacOS nedaří zprovoznit. No a třetí věc je pak skript, kterým spustíte nějakou automatizovanou úlohu.

Procházení menu a tvorba screenshotů za pomoci Selenium

Tímto způsobem je připraveno vše pro spuštění nějakého automatizovaného procesu. Jak jsem zmínil výše, moje první využití Selenia bylo pro naskriptované procházení odkazů v rámci menu na zvoleném webu a pořízení screenshotu z každé nalezené stránky v různém rozlišení.

Zmínil jsem, že používám php-webdriver od Facebooku. Začít je jednoduché, stačí si inicializovat nový projekt pomocí nástroje Composer, a to tímto příkazem:

composer init

Poté přidáme zmíněný balíček od Facebooku:

composer require facebook/webdriver

Pak už můžeme začít připravovat vlastní skript. Vložíme autoloader a spustíme jednoduchý test napojení na Selenium. K tomu lze využít příklad, který je přímo na stránce php-webdriveru. Využívá start Firefoxu, stejně tak bude fungovat, když místo něj vložíte do kódu chrome(). Nezapomeňte si upravit adresu lokálního serveru Selenia, pokud vám z nějakého důvodu neběží na portu 4444.

Můj PHP skript pro procházení webu a tvorbu screenshotů v různém rozlišení vypadá následovně. Netvrdím, že je nějak krásně napsaný, jistě by se dal upravit, ale chtěl jsem mít vše v jednom souboru.

<?php namespace Facebook\WebDriver; use Facebook\WebDriver\Remote\DesiredCapabilities; use Facebook\WebDriver\Remote\RemoteWebDriver; require_once('vendor/autoload.php'); function TakeScreenshot($driver, $title, $width) { $screenshot = getcwd() . '/screenshots/' . $width .'-'. $title . ".png"; $driver->takeScreenshot($screenshot); if(!file_exists($screenshot)) { throw new Exception('Screenshot už existuje'); } if( ! (bool) $element) { return $screenshot; } } $widths = array(320, 360, 480, 568, 640, 768, 1024, 1280, 1366, 1400, 1920); $url = 'http://www.polzer.cz/'; $menuSelector = WebDriverBy::cssSelector('.header-navigation'); print 'Start v '.date('h:i:s')."\n"; $time_start = microtime(true); $host = 'http://localhost:4444/wd/hub'; $capabilities = DesiredCapabilities::chrome(); $driver = RemoteWebDriver::create($host, $capabilities, 3000); $driver->get($url); $urls = array(); if ($menuSelector){ $menu = $driver->findElement( $menuSelector ); $links = $menu->findElements(WebDriverBy::tagName('a')); foreach ($links as $link){ $urls[] = $link->getAttribute('href'); } } else{ $urls[] = $url; } print 'Kontrola adres:'."\n"; foreach ($urls as $url){ print $url."\n"; $driver->get($url); foreach ($widths as $width){ $driver->manage()->window()->setSize(new WebDriverDimension($width, 5000)); $title = $driver->getTitle(); $full_screenshot = TakeScreenshot($driver, $title, $width); } } $time_end = microtime(true); $execution_time = ($time_end - $time_start); print 'Delka trvani '.$execution_time.' s'."\n"; $driver->quit();

Jako první je připravena funkce TakeScreenshot(), která očekává informaci o ovladači, titulek coby pojmenování názvu screenshotu a šířku stránky, na kterou se má prohlížeč zúžit. Funkce nad ovladačem prohlížeče zavolá pořízení screenshotu takeScreenshot(), který uloží do souboru PNG s připraveným názvem tvořeným číslem šířky a titulkem stránky.

A teď samotný postup. Připraveno mám pole $widths s různými šířkami weby. Dále definuji URL adresu, kterou má Selenium prohlédnout. Jako třetí konfigurační proměnná je pak selektor prvku s navigací, kde Selenium najde odkazy na jednotlivé podstránky webu. Líbí se mi, že mohu zadat klasický zápis selektoru jako v CSS.

Tip: Pokud má web http ověřování, stačí adresu zadat ve formátu http://jmeno:heslo@adresawebu.tld.

Pak následuje výpis času spuštění skriptu. Zavolá se server Selenia s ovladačem pro Chrome. Načte se definovaná adresa webu a připraví se prázdné pole $urls, do kterého se následující smyčkou naplní adresy získané z menu na webové stránce.

Tyto adresy se pak procházejí následující smyčkou, která vždy pro každou z adres zavolá funkci pro pořízení screenshotu v jednotlivých definovaných šířkách webu. Nakonec se zobrazí délka trvání skriptu a je to. Stačí spustit z příkazového řádku php skript.php.

Nejde tedy o nic složitého a opravdu oceňuji, že jsem mohl při práci se Seleniem zůstat u PHP. Už se těším na nějakou pokročilejší automatizaci a ověřování formulářů.

Tip: Použijte nějaký lepší editor PHP, který si rozumí s Composerem a autoloaderem, aby vám byl schopen v inteligentní nápovědě nabízet jednotlivé funkce, které jsou v php-webdriveru obsaženy. Já sázím na PhpStorm.

Tagy

Buďme ve spojení, přihlaste se k newsletteru

Odesláním formuláře souhlasíte s podmínkami zpracováním osobních údajů. 
Více informací v Ochrana osobních údajů.

Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal, WordPress a Symfony. Acquia Certified Developer & Site Builder. Autor několika knih o Drupalu.
Marketing Director v Lesensky.cz. Ve volných chvílích podnikám výlety na souši i po vodě. Více se dozvíte na polzer.cz a mém LinkedIn profilu.

Komentáře k článku

Přidat komentář

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Moje kniha o CMS Drupal

 

Kniha 333 tipů a triků pro Drupal 9


Více na KnihyPolzer.cz

Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Nové diskuze
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

@maxiorel na Twitteru

Maxiorel na Twitteru