#Utilisation avec Lighthouse CI

#Objectifs

Utiliser le plugin lighthouse-ecoindex avec Lighthouse CI dans vos outils de CI/CD ou vos repositories CI/Cd.

Vous pourrez ainsi :

  • Publier les rĂ©sultats des audits Lighthouse et EcoIndex® dans votre CI/CD ;
  • Publier les rĂ©sultats des audits Lighthouse et EcoIndex® dans un serveur Lighthouse.

#Installation

# Ajout Ă  un projet existant npm install lighthouse lighthouse-plugin-ecoindex-core puppeteer --save-dev

#Utilisation

Vous devez utiliser le fichiers configuration de Lighthouse pour pouvoir utiliser le plugin lighthouse-ecoindex.

Modèle de fichier de configuration de Lighthouse
const path = require('path') /** * Get the path to the custom Lighthouse config file. * @returns {string} The path to the custom Lighthouse config file. */ const getLighthouseConfig = () => { return path.join( require.resolve('lighthouse-plugin-ecoindex-core'), '../helpers/lhci/custom-config.js', ) } module.exports = { ci: { collect: { url: [ 'https://www.ecoindex.fr/', 'https://novagaia.fr/', // 'https://www.relocalisons.bzh/', // 'https://www.neuro-mav-france.org/', // 'https://www.alodokter.com/', ], numberOfRuns: 1, settings: { configPath: getLighthouseConfig(), }, puppeteerLaunchOptions: { headless: 'new', args: [ '--disable-gpu', '--disable-dev-shm-usage', '--disable-setuid-sandbox', '--no-sandbox', ], }, puppeteerScript: './.puppeteerrc.cjs', }, assert: { preset: 'lighthouse:default', }, }, }

Tip Placer le fichier .lighthouserc.js Ă  la racine de votre projet.

Modèle de fichier de configuration de Puppeteer
// https://pptr.dev/guides/configuration // https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md#puppeteerscript /** * @param {puppeteer.Browser} browser * @param {{url: string, options: LHCI.CollectCommand.Options}} context */ module.exports = async (browser, context) => { // launch browser for LHCI var page = await browser.newPage(context.options) // To be set by env vars const authenticate = { loginPage: `https://greenit.eco/wp-login.php/`, loginField: '#user_login', loginValue: process.env.LOGIN_VALUE || '********', passField: '#user_pass', passValue: process.env.PASS_VALUE || '********', } // Test if current page is the login URL page if (context.url === authenticate.loginPage) { console.log(`Authenticate on`, authenticate.loginPage) connect(page, browser, authenticate) } else { const session = await page.target().createCDPSession() try { await page.goto(context.url, { waitUntil: 'networkidle0', timeout: 10000, // change timeout to 10s for crashing tests faster. }) } catch (error) { console.error('Error getting page:', error.message) console.error('Retry...') await page.goto(context.url) } await startEcoindexPageMesure(page, session) await endEcoindexPageMesure() // close session for next run await page.close() } } async function connect(page, browser, authenticate) { page = await browser.newPage() await page.goto(authenticate.loginPage) await page.type(authenticate.loginField, authenticate.loginValue) await page.type(authenticate.passField, authenticate.passValue) await page.click('[type="submit"]') try { await page.waitForNavigation() // close session for next run await page.close() console.log(`Authenticated!`) } catch (error) { throw new Error(`Connection failed!`) } } async function startEcoindexPageMesure(page, session) { page.setViewport({ width: 1920, height: 1080, }) await new Promise(r => setTimeout(r, 3 * 1000)) const dimensions = await page.evaluate(() => { var body = document.body, html = document.documentElement var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight, ) return { width: document.documentElement.clientWidth, height: height, deviceScaleFactor: window.devicePixelRatio, } }) // console.log('dimensions', dimensions) // We need the ability to scroll like a user. There's not a direct puppeteer function for this, but we can use the DevTools Protocol and issue a Input.synthesizeScrollGesture event, which has convenient parameters like repetitions and delay to somewhat simulate a more natural scrolling gesture. // https://chromedevtools.github.io/devtools-protocol/tot/Input/#method-synthesizeScrollGesture await session.send('Input.synthesizeScrollGesture', { x: 100, y: 600, yDistance: -dimensions.height, speed: 1000, }) } /** * End Ecoindex flow. Wait 3s. */ async function endEcoindexPageMesure() { await new Promise(r => setTimeout(r, 3 * 1000)) }

#Exemple

Projet example pour lighthouse-ci
https://github.com/cnumr/lighthouse-plugin-ecoindex/blob/main/test/test-ecoindex-lh-plugin-ts

#Exemples Ă  adapter suivant votre CI/CD

Informations

.github/workflows/ci.yml

name: CI on: [push] jobs: lighthouseci: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: node-version: 16 - run: npm install && npm install -g @lhci/cli@0.12.x - run: npm run build - run: lhci autorun

#Documentation externe des dépendances

Lighthouse CI
https://github.com/GoogleChrome/lighthouse-ci#readme

Puppeteer
https://pptr.dev/