Share
Capturarea capturilor de ecran este enervantă, dar, de cele mai multe ori, trebuie făcută și, de obicei, tu ești - Dezvoltatorul - care trebuie să o facă. Luând câteva capturi de ecran nu este prea rău, dar permiteți, de exemplu, să spunem că acum lucrați la un site web care utilizează Responsive Web Design și trebuie să faceți de cinci ori mai multe capturi de ecran la diferite ferestre de vizualizare. Asta, o sarcină de două ori enervantă a început să mănânce în timpul vostru de prânz.
Astăzi voi trece prin scrierea unui script rapid și simplu pentru a lua câteva capturi de ecran ale oricărui site la diferite ferestre de vizualizare și pentru a salva imaginile pe disc. Acesta este un lucru pe care l-am văzut pentru prima oară la mediaqueri.es și am început să îl pun în aplicare în procesul de construire. Nu este ideal pentru teste reale, deoarece acționează mai mult ca un test de sănătate și oferă o imagine de ansamblu bună pentru orice am putea lucra la implicarea unui Web Responsiv.
Când se execută o construcție, un mic script care folosește PhantomJS și CasperJS poate merge și captează o captură de ecran la diferite ferestre de vizualizare pe care le-am definit și le oferă o imagine de ansamblu rapidă asupra oricărei pagini dorite. Este deosebit de bun atunci când lucrați într-o echipă mai mare și este posibil să nu aveți timp înainte de fiecare construire pentru a merge și a verifica fiecare pagină și modul pentru modul în care se uită la diferite rezoluții. De asemenea, vă va oferi ceva pentru a arăta clientul la intervale regulate, pentru a afișa modul în care site-ul lor se flexează la diferite ferestre de vizualizare.
Notă: PhantomJS este un browser WebKit fără cap și orice redat va folosi redarea WebKit, deci nu reprezintă o reprezentare reală a modului în care site-ul ar fi afișat pe diverse dispozitive care ar putea rula diferite browsere și în timp ce poți schimba șirul Agent utilizator trimis site-ul în sarcină, acest lucru nu schimbă motorul de randare.
PhantomJS are un excelent API JavaScript construit cu testarea în minte. Pentru o introducere excelentă în PhantomJS și folosirea acesteia pentru testare, există un tutorial chiar aici pe nettuts și asigurați-vă că verificați site-ul oficial și documentația.
CasperJS este o unealtă care se află pe partea de sus a PhantomJS și facilitează procesul de scriere a scripturilor Phantom prin furnizarea de funcții, metode și zahăr sintactic.
S-ar putea să aveți deja instalat Phantom, mai ales dacă deja testați codul clientului, dacă nu, este destul de drept și puteți obține instrucțiuni mai detaliate pe site-ul oficial
Pentru utilizatorii de Windows, există un executabil pentru descărcare și executare.
Pentru utilizatorii de Mac, există atât binar, cât și pe care îl puteți instala utilizând Homebrew:
pregătiți actualizarea && brew install phantomjs
Pentru utilizatorii Linux, există un binar pe 64 de biți sau aveți opțiunea de a compila PhantomJS din sursă.
Odată instalat, puteți deschide un terminal și puteți verifica dacă totul este OK executând:
phantomjs --versiune
care ar trebui să se întoarcă:
1.8.0
Odată ce ați instalat Phantom, puteți continua și instalați CasperJS. Pentru utilizatorii de Mac, puteți utiliza din nou Homebrew:
brew instalează casperjs
Pentru utilizatorii de Windows, trebuie să vă atașați CALE fișier cu "C: \ casperjs \ batchbin" (Modificați această cale în funcție de locul în care doriți să depozitați CasperJS). În cadrul batchbin director, există un fișier batch numit casperjs.bat, acesta va fi scriptul care rulează scripturile dvs. Casper fără a fi nevoie să aveți nevoie de Ruby sau Python pentru al rula. Ori de câte ori trebuie să executați scriptul Casper, trebuie doar să îl utilizați caseta scriptname.js casperjs.bat Decat casperjs scriptname.js.
Verificați apoi:casperjs --versiune se intoarce:1.0.0
Ambele numere de versiune sunt actualizate la data redactării acestui articol.
Acum, când avem amândouă aceste alergări, hai să facem câteva runde Hello Worlds pentru a ne asigura că ambele Phantom și Casper rulează conform așteptărilor.
Creați un director nou și în interiorul acestuia, faceți două fișiere JavaScript, hellophantom.js și hellocasper.js. Deschideți-le în editorul ales de dvs. și începeți cu asigurarea faptului că Phantom funcționează corect.
Vom începe în hellophantom.js fișier și de a scrie un test rapid pentru a apuca titlul unei pagini web. Nu voi acoperi în detaliu API-ul PhantomJS, acest lucru vă va oferi o introducere rapidă și o încercare a instalării. Dacă aveți deja PhantomJS, puteți trece peste această parte.
Mai întâi trebuie să setăm câteva variabile, una care instanțiată modulul "pagina web" și alta ca o variabilă "URL".
Accentsconagua
var pagina = necesită ("pagina web"). create (), url = "http://net.tutsplus.com"; Apoi, putem crea funcția care navighează către pagina web, trecem în URL ca argument și o funcție de retur. Primiți un statut în apelul nostru de apel (succes sau eșec) pe deschis metodă.
page.open (url, funcția (status) );
Acum putem apela funcția de evaluare pentru a obține titlul paginii. Putem returna rezultatul, la o variabilă, atribuindu-i funcția:
page.open (url, funcția (status) var title = page.evaluate (funcția () return document.title;););
În cele din urmă, vom încerca să deconectăm acest lucru, astfel încât să vedem rezultatul în terminal și apoi să ieșim din procesul Phantom.
console.log ("Bună ziua, lumea! Titlul paginii pe" + url + "este" + titlu "); phantom.exit (); Scenariul nostru finit va arata cam asa.
var pagina = necesită ("pagina web"). create (), url = "http://net.tutsplus.com"; page.open (url, function (status) var title = page.evaluate (function () retur document.title;); console.log (' + titlu); phantom.exit ();); CD în directorul unde este localizat acest script și îl puteți executa folosind următoarea comandă:
phantomjs hellophantom.js
După câteva secunde, veți obține următorul rezultat în terminalul dvs.:
Salut Lume! Titlul paginii de pe http://net.tutsplus.com este tutoriale de dezvoltare web, de la incepatori la avansati | Nettuts+
Asta e minunat, dar înainte de a merge mai departe, putem face acest cod puțin mai flexibil, cu un re-factor rapid. Există câteva module care sunt disponibile pentru noi și una dintre ele este modulul de sistem. Unele proprietăți ale modulului de sistem vă oferă acces la lucruri precum ID-ul de proces pe care rulează PhantomJS sau sistemul de operare folosit, dar cel care ne interesează este args proprietate.
args proprietatea returnează o serie de argumente ale liniei de comandă. Primul element din matrice este întotdeauna numele de script, dar putem trece orice număr de argumente din linia de comandă și să le folosim în scriptul nostru. Așadar, putem trece adresa URL pe care dorim să o deschidem, cu fantomă, în linia de comandă, astfel încât să putem reutiliza scriptul oricând, fără a fi nevoie să îl editați de fiecare dată.
Trebuie doar să solicităm mai întâi modulul de sistem și apoi să schimbăm URL-ul variabila a fi argumentul prin care trecem prin:
sistem = cer ('sistem'), url = system.args [1]; și acum putem rula scriptul cu următoarea comandă:
phantomjs hellophantom.js http://net.tutsplus.com
Acum, când știm că Phantom-ul funcționează, putem trece la testarea lui Casper. Vom replica același script de testare, dar de data aceasta vom folosi API-ul Casper.
Mai întâi trebuie să instanțiăm o instanță casper:
var casper = necesită ("casper") create (); și apoi apucați adresa URL de la unul dintre argumentele transmise de la terminal. Casper are propriul parser de linie de comandă care se află pe partea superioară celei care vine cu Phantom și putem obține acces la orice argumente care au trecut prin linia de comandă la fel cum am făcut-o anterior. Singura diferență fiind aceea că primul nostru argument va fi primul care trecem și nu numele de script (așa cum a fost cu Fantoma)
var url = casper.cli.args [0];
Caser CLI API poate lua de asemenea opțiuni numite, precum și argumente poziționale, putem folosi acest lucru dacă vrem să stabilim câteva opțiuni sau să fim mai amănunțite cu scriptul nostru, de exemplu:
casperjs hellocasper.js argumentOne argumentTwo --option1 = this --option2 = că
și putem folosi aceste opțiuni numite cli.get ( 'OptionName'), astfel încât am putea face ceva de felul următor, pentru a trece în ambele argumente și opțiuni (dacă aveam câteva opțiuni config care trebuiau setate):
var argumentOne = casper.cli.args [0]; var argumentTwo = casper.cli.args [1]; var thisOption = casper.cli.get ("opțiune"); var thatOption = casper.cli.get ("opțiunea2"); Pentru moment, voi folosi argumentul pozițional pentru a obține adresa URL. Înainte vom conduce start() pentru a face orice fel de navigație. Metoda de pornire are o adresă URL șir și o funcție de retur.
casper.start (url, function () this.echo ('Bună ziua, lumea! Titlul paginii pe' + url + 'este');); Dacă nu doriți să aveți toate funcționalitățile, puteți utiliza funcția atunci() metodă. Fiecare atunci() Apelul de metode devine adăugat ca un pas în stivă și este executat într-un mod liniar, deci, mai degrabă decât cele de mai sus, ați putea avea:
casper.start (url); casper.then (function () this.echo ('Bună ziua, lumea! Titlul paginii pe' + url + 'este');); Prefer să o folosesc atunci(), așa cum mi se pare mai ușor de citit, dar fie este acceptabil și într-adevăr este doar o chestiune de gust.
Pentru a obține titlul paginii există deja a getTitle () metode disponibile pentru noi, astfel încât să putem folosi doar acest lucru în nostru ecou.
casper.start (url); casper.then (function () this.echo ('Bună ziua, lumea! Titlul paginii pe' + url + 'este' + this.getTitle ());); În cele din urmă, conducem pașii noștri cu alerga() metoda, care este o metodă obligatorie, necesară pentru ca scriptul dvs. Casper să ruleze. Această metodă poate avea și un opțional onComplete callback pentru a rula după ce toți pașii au fost finalizați. Dacă ați utilizat apelul invers, trebuie să vă asigurați că ieșiți din procesul Casper utilizând Ieșire() metodă. Iată un exemplu de ambele:
// nu este nevoie să utilizați metoda de ieșire. casper.run (); // OR // aceasta are nevoie de metoda de ieșire casper.run (function () this.echo ('Totul din stack sa încheiat'); this.exit ();) Alternativ, puteți lăsa în urma lanțului metoda de ieșire după ecou:
casper.run (funcția () this.echo ('Totul din stack sa terminat'). Din nou, doar o chestie de gust.
Acum, scriptul nostru complet HelloCasper.js ar trebui să arate astfel:
var casper = necesită ("casper") create (); var url = casper.cli.args [0]; casper.start (url, function () this.echo ('Hello, World! Titlul paginii pe' + url + 'este' + this.getTitle ());); casper.run (funcția () this.echo ('Totul din stack sa încheiat.') exit ();); Acum putem rula scriptul Casper cu următoarea comandă:
casperjs hellocasper.js http://net.tutsplus.com
Nu face nimic diferit de ceea ce făceam deja cu Phantom, Casper ne dă un API frumos (cu unele extras adăugate) pentru a sta pe vârful Phantom-ului și face codul să scriem ceva mai detaliat și mai ușor de citit, asta e în special atunci când intri în scrierea de scripturi care trebuie să navighezi pe un site.
Permiteți acum să vă scufundați în salvarea unor instantanee ale ecranului nostru.
Am de gând să încep cu un fișier numit casperscreens.js și instanțiat Casper. Apoi, configurați o matrice care să conțină lățimile de vizualizare dorite pe care vrem să le capturăm. Fiecare element din matrice va consta dintr-o altă matrice care va avea lățimea și înălțimea pe care dorim să le setăm.
viewportSizes = [[320,480], [320,568], [600,1024], [1024,768], [1280,800], [1440,900]]
De asemenea, voi stabili un var pentru obținerea URL-ului din linia de comandă și apoi vreau să rulez un regex pe adresa URL pentru a crea un director pentru a salva capturile de ecran inch Voi elimina doar http: // și înlocuiți perioadele cu cratime. Atunci o să fugim casper.start ().
saveDir = url.replace (/ [^ a-zA-Z0-9] / gi, '-').
Acum vom folosi o buclă și pentru fiecare dimensiune a ferestrei de vizualizare, apucați o captură de ecran a adresei URL specificate. Vom seta portul de vizualizare la dimensiunile definite în elementul array pe care ne aflăm - deschideți adresa URL - așteptați 5000 de milisecunde pentru a vă asigura că pagina este încărcată - și apoi captați două tipuri de capturi de ecran.
Prima este pentru înălțimea și lățimea efectivă definite, pentru aceasta folosim captură() metoda care are două argumente - un șir pentru fișierul de ieșire și un argument pentru obiect pentru a stabili ce parte a paginii să clipă. Al doilea este pentru o captură completă a paginii cu doar lățimea definită și o facem folosind captureSelector () metodă care captează zona în selectorul definit, în cazul nostru, pur și simplu folosim corp iar această metodă are două argumente, primul fiind numele fișierului, iar al doilea este selectorul.
Deși imaginea actuală definită este utilă, am descoperit că este util să aveți și o captură de ecran complet pe pagină fără crom, astfel încât să puteți vedea modul în care curge toată pagina.
casper.each (viewportSizes, funcția (self, viewportSize, i) // a seta două vars pentru înălțimea și lățimea ferestrei de vizualizare, pe măsură ce ne bifăm fiecare element din array viewport var width = viewportSize [0], height = viewportSize [ ; // da un timp pentru ca pagina sa incarce casper.wait (5000, function () // a seta fereastra de vizualizare la inaltimea si latimea dorita this.viewport (latime, inaltime); casper.thenOpen (url, function () this.echo ('Deschidere la' + lățime); / / Configurați două vars, una pentru fullpage save, una pentru portul de vizualizare real salvați var FPfilename = saveDir + '/ fullpage-' + width + ".png"; var ACfilename = saveDir + '/' + lățime + '-' + înălțime + ".png"; // Captură selector capturează întregul corp this.captureSelector (FPfilename, 'body'); pagina this.capture (numele fișierului AC, top: 0, stânga: 0, lățimea: lățimea, înălțimea: înălțimea); this.echo ("snapshot taken");)));); În cele din urmă numim alerga() și în funcția de apel invers, voi revedea că capturarea a terminat.
casper.run (function () this.echo ('Capturare terminată pentru' + url) .exit ();); Scriptul complet ar trebui să arate astfel:
var casper = necesită ("casper") create (), viewportSizes = [320,480], [320,568], [600,1024], [1024,768], [1280,800] url = casper.cli.args [0], saveDir = url.replace (/ [^ a-zA-Z0-9] / gi, '-') .pentru (); casper.each (viewportSizes, functie (self, viewportSize, i) // seta doua vars pentru inaltimea si latimea ferestrei de vizualizare ca si bulet prin fiecare element din array viewport var width = viewportSize [0] = viewportSize [1]; // da un timp pentru ca pagina sa incarce casper.wait (5000, function () // setati fereastra de vizualizare la inaltimea si latimea dorita ;. viewport (latime, inaltime); casper.thenOpen ( url, function () this.echo ('Deschidere la' + lățime); // Configurați două vars, unul pentru fullpage save, unul pentru portul de vizualizare real salvați var FPfilename = saveDir + '/ fullpage-' ".png"; var ACfilename = saveDir + '/' + lățime + '-' + înălțime + ".png"; // Captură selector capturează întregul corp this.captureSelector (FPfilename, 'body'); o selecție definită o f pagina this.capture (ACfilename, top: 0, left: 0, width: width, height: height); this.echo ("instantaneu luat"); ); ); ); casper.run (function () this.echo ('Capturare terminată pentru' + url) .exit ();); Și acum putem rula acest script utilizând următoarea comandă:
casperjs casperscreens.js http://todomvc.com
Am ales să capturez câteva ecrane de la todomvc.com pur și simplu pentru că este un site receptiv care poate afișa felul de rezultate pe care le căutăm.
Acum, dacă navigați la directorul unde a fost rulat scriptul, veți vedea că un nou director a fost creat, iar în interior sunt toate PNG-urile dvs..
Așa că am reușit să scriem un pic destul de mic de JavaScript care să salveze o mulțime de hassle, data viitoare când șeful sau clientul dorește o grămadă de capturi de ecran, oferind în același timp și un script suplimentar pe care îl putem adăuga la setul nostru de instrumente când facem niște teste . Sigur, acest lucru ne arată doar o redare WebKit, dar pentru mulți, asta e destul de bun.
Acum, încercați să integrați acest lucru în procesul dvs. de construire, să îl rulați alături de celelalte teste și să utilizați funcția de captare a ecranului, pentru a nu testa numai reactivitatea site-ului dvs., ci modul în care călătoria utilizatorilor ar putea arăta pe ecrane de dimensiuni diferite. De asemenea, verificați Grunt plugin grunt-casper dacă Grunt face parte din procesul dvs. de construire.
Dacă sunteți un fan al CoffeeScript, puteți încerca chiar să re-scrieți acest script în sintaxa CoffeeScript, doar pentru a vă asigura că fișierul se termină cu .cafea extensie:
casperjs casperscreen.coffee http://example.com
Și nici nu trebuie să vă faceți griji cu privire la precompilarea script-urilor dvs. CoffeeScript, Casper.
Există atât de mult atât pentru CasperJS cât și pentru PhantomJS, așa că verificați site-urile respective și vedeți cum pot ajuta la testarea dvs..
