5 parasta visuaalisen regressiotestauksen työkalua

Sisältö

• 01. Wraith
• Kokeile sitä
• Hyvät ja huonot puolet
• 02. PhantomCSS
• Kokeile sitä
• Hyvät ja huonot puolet
• 03. Kaksoset
• Kokeile sitä
• Hyvät ja huonot puolet
• 04. Verkko-ohjainCSS
• Kokeile sitä
• Hyvät ja huonot puolet
• 05. Spectre
• Kokeile sitä
• Hyvät ja huonot puolet
• Arvoisat maininnat
• Mitä seuraavaksi?

Useiden viime vuosien aikana olen huomannut, että termi ”visuaalinen regressiotestaus” on lisääntynyt verkkokehityskeskusteluissa yhä enemmän ... ja syystä. Se lupaa tarjota valtavaa arvoa niille, jotka ovat kyllästyneet tarkistamaan sivustoaan manuaalisesti tyyliongelmien varalta.

Tämän kasvavan suosion myötä näyttää siltä, ​​että joka kuukausi julkaistaan ​​uusi työkalu, joka lupaa tarjota mahtavan visuaalisen regressiotestauksen automaation. Valitettavasti olen havainnut eniten unelmia kuin todellisuutta, totuus on, että tämäntyyppiset testit ovat petollisesti monimutkaisia.

On kuitenkin muutamia, jotka erottuvat joukosta. Vaikka jokaisella on etuja ja haittoja, uskon, että jokainen tämän luettelon työkalu on tarkastelun arvoinen.

01. Wraith

Wraith on ollut olemassa useita vuosia. Se oli yksi ensimmäisistä työkaluista kohtauksessa, ja se näkee edelleen parannuksia toiminnallisuuteen, ja yli 200 vetopyyntöä suljettiin GitHub-repossa. Se on käytettävä työkalu kaikille Ruby-alueella kehittyville.

Kokeile sitä

Suorita projektihakemistostasi wraith-asetukset. Suorita sitten wraith sieppaa configs / config.yaml. Tämä suorittaa joukon testejä BBC: n kotisivun kahdella eri versiolla. Kun olet suorittanut koeajon, tutustu kuvakaappausgalleriaasi avaamalla äskettäin luotu laukaukset / gallery.html -sivu valitsemassasi selaimessa.

Voit myös muokata testejäsi. vuonna configs / config.yaml Voit päivittää testattavat sivustot ja sivut sekä asettaa näytön leveydet ja diff-tilan.

Hyvät ja huonot puolet

• YAML-määritystiedoston kanssa on helppo työskennellä
• Voit verrata kahta eri URL-osoitetta
• Asennus voi olla hankalaa, jos et tunne Rubyä
• Yksittäisille sivuille tarkoitettujen vuorovaikutusten suorittaminen voi olla vaikeaa

02. PhantomCSS

Toinen veteraanivaihtoehto, PhantomCSS, on ollut suosittu valinta käyttöliittymäkehittäjien keskuudessa. Sen tuttuus ja toiminnallisuus tekevät PhantomCSS: stä erinomaisen valinnan frontend-ihmisille, jotka haluavat venyttää jalkansa verkkosivustojen testauksen kannalta. PhantomJS / CasperJS: n päälle rakennettu PhantomCSS lisää näiden kahden työkalun tarjoamaa upeaa toiminnallisuutta.

Kokeile sitä

Luo uusi JavaScript-tiedosto seuraavalla koodilla:

casper.start ('http://the-internet.herokuapp.com/checkboxes'). sitten (function () {phantomcss.screenshot ('# valintaruudut', 'ennen napsautusta'); casper.click ('# valintaruutujen syöttö : first-child '); phantomcss.screenshot (' # valintaruudut ',' napsautuksen jälkeen ');});

Suorita sitten tiedosto CapserJS CLI: n kautta: casperjs-testi myfile.js. Komentosarjasi toimii taustalla ja kuvasi tallennetaan kuvakaappauksia kansio.

Hyvät ja huonot puolet

• Monet oppaat ja esitykset siitä
• Rakennettu CasperJS: n päälle, mikä mahdollistaa sivutoimintojen integroinnin testeihin
• Testit rajoitettu PhantomJS: ään
• Ei käyttöliittymää kuvakaappausten tarkistamiseen / hallintaan

03. Kaksoset

Minusta Gemini on houkutteleva, koska se pakkaa perinteisen seleenitestauksen käyttöliittymään, joka ei ole liian monimutkainen. Kuten PhantomCSS: ssä, voit määrittää mukautettuja toimintoja kuvaruutujen ympärille. Toisin kuin PhantomCSS, Gemini menee useita vaiheita pidemmälle tarjoamalla testipaketteja, jotka voivat auttaa koodisi järjestämisessä.

Kokeile sitä

Luo .gemini.yml tiedosto, jolla on seuraava sisältö (korvaa Selenium-ruudukkopalvelimen URL-osoitteen):

rootUrl: http://the-internet.herokuapp.com/checkboxes gridUrl: http: // localhost: 4444 / wd / hub-selaimet: kromi: haluttu Yhteydet: selainNimi: kromi

Luo sitten testitiedosto ja laita se Kaksoset kansion projektin juuressa. Tiedosto voi olla niin yksinkertainen kuin:

gemini.suite ('yandex-search', function (suite) {suite.setUrl ('/ checkboxes') .setCaptureElements ('# checkboxes') .capture ('before click') .capture ('click after', function ( toiminnot, etsi) {actions.click ('# valintaruutujen syöttö: ensimmäinen lapsi');});});

Luo seuraavaksi peruskuvat suorittamalla kaksoset päivitys. Sinun pitäisi nähdä yksi testi läpäissyt. Voit suorittaa regressiotestin kautta kaksosetesti, jossa verrataan uusia kuvia kaksoset / näytöt hakemistoon.

Hyvät ja huonot puolet

• Seleeni-integraation avulla voit testata useilla selaimilla ja laitteilla
• Hyvin dokumentoitu sivusto, jossa on useita esimerkkejä
• Tarjoaa puitteet testien lajittelulle sviiteiksi
• Ei suoraa pääsyä Seleniumiin, mikä rajoittaa sivulla suoritettavien toimintojen tyyppiä
• Saman testin suorittaminen useilla tarkkuuksilla vaatii edistyneen määrityksen

04. Verkko-ohjainCSS

Ensinnäkin varoitus: WebdriverCSS: n tulevaisuus on epävarma, koska sitä yritetään korvata ajantasaisemmalla moduulilla. Mielestäni se on silti mainitsemisen arvoinen, koska sama perusrakenne jatkuu seuraavaan käyttöönottoon.

Geminiin tapaan WebdriverCSS kiinnittyy Seleniumiin sen toiminnallisuuden vuoksi. Se istuu myös toisen työkalun päällä: WebdriverIO. Koska se on osa WebdriverIO-ekosysteemiä, se hyötyy kaikesta, mitä kehys tarjoaa. Tämä sisältää satoja komentoja, jotka voit lähettää selaimelle ennen kuvakaappausten ottamista ja sen jälkeen.

WebdriverCSS integroituu hyvin myös testikehyksiin, kuten Mocha, Jasmine ja Cucumber.js. Lisää yhteys pilviselenium-palveluihin, kuten Sauce Labs ja Browserstack, ja saat kattavan toiminnallisen testipaketin, jossa visuaalinen regressiotestaus on kirsikka yläosassa.

Kokeile sitä

Luo uusi JavaScript-tiedosto (test.js) projektissasi seuraavan sisällön:

var asiakas = vaatia (’webdriverio’). kauko-ohjain ({halutut valmiudet: {selainnimi: ’chrome’}}) vaatii (’webdrivercss’). init (asiakas, {screenWidth: [640,1024]}); var screenshotElement = [{name: ’valintaruudut’, elem: ’#checkboxes’}]; client.init () .url ('http://the-internet.herokuapp.com/checkboxes') .webdrivercss ('ennen napsautusta', screenshotElement) .click ('# valintaruutujen syöttö: ensimmäinen lapsi') .webdrivercss ('napsautuksen jälkeen', screenshotElement) .end ();

Suorita testi kirjoittamalla tämä komento komentoriville: $ solmu test.js. Vahvista luotut kuvat tarkistamalla verkko-ohjaimet kansio. Jos suoritat testin uudelleen ja kuvakaappaukset muuttuvat, huomaat a ero kansio lisätään ja vastaavat diff-kuvat ovat sen sisällä.

Hyvät ja huonot puolet

• Koska se käyttää WebdriverIO: ta, voit hyödyntää kaikkia kehyksen tarjoamia ominaisuuksia
• Eri näytön tarkkuuksien nopea määritys
• Voit piilottaa / peittää tietyt kuvakaappauksen alueet
• Tulevaisuuden epävarmuus, koska tätä erityistä laajennusta ei enää virallisesti ylläpidetä
• Vaatii, että opit käyttämään WebdriverIO: ta

05. Spectre

Toisin kuin muut tämän luettelon työkalut, Spectre ei suorita testejä. Sen sijaan se keskittyy tarjoamaan kuvien vertailuominaisuuksia sekä järjestelmänvalvojan käyttöliittymän kuvakaappausten hallintaan.

Normaalikäytössä yhdistät Spectre -työkalun kuten WebdriverIO tai PhantomJS. Jälkimmäinen tekisi kuvakaappausten sieppaamisen, kun taas Spectre hoitaisi kuvien tallentamisen ja käsittelyn. Olen tämän fani, koska huolenaiheiden erottaminen tekee yhteisöstä helpommaksi valitsemamme testaustyökalun, mutta rakentaa myös yhteisen järjestelmänvalvojan käyttöliittymän.

Kokeile sitä

Avaa polku Spectre-verkkosivustollasi / testit / uusi /. Sieltä voit muokata testitietoja ja ladata alkuperäisen kuvakaappauksen. Kun olet lähettänyt testin, siirry sivustosi pääsivulle, jossa näet luotavan testiprojektin, sekä ilmoituksen yhden läpäisystä. Voit napsauttaa mitä tahansa kyseisen sivun linkkejä saadaksesi lisätietoja testistä.

Palaa seuraavaksi takaisin/ testit / uusi sivulle ja lataa uusi kuva. Kun olet valmis, palaa pääsivulle ja näet, että Spectre suoritti vertailun ja raportoi nyt epäonnistuneesta testistä.

Hyvät ja huonot puolet

• Puhdas, ystävällinen käyttöliittymä kuvakaappausten hallintaan
• Ei yritä tehdä liikaa asioita, keskittämällä ponnistelut tiettyyn testimaiseman alueeseen
• Edellyttää tietoa Ruby-palvelimen asennuksesta
• Edellyttää, että osaat lähettää tietoja / kuvakaappauksia REST-sovellusliittymän kautta

Arvoisat maininnat

On muutama työkalu, jotka ovat mielestäni mainitsemisen arvoisia, vaikka ne eivät saisi suositeltavaa kohtaa yllä olevassa luettelossa. He ovat:

• Galen Framework
• Shoov
• BackstopJS

Löydät kattavan luettelon aiheeseen liittyvistä työkaluista ja artikkeleista osoitteesta visualregressiontesting.com.

Mitä seuraavaksi?

”Tämä luettelo on loistava, mutta etkö voi vain kertoa minulle mitä työkalua käyttää?” Kuulen sinun kysyvän. No ... ei, koska se riippuu suuresti siitä, mitä testaat. Jos tarkistat melko yksinkertaisen sivuston, Wraith tai Gemini ovat loistavia vaihtoehtoja. Mutta jos sinun on jäljiteltävä käyttäjien toimia, WebdriverCSS tai PhantomCSS sopivat paremmin.

Jos et ole varma, älä huoli. Valitse vain yksi ja kokeile sitä. Riippumatta siitä, minkä työkalun valitset, opit arvokkaita kokemuksia käyttöliittymän testauksesta ja siitä, kuinka tehokas (vaikkakin monimutkainen) se voi olla.

Tämä artikkeli ilmestyi alun perin nettilehti numero 290; osta se täältä!