5 parimat visuaalse regressiooni testimise tööriista

Sisu

• 01. Wraith
• Proovi
• Plussid ja miinused
• 02. PhantomCSS
• Proovi
• Plussid ja miinused
• 03. Kaksikud
• Proovi
• Plussid ja miinused
• 04. VeebidraiverCSS
• Proovi
• Plussid ja miinused
• 05. Spectre
• Proovi
• Plussid ja miinused
• Austatud märkused
• Mis edasi saab?

Viimase mitme aasta jooksul olen märganud veebiarenduse vestlustes üha enam väljendit „visuaalne regressioonitestimine” ... ja seda põhjusega. See lubab pakkuda tohutut väärtust neile, kes on väsinud oma saitide käsitsi stiiliprobleemide kontrollimisest.

Selle kasvava populaarsuse tõttu näib, et iga kuu ilmub uus tööriist, millest igaüks lubab pakkuda suurepärast visuaalse regressiooni testimise automatiseerimist. Kahjuks olen leidnud, et enamus on rohkem unistusi kui tegelikkust, tõde on see, et seda tüüpi testid on petlikult keerulised.

Siiski on üksikuid, mis eristuvad rahvahulgast. Kuigi igal neist on oma eelised ja puudused, usun, et iga selle loendi tööriist on väärt vaatamist.

01. Wraith

Wraith on olnud juba mitu aastat. See oli üks esimesi tööriistu sellel areenil ja see näeb jätkuvalt funktsionaalsuse täiustusi, mille GitHubi repo suleti enam kui 200 tõmbetaotlust. See on abivahend kõigile, kes Ruby's arenevad.

Proovi

Käivitage oma projekti kataloogis wraithi seadistamine. Siis jookse wraith püüdmine configs / config.yaml. See käivitab testide komplekti BBC kodulehe kahes erinevas versioonis. Pärast katse lõppu vaadake oma loodud ekraanipildi galeriid, avades vastloodud kaadrid / gallery.html oma valitud brauseris.

Samuti saate teste kohandada. Aastal configs / config.yaml faili saate testimiseks saite ja lehti värskendada, määrates ekraani laiused ja diff-režiimi.

Plussid ja miinused

• YAML-i konfiguratsioonifailiga on lihtne töötada
• Saate võrrelda kahte erinevat URL-i
• Installimine võib olla keeruline, kui te pole Rubyga tuttav
• Üksikute lehtede spetsiifiliste interaktsioonide käivitamine võib olla keeruline

02. PhantomCSS

Teine veteranide võimalus, PhantomCSS, on olnud populaarne valik kasutajaliidese arendajate seas. Selle harjumuspärasus ja funktsionaalsus muudavad PhantomCSS-i suurepäraseks valikuks kasutajaliidese jaoks, kes soovib oma veebisaiti testida. PhantomJS / CasperJS peale ehitatud PhantomCSS lisab nende kahe tööriista pakutavat fantastilist funktsionaalsust.

Proovi

Looge uus JavaScripti fail järgmise koodiga:

casper.start ('http://the-internet.herokuapp.com/checkboxes'). siis (function () {phantomcss.screenshot ('# checkboxes', 'enne klõpsu'); casper.click ('# checkboxes input : first-child '); phantomcss.screenshot (' # märkeruudud ',' pärast klõpsu ');});

Seejärel käivitage fail CapserJS CLI kaudu: casperjs test myfile.js. Teie skript töötab taustal ja teie pildid salvestatakse ekraanipildid kausta.

Plussid ja miinused

• Palju õpetusi ja ettekandeid selle kohta
• Ehitatud CasperJS-i peale, võimaldades lehe toiminguid testidesse integreerida
• Testid piirduvad PhantomJS-iga
• Puudub ekraanipiltide ülevaatamise / haldamise liides

03. Kaksikud

Mulle tundub, et Kaksikud on ahvatlevad, kuna see pakub traditsioonilist seleeni testimist liideses, mis pole liiga keeruline. Nagu PhantomCSS-i puhul, saate ka oma ekraanipiltide ümber määratleda kohandatud toimingud. Erinevalt PhantomCSS-ist läheb Gemini mitu sammu edasi, pakkudes testisviite, mis aitavad teie koodi korraldada.

Proovi

Loo .gemini.yml järgmise sisuga fail (asendab teie seleenivõrguserveri URL-i):

rootUrl: http://the-internet.herokuapp.com/checkboxes gridUrl: http: // localhost: 4444 / wd / hub brauserid: kroom: soovitud Võimalused: brauserNimi: kroom

Seejärel looge testfail ja pange see faili kaksikud kausta projekti juur. Fail võib olla nii lihtne:

gemini.suite ('yandex-search', function (suite) {suite.setUrl ('/ checkboxes') .setCaptureElements ('# checkboxes') .capture ('enne klikki') .capture ('pärast klikki', function ( toimingud, leidke) {toimingud.klõps ('# märkeruutude sisestamine: esimene laps');});});

Järgmisena looge käivitades oma baaspildid kaksikute uuendus. Peaksite nägema ühte testi läbimist. Regressioonitesti saate teha kaudu kaksikute test, mis võrdleb uusi pilte kataloogi salvestatud piltidega kaksikud / ekraanid kataloogi.

Plussid ja miinused

• Seleeni integreerimine võimaldab teil testida väga erinevates brauserites ja seadmetes
• Hästi dokumenteeritud sait koos erinevate näidetega
• Pakub raamistikku testide sortimiseks sviitidesse
• Puudub otsene juurdepääs seleenile, mis piirab lehel tehtavate toimingute tüüpi
• Sama testi käivitamine mitme eraldusvõimega nõuab täpsemat seadistamist

04. VeebidraiverCSS

Esiteks, hoiatus: WebdriverCSS-i tulevik on ebakindel, kuna püütakse seda asendada ajakohasema mooduliga. See tähendab, et ma arvan, et see on endiselt mainimist väärt, kuna sama põhistruktuur jätkub ka järgmise rakendusega.

Nagu Kaksikud, haakub WebdriverCSS oma funktsionaalsuse jaoks seleeni. See asub ka teise tööriista peal: WebdriverIO. Kuna see on osa WebdriverIO ökosüsteemist, saab see kasu kõigest, mida raamistik peab pakkuma. See hõlmab sadu käske, mida saate brauserisse saata enne ja pärast ekraanipiltide tegemist.

WebdriverCSS integreerub hästi ka testiraamistikega nagu Mocha, Jasmine ja Cucumber.js. Lisage ühenduvus pilveseleni teenustega, nagu näiteks Sauce Labs ja Browserstack, ning saate ülimalt kirsina täisfunktsionaalse testikomplekti visuaalse regressioonitestimisega.

Proovi

Looge uus JavaScripti fail (test.js) oma projektis järgmise sisuga:

var klient = nõudma (’webdriverio’). kaugjuhtimispult ({soovitudCapability: {brauseriNimi: ’chrome’}}) nõuab (’webdrivercss’). init (klient, {screenWidth: [640,1024]}); var screenshotElement = [{nimi: ’märkeruudud’, elem: ’#checkboxes’}]; klient.init () .url ('http://the-internet.herokuapp.com/checkboxes') .webdrivercss ('enne klõpsamist', screenshotElement) .click ('# märkeruutude sisestus: esimene laps') .webdrivercss ('klõps pärast', screenshotElement) .end ();

Käivitage test, tippides selle käsu käsureale: $ node test.js. Valideerige loodud pildid, kontrollides veebidraiverid kausta. Kui käivitate testi uuesti ja ekraanipildid muutuvad, märkate a dif kaust lisatakse ja vastavad diff-pildid on selle sees.

Plussid ja miinused

• Kuna see kasutab WebdriverIO-d, saate ära kasutada kõiki raamistiku pakutavaid funktsioone
• Erinevate eraldusvõimete kiire konfigureerimine
• Võimaldab teil ekraanipildi teatud alasid peita / maskeerida
• Tulevikus ebakindel, kuna seda konkreetset pistikprogrammi enam ametlikult ei hooldata
• Nõuab, et saaksite õppida WebdriverIO kasutamist

05. Spectre

Erinevalt teistest selles loendis olevatest tööriistadest Spectre teste ei käivita. Selle asemel keskendub see piltide võrdlemise võimaluste pakkumisele koos administraatori liidesega ekraanipiltide haldamiseks.

Tavakasutuses ühendage Spectre sellise tööriistaga nagu WebdriverIO või PhantomJS. Viimane teeks ekraanipiltide jäädvustamise tööd, Spectre aga piltide salvestamist ja töötlemist. Ma olen selle fänn, kuna probleemide lahusus muudab kogukonnana lihtsamaks meie valitud testimisvahendi olemasolu, kuid loob ka ühise administraatori liidese.

Proovi

Avage oma tee Spectre'i veebisaidil / testid / uus /. Sealt saate testiteavet kohandada ja esialgse ekraanipildi üles laadida. Pärast testi esitamist minge oma saidi avalehele, kus näete loodud testprojekti koos ühe läbitud teatega. Testi kohta lisateabe saamiseks võite klõpsata sellel lehel olevatel linkidel.

Järgmisena minge tagasi/ testid / uus lehele ja laadige üles uus pilt. Kui olete lõpetanud, naaske põhilehele ja näete, et Spectre käivitas võrdluse ja teatab nüüd ebaõnnestunud testist.

Plussid ja miinused

• Puhas ja sõbralik liides ekraanipiltide haldamiseks
• Ei ürita teha liiga palju asju, suunates jõupingutused testimaastiku konkreetsele alale
• Nõuab teadmisi Ruby serveri seadistamisest
• Nõuab, et teaksite, kuidas andmeid / ekraanipilte REST API kaudu saata

Austatud märkused

On mõned tööriistad, mis minu arvates väärivad mainimist, isegi kui nad ei saanud ülaltoodud loendis esiletõstetud kohta. Nemad on:

• Galeni raamistik
• Shoov
• BackstopJS

Selle teema tööriistade ja artiklite täieliku loendi leiate aadressilt visualregressiontesting.com.

Mis edasi saab?

’See nimekiri on suurepärane, kuid kas te ei saa mulle lihtsalt öelda, millist tööriista kasutada?’ Kuulen, et te küsite. Noh ... ei, sest see sõltub suuresti sellest, mida testite. Kui kontrollite üsna lihtsat saiti, on Wraith või Gemini suurepärased võimalused. Aga kui peate matkima kasutaja toiminguid, siis sobivad paremini WebdriverCSS või PhantomCSS.

Kui te pole kindel, ärge muretsege. Valige lihtsalt üks ja proovige seda. Pole tähtis, millise tööriista valite, saate väärtuslikke õppetunde kasutajaliidese testimise kohta ja selle kohta, kui võimas (ehkki keeruline) see olla võib.

See artikkel ilmus algselt aastal netiajakiri väljaanne 290; osta siit!