O introducere în rularea farului în mod programatic

Publicat: 2022-03-10

Rezumat rapid ↬ Posibilitatea de a rula suita de analiză Lighthouse de la Google în mod programatic oferă o mulțime de avantaje, în special pentru aplicații web mai mari sau mai complexe. Utilizarea programului Lighthouse permite inginerilor să configureze monitorizarea calității pentru site-urile care necesită mai multă personalizare decât permit aplicațiile simple ale Lighthouse (cum ar fi Lighthouse CI). Acest articol conține o scurtă introducere în Lighthouse, discută avantajele rulării acestuia în mod programatic și parcurge o configurație de bază.

Lighthouse este suita Google de instrumente de analiză a calității site-urilor web. Vă permite să evaluați performanța site-ului dvs., accesibilitatea, SEO și multe altele. De asemenea, este foarte configurabil, făcându-l suficient de flexibil pentru a fi util pentru toate site-urile, de la cele mai simple la cele extrem de complexe. Această flexibilitate include mai multe moduri diferite de a rula testele, permițându-vă să alegeți metoda care funcționează cel mai bine pentru site-ul sau aplicația dvs.

Una dintre cele mai simple moduri de a rula Lighthouse este prin intermediul panoului Chrome DevTools Lighthouse. Dacă vă deschideți site-ul în Chrome și apoi deschideți Chrome DevTools, ar trebui să vedeți o filă „Lighthouse”. De acolo, dacă faceți clic pe „Generează raport”, ar trebui să obțineți un raport complet al valorilor de calitate ale site-ului dvs.

Pe ce mă concentrez în acest articol, totuși, se află la celălalt capăt al spectrului. Rularea programului Lighthouse cu JavaScript ne permite să configuram rulări personalizate, alegerea și alegerea caracteristicilor pe care dorim să le testăm, colectarea și analizarea rezultatelor și specificarea opțiunilor de configurare unice pentru site-urile și aplicațiile noastre.

De exemplu, poate lucrați pe un site care este accesibil prin mai multe adrese URL - fiecare cu propriile date și stil și poate chiar cu marcaje pe care doriți să le puteți analiza. Sau poate doriți să culegeți datele de la fiecare test și să le compilați sau să le analizați în moduri diferite. Abilitatea de a alege modul în care doriți să rulați o analiză Lighthouse pe baza a ceea ce funcționează cel mai bine pentru site-ul sau aplicația dvs. face mai ușor să monitorizați calitatea site-ului și să identificați unde există probleme cu site-ul dvs. înainte ca acestea să se acumuleze sau să cauzeze prea multe probleme pentru dvs. utilizatorii site-ului.

Rularea programului Lighthouse nu este cea mai bună alegere pentru fiecare site și vă încurajez să explorați toate metodele diferite pe care echipa Lighthouse le-a creat pentru utilizarea instrumentului. Dacă decideți să utilizați Lighthouse în mod programatic, totuși, informațiile și tutorialul de mai jos ar trebui să vă ajute să începeți.

Personalizarea opțiunilor Lighthouse

Avantajul rulării programului Lighthouse nu este doar capacitatea de a configura Lighthouse în sine, ci mai degrabă toate lucrurile pe care ați putea să doriți sau trebuie să le faceți în jurul testelor Lighthouse. Lighthouse are o documentație excelentă pentru a vă ajuta să începeți. Pentru a profita la maximum de rularea programului, totuși, există două locuri principale în care va trebui să aprofundați și să aflați mai multe despre cum funcționează Lighthouse: configurarea testelor și raportarea rezultatelor testelor.

Configurația de testare a farului

Configurarea unei rulări de testare Lighthouse este una dintre acele sarcini care pot fi atât de simple sau atât de complexe, după cum doriți.

Când rulați Lighthouse în mod programatic, există trei locuri în care puteți furniza opțiuni personalizate: adresa URL pe care o veți testa, opțiunile Chrome și obiectul de configurare Lighthouse. Puteți vedea că toți cei trei sunt parametri în funcția pentru rularea Lighthouse din documentația Lighthouse:

 function launchChromeAndRunLighthouse(url, opts, config = null) { return chromeLauncher.launch({chromeFlags: opts.chromeFlags}).then(chrome => { opts.port = chrome.port; return lighthouse(url, opts, config).then(results => { return chrome.kill().then(() => results.lhr) }); }); }

Puteți folosi orice cod de care aveți nevoie pentru a crea acești parametri. De exemplu, să presupunem că aveți un site cu mai multe pagini sau adrese URL pe care doriți să le testați. Poate doriți să rulați acel test într-un mediu CI ca parte a sarcinilor dumneavoastră CI, verificând toate paginile necesare de fiecare dată când se execută sarcina. Folosind această configurare, puteți folosi JavaScript pentru a vă crea adresele URL și pentru a crea o buclă care va rula Lighthouse pentru fiecare.

Orice opțiune Chrome de care aveți nevoie poate fi specificată într-un obiect care este transmis la Chrome-Launcher. În exemplul din documentație, obiectul opts conține o matrice pe care o numim chromeFlags , pe care o puteți trece la chrome-launcher și un port în care puteți salva portul folosit de chrome-launcher și apoi îl puteți transmite la Lighthouse.

În cele din urmă, obiectul de configurare Lighthouse vă permite să adăugați orice opțiuni specifice Lighthouse. Pachetul Lighthouse oferă un obiect de configurare implicit care poate fi utilizat ca atare sau extins și modificat. Puteți folosi acest obiect pentru a face o multitudine de lucruri, inclusiv pentru a specifica ce categorii de teste Lighthouse doriți să testați.

Mai multe după săritură! Continuați să citiți mai jos ↓

Puteți utiliza emulatedFormFactor pentru a specifica dacă doriți ca testul să ruleze într-un emulator mobil sau desktop. Puteți folosi extraHeaders pentru a adăuga orice cookie-uri pe care ați putea avea nevoie să le utilizați în browser. De exemplu, un test care rulează numai categoria de accesibilitate pe un emulator desktop care scoate rezultatele ca HTML poate avea un obiect de configurare care arată astfel:

 const lighthouseOptions = { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html'], }, }

Acest exemplu reprezintă o configurație minimă. Poți face mult mai mult. Documentele de configurare Lighthouse au mult mai multe informații. Au, de asemenea, un set de obiecte de configurare eșantion pentru unele implementări mai complexe.

Raportare personalizată a rezultatelor

Când rulați Lighthouse în mod programatic, puteți avea rezultatele returnate în una sau mai multe dintre cele trei opțiuni formatate și - și aceasta este cea mai interesantă piesă din punctul meu de vedere - puteți avea acces la obiectul brut Lighthouse Result (LHR).

HTML, JSON, CSV

Lighthouse va formata automat rezultatele în trei moduri diferite: HTML, JSON sau CSV. Acestea sunt toate rezultate preconfigurate bazate pe șablonul de raportare Lighthouse de bază, care este ceea ce vedeți dacă rulați un test Lighthouse în interiorul Chrome DevTools, de exemplu. În obiectul de configurare lighthouseOptions din secțiunea anterioară, puteți vedea o cheie pentru output care conține o matrice cu un singur șir: html . Aceasta specifică faptul că vreau doar rezultatele returnate formatate ca HTML. Dacă aș dori rezultatele atât ca HTML, cât și ca JSON, acea matrice ar arăta ca ['html', 'json'] .

Odată ce Lighthouse a rulat, va returna un obiect cu rezultate care va conține două chei: report și lhr . Vom vorbi despre conținutul cheii lhr în secțiunea următoare, dar cheia de report conține o matrice cu rezultatele formatate așa cum ați cerut. Deci, de exemplu, dacă am solicitat ['html', 'json'] , atunci results.report[0] va conține rezultatele noastre formatate ca HTML și results.report[1] va conține rezultatele noastre formatate ca JSON.

Obiectul LHR

Rularea programului Lighthouse vă oferă, de asemenea, acces la un obiect cu rezultate mult mai flexibil: obiectul LHR. Acest obiect conține rezultatele brute și câteva metadate din rularea dvs. Lighthouse. O documentație mai completă poate fi găsită în depozitul Lighthouse Github.

Puteți utiliza aceste rezultate în mai multe moduri, inclusiv prin crearea de rapoarte personalizate și colectarea datelor din mai multe execuții pentru analiză.

Exemplu: Efectuarea unui test de accesibilitate pentru dispozitive mobile și desktop

Să presupunem că am un site care încarcă diferite componente în funcție de dacă utilizatorul folosește un ecran mai mic sau unul mai mare, ceea ce înseamnă că HTML-ul pentru fiecare versiune a site-ului va fi ușor diferit. Vreau să mă asigur că ambele versiuni ale site-ului obțin un scor de 95 la testele de accesibilitate Lighthouse și că niciun cod nu este trimis la filiala noastră main care nu îndeplinește acest standard.

Notă : Dacă doriți să vedeți un exemplu de lucru al codului de mai jos care analizează pagina de pornire Sparkbox, puteți găsi depozitul aici.

Pot configura Lighthouse să ruleze categoria de accesibilitate de două ori, oferind diferite obiecte de configurare pentru fiecare - unul setând emulatedFormFactor pe desktop și unul setându-l pe mobile . O modalitate ușoară de a face acest lucru este să creați o matrice cu ambele obiecte, prezentate mai jos.

 const lighthouseOptionsArray = [ { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'desktop', output: ['html', 'json'], }, }, { extends: 'lighthouse:default', settings: { onlyCategories: ['accessibility'], emulatedFormFactor:'mobile', output: ['html', 'json'], }, }, ]

Apoi, pot crea o funcție care va trece prin această matrice și va rula un test Lighthouse pentru fiecare obiect găsit în interiorul matricei.

Un lucru de remarcat este că este necesar să se introducă o întârziere între fiecare rulare, altfel Chromium poate deveni confuz și rulările vor avea eroare. Pentru a face acest lucru, am adăugat o funcție de wait care returnează o promisiune când intervalul setTimeout s-a încheiat.

 function wait(val) { return new Promise(resolve => setTimeout(resolve, val)); } function launchLighthouse(optionSet, opts, results) { return chromeLauncher .launch({ chromeFlags: opts.chromeFlags }) .then(async chrome => { opts.port = chrome.port; try { results = await lighthouse(url, opts, optionSet); } catch (e) { console.error("lighthouse", e); } if (results) reportResults(results, runEnvironment, optionSet, chrome); await wait(500); chrome.kill(); }); } async function runLighthouseAnalysis() { let results; const opts = { chromeFlags: ["--no-sandbox", "--headless"] }; for (const optionSet of lighthouseOptionsArray) { console.log("****** Starting Lighthouse analysis ******"); await launchLighthouse(optionSet, opts, results); } }

În acest caz, trimit rezultatele unei funcții reportResults . De acolo, salvez rezultatele în fișiere locale, printez rezultatele pe consolă și trimit rezultatele unei funcții care va determina dacă testele trec sau nu depășesc pragul nostru de accesibilitate.

 async function reportResults(results, runEnvironment, optionSet, chrome) { if (results.lhr.runtimeError) { return console.error(results.lhr.runtimeError.message); } await writeLocalFile(results, runEnvironment, optionSet); printResultsToTerminal(results.lhr, optionSet); return passOrFailA11y(results.lhr, optionSet, chrome); }

Pentru acest proiect, vreau să pot salva rezultatele JSON într-un director specificat pentru rulările noastre de testare CI și fișierul HTML într-un director specificat pentru rulările noastre de testare locale. Modul în care Lighthouse returnează aceste tipuri diferite de rezultate este într-o matrice în ordinea în care au fost solicitate.

Deci, în acest exemplu, în obiectul nostru lighthouseOptions , matricea noastră cere mai întâi HTML, apoi JSON. Deci, matricea de report va conține mai întâi rezultatele formatate în HTML și în al doilea rând rezultatele formatate în JSON. Funcția writeToLocalFile salvează apoi versiunea corectă a rezultatelor într-un fișier cu un nume personalizat.

 function createFileName(optionSet, fileType) { const { emulatedFormFactor } = optionSet.settings; const currentTime = new Date().toISOString().slice(0, 16); const fileExtension = fileType === 'json' ? 'json' : 'html'; return `${currentTime}-${emulatedFormFactor}.${fileExtension}`; } function writeLocalFile(results, runEnvironment, optionSet) { if (results.report) { const fileType = runEnvironment === 'ci' ? 'json' : 'html'; const fileName = createFileName(optionSet, fileType); fs.mkdirSync('reports/accessibility/', { recursive: true }, error => { if (error) console.error('error creating directory', error); }); const printResults = fileType === 'json' ? results.report[1] : results.report[0]; return write(printResults, fileType, `reports/accessibility/${fileName}`).catch(error => console.error(error)); } return null; }

De asemenea, vreau să imprim rezultatele pe terminal pe măsură ce rulările de testare se termină. Aceasta oferă o modalitate rapidă și ușoară de a vizualiza rezultatele fără a fi nevoie să deschideți un fișier.

 function printResultsToTerminal(results, optionSet) { const title = results.categories.accessibility.title; const score = results.categories.accessibility.score * 100; console.log('\n********************************\n'); console.log(`Options: ${optionSet.settings.emulatedFormFactor}\n`); console.log(`${title}: ${score}`); console.log('\n********************************'); }

Și, în sfârșit, vreau să pot eșua testul dacă scorurile de accesibilitate nu ating scorul meu de prag de 95.

 function passOrFailA11y(results, optionSet, chrome) { const targetA11yScore = 95; const { windowSize } = optionSet; const accessibilityScore = results.categories.accessibility.score * 100; if (accessibilityScore) { if (windowSize === 'desktop') { if (accessibilityScore < targetA11yScore) { console.error(`Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}`); chrome.kill(); process.exitCode = 1; } } if (windowSize === 'mobile') { if (accessibilityScore < targetA11yScore) { console.error(`Target accessibility score: ${targetA11yScore}, current accessibility score ${accessibilityScore}`); chrome.kill(); process.exitCode = 1; } } } }

Vă invit pe toți să vă jucați cu el și să explorați toate modalitățile diferite prin care Lighthouse vă poate ajuta să vă monitorizați calitatea site-ului.

Note finale

Deși am păstrat în mod intenționat exemplul de mai sus relativ simplu, sper că v-a oferit o imagine de ansamblu bună asupra a ceea ce se poate realiza atunci când rulați Lighthouse în mod programatic. Și sper că vă inspiră să găsiți noi modalități de a utiliza acest instrument flexibil și puternic.

După cum spunea Peter Drucker:

„Dacă nu o poți măsura, nu o poți îmbunătăți.”

Capacitatea nu numai de a măsura, ci și de a monitoriza calitatea site-ului nostru web, în special pentru site-uri complexe, ne va ajuta în mare măsură să construim un web mai bun.

Citiți suplimentare despre SmashingMag:

Testare A/B pentru experiențe mobile-first
Cum să testați un concept de design pentru eficacitate
Importanța testării manuale a accesibilității
Învățare automată pentru dezvoltatorii front-end cu Tensorflow.js
Începeți cu designul UI cu aceste sfaturi pentru a vă accelera fluxul de lucru