perfrunner

0.13.0-alpha.1 • Public • Published

Perfrunner Build Status

Perfrunner - performance testing tool for websites and web applications. Tracks your application performance with Performance Events and visualize the progress. Supports various predefined network conditions, CPU throttling, cache. Supports different output - HTML, CSV, JSON. Uses multiple reruns for better precision.

Tracks:

  • First Contentful Paint
  • Largest Contentful Paint
  • Layout duration time
  • Script duration time
  • Resources size (js, css, img, fonts)
  • And much more!

Example

npx perfrunner drag13.io

default-html-reporter-example-angular-react-vue

It's just an example, please don't consider to take framework depending on this chart :)

Installation

To save it into your project:

npm i perfrunner -D

For one-time usage:

npx perfrunner https://drag13.io

Default options

  • Network:original/ fast3g
  • Cache: false
  • Runs: 3
  • Reporter: html
  • Throttling: 2

All options

Command Alias Description Default value IsRequired
Run tests using perfrunner.json config file Optional
--cache -C Using browser cahce. Mutliple values supported. <true/false> false Optional
--chrome-args - Additional arguments to pass to the browser instance. Should be passed using camelCase style like: "noSandbox" undefined Optional
--comment - Provide additional information about test. May be used from reporter undefined Optional
--executable-path -E Sets path to the Chrome instance undefined Optional
--ignore-default-args - Ignore defaultArgs for launching Chromium false Optional
--init - Creates perfrunner.json config file, requires URL as a parameter undefined Optional
--log-level - Setup log level: <verbose> undefined Optional
--network - Setup network contions. Multiple values supported. <online/regular4g/fast3g/hspa/slow3g> online,fast3g Optional
--no-headless - Disables headless mode false Optional
--purge - Remove old data before the test run false Optional
--reporter - Specify reporter html Optional
--report-only - Skips profiling session and only generates report false Optional
--runs -R Number of runs you want to be performed 3 Optional
--test-name - Name of the test run. Will be used to name testRun folder and grouping results undefined Optional
--throttling -T CPU slowdown multiplier 2 Optional
--timeout - Set timeout for the single test run in miliseconds 90_000 Optional
--url - Url to profile This field is required Required
--wait-for -W Specify selector or time in miliseconds to wait undefined Optional

Reporters

Supported reporters:

  • HTML - renders basic metrics into HTML (FCP, LCP, DCL, Size, etc)
  • MD - generates simple markdown report with First Contentful Paint and Largest Contentful Paint, DOM Interactive and some other metrics
  • JSON - saves all data to json
  • CSV - saves all data to csv
  • custom - you can specify your own custom reporter

To switch between reporters, use --reporter flag:

npx drag13.io --reporter json

HTML

Generates output as an HTML file. Includes:

  • Performance events Chart (DOM Content Loaded, First Paint, First Contentful Paint, Largest Contentful Paint, DOM Interactive)
  • Default Performance Metrics Chart - Layout Duration, Recalculation Style Duration, Script Duration, Task duration
  • Resource Size Chart (JS, CSS ,IMG, Fonts, XHR)
  • Performance Marks Chart - shows performance marks from application

Example:

This is default reporter so you don't need to name it

npx perfrunner drag13.io

MD

Generate simple markdown report, that includes:

  • Performance events - First Contentful Paint and Largest Contentful Paint
  • Performance metrics DOM Interactive, Script Duration, Layout Duration, Recalculate Style metrics.

Example:

npx perfrunner drag13.io --reporter md

JSON

Generates output as JSON file

Example:

npx perfrunner drag13.io --reporter json

CSV

Generates output as CSV file

Example:

npx perfrunner drag13.io --reporter csv

Custom

You also can use your own custom reporter

npx perfrunner https://drag13.io --reporter my-custom-reporter.js

where reporter should looks like:

module.exports = {
    generateReport: (data, args) => console.log(outputFolder, JSON.stringify(data), args),
    defaultReportName: 'reporter.txt',
};

Config file

Config file supports additional features:

  • Testing multiple plages
  • Network customization
  • Executing post loading script

OnAfterPageLoaded

To run script after it was loaded, you need to:

  • Create new file on the root of the project using module.exports = function notation
  • Set onAfterPageLoadedScript property to "./YOUR-FILE-NAME.js"

Example:

module.exports = async function () {
    console.log('start');
    return new Promise((r) => setTimeout((x) => (console.log('end'), r()), 3000));
};

The script will beexecuted after page loaded. If the script is async - page will wait till completion

Troubleshooting

Internally, perfrunner uses puppeteer, so please check this page for troubleshooting. Perfrunner supports passing chromeArgs and ignoreDefaults flags for better control from your side:

npx perfrunner https://drag13.io --ignore-default-args --chrome-args noSandbox

You also can use Perfrunner without headless mode

npx perfrunner https://drag13.io --no-headless

If nothing helps, try to use --executable-path option

npx perfrunner https://drag13.io -E "Path\To\chrome.exe"

What next

For the next updates, please check the project. It's not very well described but might give you an idea of what is planned.

More details

Here you can find an introduction article about the Perfrunner.

Dependencies (3)

Dev Dependencies (13)

Package Sidebar

Install

npm i perfrunner

Weekly Downloads

7

Version

0.13.0-alpha.1

License

MIT

Unpacked Size

49.1 kB

Total Files

28

Last publish

Collaborators

  • drag13