@dreipol/lighthouse-runner

Command Line Runner for lighthouse with integrated budget checks for CI and quality control

Stats

StarsIssuesVersionUpdatedCreatedSize
@dreipol/lighthouse-runner
303.0.83 years ago4 years agoMinified + gzip package size for @dreipol/lighthouse-runner in KB

Readme

lighthouse-runner

CircleCI Codacy Badge

Dreihouse is a tool to run automated lighthouse audits for a webproject. Dreihouse has the advantage to be more configurable than lighthouse.

Use Cases

There are several usecases for an automated audit tool like this. You can implement it into your CI so you'll never deploy a page with bad performances again. Or if you wan't to see if a site enhances over time. You can also implement it in a gulp command.

Install

npm i @dreipol/lighthouse-runner

Config

field type default value
paths Array ['/'] Array of url paths. All these routes are tested and reported
chromeFlags Array ['--window-size=1200,800'] Array of additional chrome flags. See all
folder string ./dreihouse-reports Define location to store the reports
disableEmulation boolean true Applay device emulation
disableThrottling boolean true Disable Network and CPU throttling
initialPageLoad boolean true Define whether the page should be visited before the audits are run (Cache stuff)
preAuditScripts Array<PreAuditScriptInterface> Current available persisters are html json and `html-dashboard
report Array ['html'] Different reporters. Thos will process the generated audit results. [cli, html, json-dashboard, json]

preAuditScripts

In order to handle login forms, or do other modifications of the page before lighthouse audits the page, you can add some preAuditScripts in the config. Those scripts are executed right before lighthouse starts. These scripts have to implement the PreAuditScriptInterface interface.

Before execution of this script, the browser instance will already be on the inital url, passed in the execute method of Dreihouse

Here is an example of such login script

ES6

    module.exports = {
        execute:async(logger, page) {
            await page.waitForSelector('#username', { visible: true });
            await page.waitForSelector('#password', { visible: true });
            
            const usernameInput = await page.$('#username');
            const passwordInput = await page.$('#password');
            
            await usernameInput.type(process.env.LOGIN_USERNAME);
            await passwordInput.type(process.env.LOGIN_PASSWORD);
            
            await passwordInput.press('Enter');
        }
    }

ES5

    module.exports = {
    execute: function(logger, page) {
        return page.waitForSelector('#id_password', { visible: true })
            .then(() => {
                return page.$('#id_password');
            })
            .then((passwordInput) => {
                return passwordInput.type(process.env.LOCKDOWN_PASSWORD)
                    .then(() => {
                        return passwordInput;
                    });
            })
            .then((passwordInput) => {
                return passwordInput.press('Enter');
            });
    },
};

Now in your config file you can load the login script

...
saveReport: true,
budget: {
    ...
},
preAuditScripts: [
    require('your/login/script.js'),
],
reporters: {
    modules: [
        ...
        
        

Example

    paths: [
        '/',
    ],
    folder: './dreihouse-reports',
    tag: 'desktop',
    chromeFlags: ['--window-size=1280,1024', '--headless'],
    initialPageload: false,
    disableEmulation: true,
    disableThrottling: true,
    preAuditScripts: [
        loginScript,
    ],
    budget: {
        dreipol: 0.9,
        seo: 0.9,
        performance: 0.9,
        pwa: 0.9,
        accessibility: 0.9,
        'best-practices': 0.9,
    },

Programmatic use

In order to modify dreihouse to your needs, you can orchestrate dreihouse programmatically.

In this example script we run the audit every 15s and use the cli to report the results but only start the chrome once and reuse the connection.

    import Dreihouse from "@dreipol/lighthouse-runner/dist/Dreihouse";
    
    const dreihouse = new Dreihouse(CONFIG, ['cli']);
    
    async function run() {
        await dreihouse.startChrome(INITIAL_URL);
        await execute();
    }
    
    async function execute() {
        await dreihouse.audit(URL);
        setTimeout(async () => {
            await execute();
        }, 15000);
    }
    
    
    run();

Tools

  • @dreipol/dreihouse-cli helps you to run your audit from the CLI without the need of a project or config file

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.