Введение в программный запуск Lighthouse

Опубликовано: 2022-03-10

Краткий обзор ↬ Возможность программного запуска пакета анализа Google Lighthouse дает множество преимуществ, особенно для более крупных или сложных веб-приложений. Программное использование Lighthouse позволяет инженерам настраивать мониторинг качества для сайтов, которые требуют большей настройки, чем это позволяют простые приложения Lighthouse (такие как Lighthouse CI). В этой статье содержится краткое введение в Lighthouse, обсуждаются преимущества его программного запуска и проводится базовая конфигурация.

Lighthouse — это набор инструментов Google для анализа качества веб-сайтов. Это позволяет вам оценить производительность вашего сайта, доступность, SEO и многое другое. Он также легко настраивается, что делает его достаточно гибким, чтобы его можно было использовать для всех сайтов, от самых простых до очень сложных. Эта гибкость включает в себя несколько различных способов запуска тестов, что позволяет вам выбрать метод, который лучше всего подходит для вашего сайта или приложения.

Один из самых простых способов запуска Lighthouse — через панель Chrome DevTools Lighthouse. Если вы откроете свой сайт в Chrome, а затем откроете Chrome DevTools, вы должны увидеть вкладку «Маяк». Оттуда, если вы нажмете «Создать отчет», вы должны получить полный отчет о показателях качества вашего сайта.

Однако то, на чем я сосредоточусь в этой статье, находится на другом конце спектра. Программный запуск Lighthouse с помощью JavaScript позволяет нам настраивать пользовательские запуски, выбирая функции, которые мы хотим протестировать, собирать и анализировать результаты и указывать параметры конфигурации, уникальные для наших сайтов и приложений.

Например, возможно, вы работаете с сайтом, который доступен по нескольким URL-адресам — каждый со своими данными и стилями и, возможно, даже с разметкой, которую вы хотите анализировать. Или, может быть, вы хотите собирать данные из каждого запуска теста и компилировать или анализировать их разными способами. Возможность выбрать, как вы хотите запустить анализ Lighthouse на основе того, что лучше всего подходит для вашего сайта или приложения, упрощает мониторинг качества сайта и определение проблем с вашим сайтом до того, как они накопится или вызовут слишком много проблем для вашего сайта. пользователи сайта.

Запуск Lighthouse программно — не лучший выбор для каждого сайта, и я рекомендую вам изучить все различные методы, созданные командой Lighthouse для использования этого инструмента. Однако, если вы решите использовать Lighthouse программно, мы надеемся, что приведенная ниже информация и руководство помогут вам начать работу.

Настройка параметров маяка

Преимущество запуска Lighthouse программно заключается не только в возможности настроить сам Lighthouse, но и во всех тех вещах, которые вам могут понадобиться или которые вам могут понадобиться для тестов Lighthouse. У Lighthouse есть отличная документация, которая поможет вам начать работу. Однако, чтобы получить максимальную отдачу от его программного запуска, есть два основных места, где вам нужно будет углубиться и узнать больше о том, как работает Lighthouse: настройка ваших тестовых прогонов и отчет о результатах ваших тестов.

Конфигурация тестового прогона Lighthouse

Настройка тестового запуска Lighthouse — одна из тех задач, которые могут быть как простыми, так и сложными, как вам нравится.

При программном запуске Lighthouse есть три места, где вы можете указать настраиваемые параметры: URL-адрес, который вы будете тестировать, параметры Chrome и объект конфигурации Lighthouse. Вы можете увидеть все три параметра в функции запуска Lighthouse из документации 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) }); }); }

Вы можете использовать любой код, который вам нужен для создания этих параметров. Например, предположим, что у вас есть сайт с несколькими страницами или URL-адресами, которые вы хотите протестировать. Возможно, вы захотите запустить этот тест в среде CI как часть своих задач CI, проверяя все необходимые страницы при каждом запуске задачи. Используя эту настройку, вы можете использовать JavaScript для создания своих URL-адресов и создать цикл, который будет запускать Lighthouse для каждого из них.

Любые параметры Chrome, которые могут вам понадобиться, можно указать в объекте, который передается в chrome-launcher. В примере из документации объект opts содержит массив, который мы вызываем chromeFlags , который вы можете передать в chrome-launcher, и порт, где вы можете сохранить порт, используемый chrome-launcher, а затем передать его в Lighthouse.

Наконец, объект конфигурации Lighthouse позволяет добавлять любые параметры, характерные для Lighthouse. Пакет Lighthouse предоставляет объект конфигурации по умолчанию, который можно использовать как есть или расширять и изменять. Вы можете использовать этот объект, чтобы делать множество вещей, в том числе указывать, какие категории тестов Lighthouse вы хотите протестировать.

Еще после прыжка! Продолжить чтение ниже ↓

Вы можете использовать emulatedFormFactor , чтобы указать, хотите ли вы, чтобы тест выполнялся в эмуляторе мобильного или настольного компьютера. Вы можете использовать extraHeaders для добавления любых файлов cookie, которые вам могут понадобиться в браузере. Например, тест, выполняющий только категорию специальных возможностей на эмуляторе рабочего стола, который выводит результаты в виде HTML, может иметь объект конфигурации, который выглядит следующим образом:

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

Этот пример представляет собой минимальную конфигурацию. Вы можете сделать гораздо больше. Документы по конфигурации Lighthouse содержат гораздо больше информации. У них также есть набор примеров объектов конфигурации для некоторых более сложных реализаций.

Пользовательские отчеты о результатах

При программном запуске Lighthouse вы можете получить результаты, возвращенные в одном или нескольких из трех вариантов форматирования, и — и это, на мой взгляд, самое интересное — вы можете получить доступ к необработанному объекту Lighthouse Result (LHR).

HTML, JSON, CSV

Lighthouse автоматически отформатирует результаты тремя различными способами: HTML, JSON или CSV. Все это предварительно настроенные результаты, основанные на базовом шаблоне отчетов Lighthouse, который вы видите, например, при запуске теста Lighthouse в Chrome DevTools. В объекте конфигурации lighthouseOptions из предыдущего раздела вы можете увидеть ключ для output , который содержит массив с одной строкой: html . Это указывает, что я хочу, чтобы результаты возвращались только в формате HTML. Если бы мне нужны были результаты как в формате HTML, так и в формате JSON, этот массив выглядел бы как ['html', 'json'] .

После запуска Lighthouse вернет объект результатов, который будет содержать два ключа: report и lhr . Мы поговорим о содержимом ключа lhr в следующем разделе, а ключ report содержит массив с результатами, отформатированными в соответствии с вашим запросом. Так, например, если мы запросили ['html', 'json'] , тогда results.report[0] будет содержать наши результаты в формате HTML, а results.report[1] будет содержать наши результаты в формате JSON.

Объект LHR

Программный запуск Lighthouse также дает вам доступ к гораздо более гибкому объекту результатов: объекту LHR. Этот объект содержит необработанные результаты и некоторые метаданные вашего запуска Lighthouse. Более полную документацию можно найти в репозитории Lighthouse Github.

Вы можете использовать эти результаты любыми способами, включая создание настраиваемых отчетов и сбор данных из нескольких прогонов для анализа.

Пример: запуск теста доступности для мобильных устройств и настольных компьютеров

Допустим, у меня есть сайт, который загружает разные компоненты в зависимости от того, использует ли пользователь экран меньшего или большего размера, а это означает, что HTML для каждой версии сайта будет немного отличаться. Я хочу удостовериться, что обе версии сайта набрали 95 баллов в тестах доступности Lighthouse и что в нашу main ветку не будет передан код, не соответствующий этому стандарту.

Примечание . Если вы хотите увидеть рабочий пример приведенного ниже кода, анализирующего домашнюю страницу Sparkbox, вы можете найти репозиторий здесь.

Я могу настроить Lighthouse для запуска категории специальных возможностей дважды, предоставив разные объекты конфигурации для каждого из них — один настраивает emulatedFormFactor на desktop , а другой — на mobile . Простой способ сделать это — создать массив с обоими объектами, как показано ниже.

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

Затем я могу создать функцию, которая будет перебирать этот массив и запускать тест Lighthouse для каждого объекта, найденного внутри массива.

Следует отметить, что необходимо вводить задержку между каждым запуском, иначе Chromium может запутаться, и запуски будут выдавать ошибки. Для этого я добавил функцию wait , которая возвращает обещание по истечении интервала setTimeout .

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

В этом случае я отправляю результаты в функцию reportResults . Оттуда я сохраняю результаты в локальные файлы, распечатываю результаты на консоли и отправляю результаты в функцию, которая будет определять, соответствуют ли тесты нашему порогу доступности.

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

Для этого проекта я хочу иметь возможность сохранять результаты JSON в указанном каталоге для наших тестовых прогонов CI и файл HTML в указанном каталоге для наших локальных тестовых прогонов. Lighthouse возвращает эти разные типы результатов в виде массива в том порядке, в котором они были запрошены.

Итак, в этом примере в нашем объекте lighthouseOptions наш массив сначала запрашивает HTML, а затем JSON. Таким образом, массив report будет сначала содержать результаты в формате HTML, а затем результаты в формате JSON. Затем функция writeToLocalFile сохраняет правильную версию результатов в файле с настроенным именем.

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

Я также хочу распечатать результаты на терминале по завершении тестовых прогонов. Это обеспечивает быстрый и простой способ просмотра результатов без необходимости открывать файл.

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

И, наконец, я хочу иметь возможность провалить тестовые прогоны, если оценки доступности не будут соответствовать моему пороговому значению 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; } } } }

Я приглашаю вас всех поиграть с ним и изучить различные способы, которыми Lighthouse может помочь контролировать качество вашего сайта.

Заключительные примечания

Хотя я намеренно сделал приведенный выше пример относительно простым, я надеюсь, что он дал вам хорошее представление о том, чего можно добиться при программном запуске Lighthouse. И я надеюсь, что это вдохновит вас на поиск новых способов использования этого гибкого и мощного инструмента.

Как сказал Питер Друкер:

«Если вы не можете это измерить, вы не можете это улучшить».

Возможность не только измерять, но и контролировать качество нашего веб-сайта, особенно сложных, поможет нам сделать его лучше.

Дальнейшее чтение на SmashingMag:

A/B-тестирование для мобильных устройств
Как проверить концепцию дизайна на эффективность
Важность ручного тестирования доступности
Машинное обучение для фронтенд-разработчиков с Tensorflow.js
Начните работу с дизайном пользовательского интерфейса с помощью этих советов, чтобы ускорить рабочий процесс