  _____           __  _____ _               _
 |  __ \         / _|/ ____| |             | |
 | |__) |__ _ __| |_| |    | |__   ___  ___| | __
 |  ___/ _ \ '__|  _| |    | '_ \ / _ \/ __| |/ /
 | |  |  __/ |  | | | |____| | | |  __/ (__|   <
 |_|   \___|_|  |_|  \_____|_| |_|\___|\___|_|\_\

Intro
Install
Config
Getting the HARs
- gethar CLI Options
Checking a HAR file.
- xray CLI Options
Checking multiple HAR files.
- perfcheck CLI Options

Intro

This is a customizable performance check based on pagexray from sidespeed.io. It has 3 main apps:

gethar: Downloads HAR files from a list of URLs using Puppetteer. Used when you want to download HAR files of several pages / screen sizes.
xray: Checks the performance of a single HAR file against your own set of rules.
perfcheck: Checks the performance of an entire folder, captured by gethar and shows a report.

Install

Clone this repository and run:

$ npm install

TL;DR;

$ node gethar
$ node perfcheck --harfolder ./har-files/YOUR-HAR-FOLDER

Config

`./config/config.json`

Main configuration file.

Parameters

harFolder <string> Destination folder for the HAR files. Default har-files
autoScroll <Boolean> Option for Puppeteer to scroll automatically to the bottom of the page before screenshot. Useful for scroll incrementally through a page in order to deal with lazy loaded elements. It scrolls in 100px every 100ms until the bottom of the page. Default true
pages <string> Path and file name of pages list. Default ./config/pages.json
puppeteer <Object> <Puppeteer> config object. Default:
- launch <boolean> Whether to use or not the headless mode. Default true
- emulate <Array> Array of objects following the Puppeteer DeviceDescriptors.js standards. In order to test different resolutions emulating the same browser, just add the width in the name parameter. E.g.: "name": "Chrome 1024".

Sample file:

{
  "harFolder": "har-files",
  "autoScroll": true,
  "pages": "./config/pages.json",
  "puppeteer": {
    "launch": {
      "headless": true
    },
    "emulate": [
      {
        "name": "Chrome 1280",
        "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36",
        "viewport": {
          "width": 1280,
          "height": 780
        }
      },
      {
        "name": "iPhone 6",
        "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1",
        "viewport": {
          "width": 375,
          "height": 667,
          "deviceScaleFactor": 1,
          "isMobile": true,
          "hasTouch": true,
          "isLandscape": false
        }
      }
    ]
  }
}

`./config/pages.json`

Pages and actions to be performed.

Parameters

domain <string> Main domain to be tested. It is concatenated with the pages.url.
authenticate <Object> Object credentials for http authentication. See more at Puppeteer page.authenticate documentation. If username or password equal to null, will not run the page.authenticate method.
- username <string> Default null
- password <string> Default null
pages <Array> Array of objects containing information about the pages to be tested.
- url <string> URL path. It is also used to create a unique filename for each image so, it is important to have a unique url name. If you want to test mutiple scenarios from the same page, use some querystring to identify it otherwise the last file will override the previous one.
- click <array> Array of elements to be clicked. Each element is a selector to search for element to click. If there are multiple elements satisfying the selector, the first will be clicked. It follows the same behavior of the document.querySelectorAll of javascript.
- waitFor If follows the Puppeteer page.waitFor documentation.

Actions will follow the order:

 Page load event → autoScroll → click → waitFor → get HAR

Sample file:

{
  "domain": "http://www.yoursupercoolsite.com",
  "authenticate": {
    "username": null,
    "password": null
  },
  "pages": [
    { "url": "/", "click": ["#mainbutton"]},
    { "url": "/?complex-selector", "click": [".menu-secondary > ul > li:nth-child(2) > .link"]},
    { "url": "/?3-buttons", "click": ["#firstbutton", ".secondbutton", "#send-form a"]},
    { "url": "/?click-and-wait", "click": ["#mainbutton"], "waitFor": 5000},
    { "url": "/contact"},
    { "url": "/products"},
    { "url": "/products/product-1"},
    { "url": "/products/product-2"},
    { "url": "/products/product-3"}
  ]
}

`./rules/*`

Yor set of rules are in the ./rules folder. You can config the set of rules inside ./rules/rules.js file. Eg.:

`./rules/rules.js`

module.exports = [
  require('../rules/statusOk.js'),
  require('../rules/assetsStatusOk.js'),
  require('../rules/lightImages.js'),
  require('../rules/cdn.js'),
  require('../rules/noAdminAjax.js'),
];

Creating a new rule

In order to reate a new rule:

Duplicate the ./rules/_sampleRule.js
Do your magic
Add it to the ./rules/rules.js file

The performance check will follow the Array order.

Getting the HARs

$ node gethar

Downloads the HAR files inside the destination folder. It will use the emulate.name to create a folder for each "device". E.g.:

./har-files/2019.11.11-16.34.929/
              ├── chrome-1280/
              ├── chrome-1024/
              ├── iphone-6/
              ...

`gethar` CLI Options

Get Har

  Get HAR files from several pages of the same domain

Usage

  $ node gethar <options>

  $ node gethar --help

  $ node gethar --loglevel 1 --headless false --pages anotherfile.json --domain
  http://www.myanotherdomain.com --auth myuser:MyP4ssw0rd


Options List

  -h, --help string          Print out helpful information.
  -l, --loglevel number      Log level. Default 2
                             0=Silent, 1=Important only, 2=All.
  -d, --domain string        Main domain to be tested. When set, it OVERRIDES the "domain" parameter from
                             the ./config/pages.json file.
  -a, --auth string:string   username:password for the http authentication. When set, it OVERRIDES the
                             "authenticate" parameter from the ./config/pages.json file.
  -e, --headless boolean     Set Puppeteer to run in the headless mode. When set, it OVERRIDES the
                             "headless" parameter from the ./config/config.json file.
  -p, --pages string         The path to the pages.json file. Default option uses ./config/pages.json from
                             the root of the project.

Checking a HAR file.

$ node xray --har ./path/to/your/harfile.har

Run your rules against a single HAR file.

`xray` CLI Options

Performance XRay

  Run your own performance check based on a HAR file.

Usage

  $ node xray <options>

  $ node xray --har ./path/to/your/harfile.har

  $ node xray --loglevel 1 --har ./path/to/your/harfile.har


Options List

  -h, --help string       Print out helpful information.
  --har string            Path of your HAR file.
  -l, --loglevel number   Log level. Default 2
                          0=Silent, 1=Important only, 2=All.

Checking multiple HAR files.

$ node perfcheck --harfolder ./har-files/FOLDER/

Run your rules against a collection of HAR files. You must point to the "parent folder" and perfcheck will recursively check the HAR files inside the defined device name folders. E.g.:

$ node perfcheck --harfolder ./har-files/2019.11.11-16.34.929/

It will run the performance check for the files inside the chrome-1280/, chrome-1024 and iphone-6 folders.

./har-files/2019.11.11-16.34.929/ 👈 Parent folder
              ├── chrome-1280/ ← device name
              ├── chrome-1024/ ← device name
              ├── iphone-6/ ← device name

`perfcheck` CLI Options

Perf Check

  Run your own performance check based on a collection of HAR files inside a
  folder

Usage

  $ node perfcheck <options>

  $ node perfcheck --harfolder ./har-files/2019.11.06-17.09.312/

  $ node perfcheck --loglevel 1 --harfolder ./har-files/2019.11.06-17.09.312/
  --output ./report.csv


Options List

  -h, --help string        Print out helpful information.
  -f, --harfolder string   Path to the HAR folder used as the base for the performance check.
  -l, --loglevel number    Log level. Default 2
                           0=Silent, 1=Important only, 2=All.
  -o, --output string      Path and file name of CSV output file.
                           E.g.: ./report.csv

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

Intro

Install

TL;DR;

Config

`./config/config.json`

Parameters

Sample file:

`./config/pages.json`

Parameters

Sample file:

`./rules/*`

`./rules/rules.js`

Creating a new rule

Getting the HARs

`gethar` CLI Options

Checking a HAR file.

`xray` CLI Options

Checking multiple HAR files.

`perfcheck` CLI Options

Files

README.md

Latest commit

History

README.md

File metadata and controls

Intro

Install

TL;DR;

Config

./config/config.json

Parameters

Sample file:

./config/pages.json

Parameters

Sample file:

./rules/*

./rules/rules.js

Creating a new rule

Getting the HARs

gethar CLI Options

Checking a HAR file.

xray CLI Options

Checking multiple HAR files.

perfcheck CLI Options

`./config/config.json`

`./config/pages.json`

`./rules/*`

`./rules/rules.js`

`gethar` CLI Options

`xray` CLI Options

`perfcheck` CLI Options