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.

Reklama

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.

Reklama

Komentáře

Doporučuju se mrknout na http://codeception.com/docs/modules/WebDriver a testování bude ještě o dost snažší

Projdu si to, díky.

Majitel Maxiorla. Nabízím mimo jiné placené poradenství pro Drupal. Jsem i na Twitteru.

Přidat komentář