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.

1. Z download stránek si stáhněte Selenium Standalone Server. Jde o multiplatformní balíček JAR, pro jeho spuštění tedy budete ve svém počítači potřebovat podporu Javy. O něco níže na téže stránce najdete odkazy pro stažení IE a především Mozilla Gecko Driver a Google Chrome Driver.
2. Na MacOS spouštím Selenium Standalone Server přes příkazový řádek, jinak to má problém, že nepochází od certifikovaného vývojáře. Což by šlo asi upravit ve vlastnostech systému, ale jsem na to líný. Příslušný příkaz je tedy java -jar selenium-server-standalone-3.0.1.jar.
3. Na příkazovém řádku Selenium napíše informaci o lokální adrese a čísle portu, na kterém startuje. Na jejich základě si pak můžete ve webovém prohlížeči otevřít kontrolní konzoli pro sledování činnosti 0.0.0.0:4444/wd/hub/static/resource/hub.html.
4. Dále podobným způsobem spustíte ovladač pro Chrome nebo Firefox. Na Macu stačilo poklepat na rozbalený soubor. Nastartoval a zobrazilo se nové okno příkazového řádku pro sledování činnosti ovladače.

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.