Puppeteer – A webes tesztautomatizálás bábjátékosa

• 

Bevezető

Fontos még indulás előtt megjegyezni, hogy mivel Node alapú modulokról lesz szó, így egy alapvető javascript tudást megkövetel a mélyebb szintű megértés, de mint azt látni fogjuk, azoknak sem kell kétségbe esniük, akik teljesen kezdők a kódolás terén, hisz egy teszt lépésinek leírása igazán intuitív. Ebben a cikkben igyekszem a legjobb tudásom szerint egy kis ízelítőt adni ebből a nagyszerű eszközből, hogy aztán az olvasó kedvet kapva maga fedezhesse fel, mi más rejlik még a jéghegy csúcsa alatt.

A Node.js világa

Aki automata tesztjeihez a Puppeteert választja eszköznek, óhatatlanul is szembesülni fog a Node.js végtelennek tűnő világával, ezért fontosnak tartok szót ejteni róla. A Node.js nem más, mint egy olyan modulokból felépülő szoftverrendszer, melyet eredetileg internetes alkalmazások és webszerverek készítésére hoztak létre. A programok JavaScriptben írhatók. Mivel tényleg egy óriási rendszerről beszélünk, kell valami, ami rendszerezi számunkra a modulokat, segít a modulok telepítésében, frissítésében, és intelligensen oldja meg a felmerülő konfliktusokat. Ezt a feladatot a Node Package Manager, vagyis az NPM látja el. Nekünk is nagy segítségünkre lesz a továbbiakban.

Kezdjük az elején!

Ha még nincs telepítve gépünkre a Node.js illetve az NPM csomagkezelő, nulladik lépésként ezek letöltését és telepítését kell elvégeznünk. Letöltésre az https://nodejs.org/en/download/ oldalon lesz lehetőségünk. A parancssort megnyitva az npm –v, illetve a node –v parancsokkal ellenizhetjük, hogy a telepítés sikeres volt-e.

Ha ezzel megvagyunk, a Node.js főkönyvtárába lépve az npm init parancs kiadásával létre fogunk hozni egy package.json nevű fájlt, mely tesztjeink inicializálásáért, beállításaiért lesz majd felelős. Én a továbbiakban szemléltetésre a Visual Studio Code nevű programot fogom használni, de ízlés szerint használható kód írásához akár Notepad++, akár más kódszerkesztő is.

A létrejött fájlba kukkantva valami hasonlót fogunk látni:

Ezt követően jöhetnek a tesztünkhöz szükséges modulok telepítései. Először fel fogom sorolni, mely parancsokat kell kiadni a modulok telepítéséhez, alább pedig az eddig nem érintett modulokhoz található rövid ismertetőt:

“npm i  –save puppeteer” vagy “npm i  –save puppeteer-core” (utóbbit abban az esetben, ha a Chromium már telepítve van)

“npm i –save mocha”

“npm i –save chai”

Mocha: Egy Node.js alapú tesztelői keretrendszer, mely hookok használatával(before(), after(), afterEach(), beforeEach(), stb.) egyszerűbbé teszi számunkra a Node-ban jellemző aszinkron tesztelést.

Chai: Egy olyan “assertion” modul, mely könnyedén párosítható bármelyik JavaScript alapú tesztelői keretrendszerrel, esetünkben a Mocha-val. Should, Expect és Assert interfészeket bocsátja rendelkezésünkre, melyeken keresztül a tesztjeink során összehasonlításokat, ellenőrzéseket végezhetünk. Én a tesztemhez az “Expect” interfészt fogom használni.

Ha eddig kitartottál, mostmár semmiképp se add fel, elérkeztünk tesztkörnyezetünk felépítésének utolsó lépéseihez! Hozzunk létre a package.json-t tartalmazó könyvtárban egy .js kiterjesztésű szöveges állományt, nevezzük el akárhogy, de mellőzzük az ékezetek használatát!

Ha ezzel megvagyunk, nyissuk meg a szerkesztőben a package.json fájlt és a “scripts” objektum “test” kulcsának adjuk át a következőt: node <Mocha elérési útja> –timeout:30000 <új .js fájlunk elérési útja>

Ez az én esetemben valahogy így fog kinézni:

Ha kész, mentsünk, zárjuk be a package.json-t, majd nyissuk meg a korábban létrehozott, még üres JavaScript fájlunkat! Ezzel elérkeztünk az izgalmas részhez!

Készítsük el első Puppeteer projektünket!

Az itt tárgyalt részek végére lesz egy scriptünk, mely a http://automationpractice.com-on hajt végre két tesztesetet úgy, hogy közben különböző eszközök képernyőméretét emulálja a program.

Kezdő lépésként importáljuk és mentsük el változókba a Puppeteer és Chai modulokat! Erre azért van szükség, mert ezeknek a változóknak a segítségével hivatkozhatunk majd később a két modulból származó függvényekre. Egyébként érdemes lehet szétnézni a Node.js node_modules könyvtárában, itt látható ugyanis az összes Node modul, ami telepítve van a gépünkre, többek a között a fent említettek is.

Ha ezzel megvagyunk definiáljunk egy describe() blokkot, ahova a tesztesetünket írjuk, a blokkon belül pedig hozzunk létre két változót, amiket majd az összes ezt követő függvényblokkban elérhetünk.

A beforeEach() blokkba írhatunk minden olyan lépést és beállítást, mely minden tesztesetünk futtatásához szükséges.  A Puppeteer launch() függvényének átadott kulcs-érték párokat tartalmazó objektum  a böngésző indításának alapbeállításait tartalmazzák. Ezekre példa:

headless: true – Ebben az esetben a böngészőnk UI nélkül fog elindulni a teszthez, így sokkal gyorsabban is fog futni.

devtools: false – Ha az itt átadott érték “true”, az azt jelenti, hogy böngészőnk úgy fog elindulni, mintha lenyomtuk volna az F12-t.

Továbbá lehetőségünk van például a default timeout felülírására is. Az átadott érték miliszekundumban értendő, vagyis a programunk tízezer miliszekundum után fog timeout hibát dobni, ha valami miatt nem sikerül egy lépést a megadott idő alatt végrehajtania.

Az afetEach() blokkunkban csak annyi fog történni, hogy bezárjuk a böngészőt minden teszteset lefutása után.

Az ezután hozzáadott it() blokkok fogják tartalmazni a futtatandó teszteseteket. A kettő közti különbség az egyszerűség kedvéért most csupán csak annyi lesz, hogy az első esetben a böngésző egy általunk meghatározott készülék méreteivel fog indulni, míg a második esetben a böngészőablak szélességét és magasságát adjuk meg pixelre pontosan. Az ezt követő lépések azonosak lesznek.

Fontos megjegyzés: Valós helyzetben sosem ismételgetünk kódrészleteket! Ha bizonyos tesztesetek egyes lépései megegyeznek, ezeket minden esetben külön függvénybe célszerű írni, és szükség szerint így hivatkozhatunk rájuk.

1. Elnavigálunk az URL-re.

2. A CSS-Selector segítségével beazonosítjuk a kereső mezőt, majd beírjuk a szöveget.

3. Szimuláljuk az enter lenyomását.

4. Ellenőrizzük, hogy a DOM-ban megjelenik-e a figyelmeztető blokk, miszerint a “Lorem ipsum” keresésre nincs találat.

5. A Chai könyvtárból kölcsön vett “expect” segítségével ellenőrizzük, hogy a figyelmeztető blokk szövege az elvárt érték-e.

 Aszinkron utasítások, függvények

Aki végül Puppeteer használatára adja a fejét, előbb vagy utóbb szembesülni fog a JavaScript egyik sajátosságával, az aszinkron függvényekkel, utasításokkal. Az én példámban ezeket “async function”-ként vagy “await” utasításként deklaráltam. Röviden: Aszinkronnak nevezzük az olyan utasításokat, amelyek arra késztetik a számítógépet, hogy ameddig az aszinkron utasítás le nem fut, addig más utasításokat is tudjon futtatni párhuzamosan, vagyis lehetővé teszi egy program futását egyszerre több szálon. A háttérben futó folyamatok, a WebSocket kommunikáció a szerver és a böngésző között valamint a Node-val való kommunikáció felgyorsítható, ha egyszerre több szálon, aszinkron módon mennek végbe.  

Összegzés

Eddigi tapasztalataim alapján azt kell, hogy mondjam, a Puppeteer egy kiváló tesztautomatizáló eszköz, mely nemcsak, hogy ingyenes, de rendkívül gyors is, miközben korszerű és hatékony megoldást nyújt a webes tesztautomatizálás kihívásaira. Mivel Node alapú, így lehetőségek tárháza áll rendelkezésünkre más egyéb Node modulok formájában a legkülönfélébb problémák megoldására. Legyen szó akár a Mocha által kínált hookokról, a Chai assertion könyvtárról, tesztfutattásról különféle böngészőkben, párhuzamosan futó tesztekről, és így tovább. Egyetlen hátránya, (már, ha ezt hátránynak lehet nevezni manapság) hogy azért megkövetel legalább egy alapszintű programozói tudást, bár véleményem szerint egy manuális tesztelőnek sem lehet hátrány, ha képbe kerül a JavaScript alapvető szintaxisával.