Pengantar Menjalankan Lighthouse Secara Terprogram

Diterbitkan: 2022-03-10

Ringkasan cepat Mampu menjalankan rangkaian analisis Lighthouse Google secara terprogram memberikan banyak keuntungan, terutama untuk aplikasi web yang lebih besar atau lebih kompleks. Menggunakan Lighthouse secara terprogram memungkinkan para insinyur untuk menyiapkan pemantauan kualitas untuk situs yang membutuhkan lebih banyak penyesuaian daripada yang dimungkinkan oleh aplikasi Lighthouse (seperti Lighthouse CI) secara langsung. Artikel ini berisi pengenalan singkat tentang Lighthouse, membahas keuntungan menjalankannya secara terprogram, dan membahas konfigurasi dasar.

Lighthouse adalah rangkaian alat analisis kualitas situs web Google. Ini memungkinkan Anda untuk menilai kinerja situs Anda, aksesibilitas, SEO, dan banyak lagi. Ini juga sangat dapat dikonfigurasi, membuatnya cukup fleksibel untuk berguna untuk semua situs, dari yang paling sederhana hingga yang sangat kompleks. Fleksibilitas ini mencakup beberapa cara berbeda dalam menjalankan pengujian, memungkinkan Anda memilih metode yang paling sesuai untuk situs atau aplikasi Anda.

Salah satu cara paling sederhana untuk menjalankan Lighthouse adalah melalui panel Mercusuar DevTools Chrome. Jika Anda membuka situs Anda di Chrome dan kemudian membuka DevTools Chrome, Anda akan melihat tab "Mercusuar". Dari sana, jika Anda mengklik "Buat Laporan", Anda akan mendapatkan laporan lengkap tentang metrik kualitas situs Anda.

Apa yang saya fokuskan dalam artikel ini, bagaimanapun, adalah di ujung lain dari spektrum. Menjalankan Lighthouse secara terprogram dengan JavaScript memungkinkan kami untuk mengonfigurasi proses kustom, memilih dan memilih fitur yang ingin kami uji, mengumpulkan dan menganalisis hasil, dan menentukan opsi konfigurasi yang unik untuk situs dan aplikasi kami.

Misalnya, mungkin Anda bekerja di situs yang dapat diakses melalui banyak URL — masing-masing dengan data dan gayanya sendiri dan bahkan mungkin markup yang ingin Anda analisis. Atau mungkin Anda ingin mengumpulkan data dari setiap uji coba dan mengkompilasi atau menganalisisnya dengan cara yang berbeda. Memiliki kemampuan untuk memilih bagaimana Anda ingin menjalankan analisis Lighthouse berdasarkan apa yang paling cocok untuk situs atau aplikasi Anda, memudahkan untuk memantau kualitas situs dan menunjukkan dengan tepat di mana ada masalah dengan situs Anda sebelum menumpuk atau menyebabkan terlalu banyak masalah untuk Anda. pengguna situs.

Menjalankan Lighthouse secara terprogram bukanlah pilihan terbaik untuk setiap situs dan saya mendorong Anda untuk menjelajahi semua metode berbeda yang telah dibuat oleh tim Lighthouse untuk menggunakan alat ini. Namun, jika Anda memutuskan untuk menggunakan Lighthouse secara terprogram, informasi dan tutorial di bawah ini diharapkan dapat membantu Anda memulai.

Menyesuaikan Opsi Mercusuar

Keuntungan menjalankan Lighthouse secara terprogram bukan hanya kemampuan untuk mengonfigurasi Lighthouse itu sendiri, melainkan semua hal yang mungkin Anda inginkan atau perlu lakukan di sekitar pengujian Lighthouse. Lighthouse memiliki beberapa dokumentasi bagus untuk membantu Anda memulai. Namun, untuk mendapatkan hasil maksimal dari menjalankannya secara terprogram, ada dua tempat utama di mana Anda perlu menggali dan mempelajari lebih lanjut tentang cara kerja Lighthouse: mengonfigurasi pengujian Anda dan melaporkan hasil pengujian Anda.

Konfigurasi Uji Coba Lighthouse

Mengonfigurasi uji coba Lighthouse adalah salah satu tugas yang bisa sesederhana atau serumit yang Anda suka.

Saat menjalankan Lighthouse secara terprogram, ada tiga tempat di mana Anda dapat memberikan opsi khusus: URL yang akan Anda uji, opsi Chrome, dan objek konfigurasi Lighthouse. Anda dapat melihat ketiga parameter ini dalam fungsi untuk menjalankan Lighthouse dari dokumentasi 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) }); }); }

Anda dapat menggunakan kode apa pun yang Anda butuhkan untuk membuat parameter ini. Misalnya, Anda memiliki situs dengan beberapa halaman atau URL yang ingin Anda uji. Mungkin Anda ingin menjalankan pengujian itu di lingkungan CI sebagai bagian dari tugas CI Anda, memeriksa semua halaman yang diperlukan setiap kali tugas berjalan. Dengan menggunakan pengaturan ini, Anda dapat menggunakan JavaScript untuk membuat URL Anda dan membuat loop yang akan menjalankan Lighthouse untuk masing-masing URL.

Opsi Chrome apa pun yang mungkin Anda perlukan dapat ditentukan dalam objek yang diteruskan ke chrome-launcher. Dalam contoh dari dokumentasi, objek opts berisi larik yang kami sebut chromeFlags yang dapat Anda teruskan ke chrome-launcher dan port tempat Anda dapat menyimpan port yang digunakan oleh chrome-launcher dan kemudian meneruskannya ke Lighthouse.

Terakhir, objek konfigurasi Lighthouse memungkinkan Anda untuk menambahkan opsi khusus Lighthouse. Paket Lighthouse menyediakan objek konfigurasi default yang dapat digunakan apa adanya atau diperluas dan dimodifikasi. Anda dapat menggunakan objek ini untuk melakukan banyak hal, termasuk menentukan kategori pengujian Lighthouse mana yang ingin Anda uji.

Lebih banyak setelah melompat! Lanjutkan membaca di bawah ini

Anda dapat menggunakan emulatedFormFactor untuk menentukan apakah Anda ingin pengujian berjalan di emulator seluler atau desktop. Anda dapat menggunakan extraHeaders untuk menambahkan cookie apa pun yang mungkin perlu Anda gunakan di browser. Misalnya, pengujian yang hanya menjalankan kategori aksesibilitas pada emulator desktop yang mengeluarkan hasil sebagai HTML mungkin memiliki objek konfigurasi yang terlihat seperti ini:

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

Contoh ini mewakili konfigurasi minimal. Ada banyak lagi yang dapat Anda lakukan. Dokumen konfigurasi Lighthouse memiliki lebih banyak informasi. Mereka juga memiliki satu set objek konfigurasi sampel untuk beberapa implementasi yang lebih kompleks.

Pelaporan Hasil Kustom

Saat menjalankan Lighthouse secara terprogram, Anda dapat mengembalikan hasilnya dalam satu atau lebih dari tiga opsi yang diformat dan — dan ini adalah bagian yang paling menarik menurut saya — Anda dapat memiliki akses ke objek Lighthouse Result (LHR) mentah.

HTML, JSON, CSV

Lighthouse akan secara otomatis memformat hasil dalam tiga cara berbeda: HTML, JSON, atau CSV. Ini semua adalah hasil pra-konfigurasi berdasarkan template pelaporan Lighthouse dasar, yang Anda lihat jika Anda menjalankan pengujian Lighthouse di dalam Chrome DevTools, misalnya. Di objek konfigurasi lighthouseOptions dari bagian sebelumnya, Anda dapat melihat kunci untuk output yang berisi larik dengan satu string: html . Ini menentukan bahwa saya hanya ingin hasil yang dikembalikan diformat sebagai HTML. Jika saya menginginkan hasilnya sebagai HTML dan JSON, array itu akan terlihat seperti ['html', 'json'] .

Setelah Lighthouse berjalan, ia akan mengembalikan objek hasil yang akan berisi dua kunci: report dan lhr . Kita akan membicarakan isi dari kunci lhr di bagian berikutnya, tetapi kunci report berisi larik dengan hasil yang diformat seperti yang Anda minta. Jadi, misalnya, jika kita telah meminta ['html', 'json'] , maka results.report[0] akan berisi hasil kita yang diformat sebagai HTML dan results.report[1] akan berisi hasil kita yang diformat sebagai JSON.

Objek LHR

Menjalankan Lighthouse secara terprogram juga memberi Anda akses ke objek hasil yang jauh lebih fleksibel: objek LHR. Objek ini berisi hasil mentah dan beberapa metadata dari Lighthouse Anda yang dijalankan. Dokumentasi lebih lengkap dapat ditemukan di repositori Lighthouse Github.

Anda dapat menggunakan hasil ini dengan berbagai cara, termasuk membuat laporan khusus dan mengumpulkan data dari beberapa proses untuk analisis.

Contoh: Menjalankan Tes Aksesibilitas Untuk Seluler Dan Desktop

Katakanlah saya memiliki situs yang memuat komponen berbeda tergantung pada apakah pengguna menggunakan layar yang lebih kecil atau lebih besar, artinya HTML untuk setiap versi situs akan sedikit berbeda. Saya ingin memastikan bahwa kedua versi situs mendapatkan skor 95 pada tes aksesibilitas Lighthouse dan tidak ada kode yang dikomit ke cabang main kami yang tidak memenuhi standar itu.

Catatan : Jika Anda ingin melihat contoh kerja kode di bawah ini untuk menganalisis beranda Sparkbox, Anda dapat menemukan repositorinya di sini.

Saya dapat mengonfigurasi Lighthouse untuk menjalankan kategori aksesibilitas dua kali, menyediakan objek konfigurasi yang berbeda untuk masing-masing — satu mengatur emulatedFormFactor ke desktop dan satu mengaturnya ke mobile . Cara mudah untuk melakukannya adalah dengan membuat array dengan kedua objek, seperti yang ditunjukkan di bawah ini.

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

Kemudian, saya dapat membuat fungsi yang akan mengulang array ini dan menjalankan tes Lighthouse untuk setiap objek yang ditemukan di dalam array.

Satu hal yang perlu diperhatikan adalah perlu adanya penundaan antara setiap proses, jika tidak, Chromium dapat menjadi bingung dan proses akan error. Untuk melakukan ini, saya telah menambahkan fungsi wait yang mengembalikan janji ketika interval setTimeout telah selesai.

 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); } }

Dalam hal ini, saya mengirimkan hasilnya ke fungsi reportResults . Dari sana, saya menyimpan hasilnya ke file lokal, mencetak hasil ke konsol, dan mengirimkan hasilnya ke fungsi yang akan menentukan apakah tes lulus atau gagal ambang aksesibilitas kami.

 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); }

Untuk proyek ini, saya ingin dapat menyimpan hasil JSON di direktori tertentu untuk pengujian CI kami dan file HTML di direktori tertentu untuk pengujian lokal kami. Cara Lighthouse mengembalikan jenis hasil yang berbeda ini ada dalam larik sesuai urutan permintaannya.

Jadi, dalam contoh ini, di objek lighthouseOptions kami, array kami meminta HTML terlebih dahulu, lalu JSON. Jadi larik report akan berisi hasil berformat HTML terlebih dahulu dan hasil berformat JSON kedua. Fungsi writeToLocalFile kemudian menyimpan versi hasil yang benar dalam file dengan nama yang disesuaikan.

 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; }

Saya juga ingin mencetak hasilnya ke terminal saat tes selesai. Ini memberikan cara cepat dan mudah untuk melihat hasil tanpa harus membuka file.

 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********************************'); }

Dan akhirnya, saya ingin gagal dalam pengujian saya jika skor aksesibilitas tidak memenuhi nilai ambang batas saya 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; } } } }

Saya mengundang Anda semua untuk bermain-main dengannya dan menjelajahi semua cara yang berbeda Lighthouse dapat membantu memantau kualitas situs Anda.

Catatan Akhir

Meskipun saya sengaja membuat contoh di atas relatif sederhana, saya harap ini memberi Anda gambaran yang baik tentang apa yang dapat dicapai saat menjalankan Lighthouse secara terprogram. Dan saya harap ini menginspirasi Anda untuk menemukan cara baru menggunakan alat yang fleksibel dan kuat ini.

Seperti yang dikatakan Peter Drucker:

"Jika Anda tidak dapat mengukurnya, Anda tidak dapat meningkatkannya."

Mampu tidak hanya mengukur tetapi juga memantau kualitas situs web kami, terutama untuk situs yang kompleks, akan sangat membantu kami dalam membangun web yang lebih baik.

Bacaan Lebih Lanjut tentang SmashingMag:

Pengujian A/B Untuk Pengalaman Mobile-First
Cara Menguji Keefektifan Konsep Desain
Pentingnya Pengujian Aksesibilitas Manual
Pembelajaran Mesin Untuk Pengembang Front-End Dengan Tensorflow.js
Mulailah Dengan Desain UI Dengan Tips Ini Untuk Mempercepat Alur Kerja Anda