/taiko-diagnostics

A plugin for measuring page diagnostics while testing with Taiko

Primary LanguageJavaScriptMIT LicenseMIT

Build Status npm versionNPM

taiko-diagnostics

A plugin for taiko which provides some diagnostics features like measuring speedindex, performance metrics of webpage.

Installation

  • npm install taiko-diagnostics --save

Usage

const { openBrowser, loadPlugin, goto, closeBrowser } = require('taiko');
const {ID, clientHandler, startTracing, endTracing, getSpeedIndex } = require('taiko-diagnostics');
loadPlugin(ID, clientHandler);

(async () => {
    try {
        await openBrowser();
        await startTracing();
        await goto('https://github.com/');
        await endTracing();
        let si = await getSpeedIndex();
        console.log(si);
    } catch (e) {
        console.error(e);
    } finally {
        await closeBrowser();
    }
})();

startTracing() Command

Start tracing the browser.

startTracing()

endTracing Command

Stop tracing the browser.

endTracing()

getTracingLogs Command

Returns the tracelogs that was captured within the tracing period. You can use this command to store the trace logs on the file system to analyse the trace via Chrome DevTools interface.

startTracing()
goto('https://github.com/');
endTracing()

fs.writeFileSync('/path/to/tracelog.json', JSON.stringify(await getTracingLogs()))

getSpeedIndex Command

Returns the Speed Index and Perceptual Speed Index from the page load that happened between the tracing period.

startTracing()
goto('https://github.com/');
endTracing()

console.log(getSpeedIndex())
// outputs
// { speedIndex: 789.6634800064564,
//   perceptualSpeedIndex: 876.0901860232523 }

getPerformanceMetrics Command

startTracing()
goto('https://github.com/');
endTracing()

console.log(getPerformanceMetrics())
// outputs
//{
//    firstPaint: 735.666,
//    firstContentfulPaint: 735.669,
//    firstMeaningfulPaint: 735.671,
//    domContentLoaded: 574.546,
//    timeToFirstInteractive: 735.671,
//    load: 1379.895
//    }

getCssCoverage Command

startCssTracing();
goto('https://unused-css-example-site-qijunirqpu.now.sh');
stopCssTracing();
const cssCoverage = await getCssCoverage();
// { unUsedCss: 55 } in percentage

Coverage tab

Note that startTracing,endTracing, and getSpeedIndex apis are not from taiko. These are given by the plugin.