Namespace Pollution Mechanism

    @dreipol/lighthouse-runner
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.8 • Public • Published

    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

    Keywords

    none

    Install

    npm i @dreipol/lighthouse-runner

    DownloadsWeekly Downloads

    209

    Version

    3.0.8

    License

    MIT

    Unpacked Size

    129 kB

    Total Files

    160

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar