phantomas 2.0.0 → 2.4.0

package/Dockerfile

@@ -1,23 +1,30 @@
-FROM node:14-alpine3.12
-
-# Installs latest Chromium package.
-# https://pkgs.alpinelinux.org/package/edge/community/x86_64/chromium
-RUN echo "http://dl-cdn.alpinelinux.org/alpine/edge/main" > /etc/apk/repositories \
-  && echo "http://dl-cdn.alpinelinux.org/alpine/edge/community" >> /etc/apk/repositories \
-  && echo "http://dl-cdn.alpinelinux.org/alpine/edge/testing" >> /etc/apk/repositories \
-  && echo "http://dl-cdn.alpinelinux.org/alpine/v3.12/main" >> /etc/apk/repositories \
-  && apk upgrade -U -a \
-  && apk add \
-    chromium \
-    ca-certificates \
-    freetype \
-    freetype-dev \
-    harfbuzz \
-    nss \
-    ttf-freefont
-
-RUN which chromium-browser
-RUN chromium-browser --no-sandbox --version
+# https://hub.docker.com/_/node
+FROM node:lts-bullseye-slim
+
+# install dependencies of Chrome binary that will be fetched by npm ci
+RUN apt-get update \
+  && apt-get install -y --no-install-recommends \
+      fonts-liberation \
+      libasound2 \
+      libatk-bridge2.0-0  \
+      libatk1.0-0 \
+      libatspi2.0-0 \
+      libc6 \
+      libcairo2 \
+      libcups2 \
+      libdbus-1-3 \
+      libfreetype6 \
+      libgbm1 \
+      libharfbuzz0b  \
+      libnss3 \
+      libpango-1.0-0 \
+      libx11-6 \
+      libxext6 \
+      libxkbcommon0 \
+      x11-utils \
+      xdg-utils \
+      zlib1g \
+  && rm -rf /var/lib/apt/lists/*
 
 # Set up a working directory
 ENV HOME /opt/phantomas
@@ -27,11 +34,6 @@ RUN chown -R nobody:nogroup .
 # Run everything after as non-privileged user.
 USER nobody
 
-# Tell Puppeteer to skip installing Chrome. We'll be using the installed binary
-ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
-
-# Tell phantomas where Chromium binary is and that we're in docker
-ENV PHANTOMAS_CHROMIUM_EXECUTABLE /usr/bin/chromium-browser
 ENV DOCKERIZED yes
 
 # Install dependencies
@@ -39,5 +41,17 @@ COPY package.json .
 COPY package-lock.json .
 RUN npm ci
 
+# TODO: find the chrome binary and symlink it to the PATH
+RUN ldd $(find . -wholename '*chrome-linux/chrome') && \
+  $(find . -wholename '*chrome-linux/chrome') --version
+
+ARG GITHUB_SHA="dev"
+ENV COMMIT_SHA ${GITHUB_SHA}
+
+# label the image with branch name and commit hash
+LABEL maintainer="maciej.brencz@gmail.com"
+LABEL org.opencontainers.image.source="https://github.com/macbre/phantomas"
+LABEL org.opencontainers.image.revision="${COMMIT_SHA}"
+
 # Copy the content of the rest of the repository into a container
 COPY . .

package/README.md

@@ -1,21 +1,25 @@
-phantomas [![npm](https://img.shields.io/npm/dt/phantomas.svg)]() [![Inline docs](http://inch-ci.org/github/macbre/phantomas.svg?branch=phantomas-v2)](http://inch-ci.org/github/macbre/phantomas) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+phantomas
+[![npm](https://img.shields.io/npm/dt/phantomas.svg)]()
+[![Inline docs](http://inch-ci.org/github/macbre/phantomas.svg?branch=phantomas-v2)](http://inch-ci.org/github/macbre/phantomas)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![Coverage Status](https://coveralls.io/repos/github/macbre/phantomas/badge.svg?branch=devel&1)](https://coveralls.io/github/macbre/phantomas?branch=devel)
+[![CodeFactor](https://www.codefactor.io/repository/github/macbre/phantomas/badge)](https://www.codefactor.io/repository/github/macbre/phantomas)
 =========
 
 [Headless Chromium](https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md)-based modular web performance metrics collector. And why phantomas? Well, [because](http://en.wikipedia.org/wiki/Fantômas) :)
 
 ## Requirements
 
-* [NodeJS](http://nodejs.org) 12+
+* [NodeJS](http://nodejs.org) 14+
 
 ## Installation
 
 #### Via npm
 
 <a href="https://www.npmjs.com/package/phantomas" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/phantomas/latest.svg" /></a>
-<a href="https://www.npmjs.com/package/phantomas/v/next" title="next"><img alt="next" src="https://img.shields.io/npm/v/phantomas/next.svg" /></a>
 
 ```
-npm install phantomas@next
+npm install phantomas
 ```
 
 > This will install [a recent version of Chromium](https://github.com/GoogleChrome/puppeteer#installation) supported by `puppeteer` module.
@@ -28,6 +32,12 @@ You can use [phantomas Docker image](https://hub.docker.com/r/macbre/phantomas):
 docker pull macbre/phantomas:latest
 ```
 
+Or you can fetch from [GitHub's Containers registry](https://github.com/macbre/phantomas/pkgs/container/phantomas)
+
+```
+docker pull ghcr.io/macbre/phantomas:latest
+```
+
 ## Support
 
 [![Foo](https://raw.githubusercontent.com/macbre/phantomas/devel/docs/phantomas-banner.png)](https://xscode.com/macbre/phantomas)
@@ -91,9 +101,7 @@ Please refer to **[/Troubleshooting.md](https://github.com/macbre/phantomas/blob
 * modular approach - each metric is generated by a separate "module"
 * phantomas "core" acts as an events emitter that each module can hook into
 * in-depth metrics such as: number of events bound via jQuery, calls to ``window.write``or [complex and duplicated CSS selectors (via analyze-css)](https://github.com/macbre/analyze-css)
-* JSON and CSV as available output formats for easy integration with automated reporting / monitoring tools
-* easy integration with Continuous Integration tools via TAP format and assertions handling
-* metrics can be sent via StatsD or stored in elasticsearch
+* JSON as an output format
 * easy integration with other nodejs projects via CommonJS module ([see API docs](https://github.com/macbre/phantomas/wiki/npm-module))
 * metrics can be emitted from JavaScript code of the page phantomas is run against (thanks to [helper functions available in window.__phantomas](https://github.com/macbre/phantomas/wiki/Phantomas-scope))
 * device profiles allow phantomas to emulate mobile or tablet (by setting a proper user agent and viewport)
@@ -134,7 +142,6 @@ You can also use it as a **command line tool**. Run `phantomas -h` for more deta
 
 * [Best Practices for Speeding Up Your Web Site](http://developer.yahoo.com/performance/rules.html) (by Yahoo!)
 * [Web Performance Best Practices](https://developers.google.com/speed/docs/best-practices/rules_intro) (by Google)
-* [Writing Efficient CSS](http://developer.mozilla.org/en/Writing_Efficient_CSS) (by Mozilla)
 * [Planet Performance](http://www.perfplanet.com/) - news and views from the web performance blogosphere
 * [Performance of 3rd Party Content](http://stevesouders.com/p3pc/) (by Steve Souders)
 * [Profiling CSS for fun and profit. Optimization notes.](http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/)
@@ -157,6 +164,7 @@ Introductions to phantomas and use cases:
 * [Grunt.js for the Enterprise - Vol.1: Frontend Performance with Phantomas](http://www.slideshare.net/DavidAm/grunt-js-for-the-enterprise) (by David Amend)
 * [Automated Frontend Testing at DrupalCon Austin 2014](https://austin2014.drupal.org/session/automated-frontend-testing) (+video)
 * [Phantomas: Fais-moi un strip !](https://wooster.checkmy.ws/2014/01/phantomas-performance-website/) (in French)
+* [Untangle the JavaScript spaghetti code with YellowLabTools](https://gmetais.github.io/yellowlabtools/2014/11/18/untangle_the_js_spaghetti_code.html)
 
 ### Videos
 
@@ -169,3 +177,7 @@ Use [grunt](http://gruntjs.com/) to automate daily dev tasks, including your's a
 * [grunt-phantomas](https://github.com/stefanjudis/grunt-phantomas)
 * [juve](https://github.com/jared-stilwell/juve)
 * [grunt-devperf](https://github.com/gmetais/grunt-devperf)
+
+## Stargazers over time
+
+[![Stargazers over time](https://starchart.cc/macbre/phantomas.svg)](https://starchart.cc/macbre/phantomas)

package/bin/phantomas.js

@@ -9,183 +9,27 @@
  */
 "use strict";
 
-const { program } = require("commander"),
+const { getProgram, parseArgv } = require("./program"),
   phantomas = require(".."),
   debug = require("debug")("phantomas:cli");
 
 var url = "";
 
-// parse options
-program
-  .name("phantomas")
-  .description(
-    "Headless Chromium-based web performance metrics collector and monitoring tool"
-  )
-  .version(phantomas.version)
-  .usage("--url <url> [options]")
-
-  //
-  // https://www.npmjs.com/package/commander#common-option-types-boolean-and-value
-  //
-
-  // mandatory
-  .option("--url <url>", "Set URL to work with")
-
-  .option("-v, --verbose", "print debug messages to the console")
-  .option("-d, --debug", "run phantomas in debug mode")
-  .option(
-    "--modules <modules>",
-    "run selected modules only [moduleOne],[moduleTwo],..."
-  )
-  .option(
-    "--include-dirs <dirs>",
-    "load modules from specified directories [dirOne],[dirTwo],..."
-  )
-  .option(
-    "--skip-modules <modules>",
-    "skip selected modules [moduleOne],[moduleTwo],..."
-  )
-
-  // .option(
-  //   "config",
-  //   "uses JSON or YAML-formatted config file to set parameters"
-  // )
-  // .string("config")
-  // optional params
-
-  // Client options
-  .option("--phone", "force viewport and user agent of a mobile phone")
-  .option("--tablet", "force viewport and user agent of a tablet")
-  .option("--viewport <width x height>", "viewport dimensions", "800x600")
-  .option("--user-agent <user agent>", "provide a custom user agent")
-
-  // HTTP options
-  .option(
-    "--auth-user <user>",
-    "sets the user name used for HTTP authentication"
-  )
-  .option(
-    "--auth-pass <password>",
-    "sets the password used for HTTP authentication"
-  )
-  .option(
-    "--cookie <cookies>",
-    'document.cookie formatted string for setting a single cookie (e.g. "bar=foo;domain=url")'
-  )
-  .option(
-    "--cookies-file <file>",
-    "specifies the file name to store the persistent Cookies"
-  )
-  .option(
-    "--ignore-ssl-errors",
-    "ignores SSL errors, such as expired or self-signed certificate errors"
-  )
-  .option(
-    "--proxy <host:port>",
-    "specifies the proxy server to use (e.g. --proxy=192.168.1.42:8080)"
-  )
-  .option(
-    "--proxy-auth <username:password>",
-    "specifies the authentication information for the proxy"
-  )
-  .option(
-    "--proxy-type <type>",
-    "specifies the type of the proxy server [http|socks5|none]"
-  )
-  .option(
-    "--ssl-protocol <protocol>",
-    "sets the SSL protocol for secure connections [sslv3|sslv2|tlsv1|any]"
-  )
-
-  // Runtime options
-  .option(
-    "--allow-domain <domain>",
-    "allow requests to given domain(s) - aka whitelist [domain],[domain],..."
-  )
-  .option(
-    "--block-domain <domain>",
-    "disallow requests to given domain(s) - aka blacklist [domain],[domain],..."
-  )
-  .option("--disable-js", "disable JavaScript on the page that will be loaded")
-  .option("--no-externals", "block requests to 3rd party domains")
-  .option("--post-load-delay <N>", "wait X seconds before generating a report")
-  .option("--scroll", "scroll down the page when it's loaded")
-  .option("--spy-eval", "report calls to eval()")
-  .option("--stop-at-onload", "stop phantomas immediately after onload event")
-  .option("--timeout <seconds>", "timeout for phantomas run", 15)
-  .option(
-    "--wait-for-event <event>",
-    "wait for a given phantomas event before generating a report"
-  )
-  .option(
-    "--wait-for-selector <selector>",
-    "wait for an element matching given CSS selector before generating a report"
-  )
-  .option("--scroll", "scroll down the page when it's loaded")
-
-  // Output and reporting
-  .option("--analyze-css", "emit in-depth CSS metrics")
-  .option("--colors", "forces ANSI colors even when output is piped")
-  .option(
-    "--film-strip",
-    "register film strip when page is loading (a comma separated list of milliseconds can be passed)"
-  )
-  .option(
-    "--film-strip-dir <dir>",
-    "folder path to output film strip (default is ./filmstrip directory)"
-  )
-  .option("--har <file>", "save HAR to a given file")
-  .option("--log <file>", "log to a given file")
-  .option("--page-source", "save page source to file")
-  .option(
-    "--page-source-dir <dir>",
-    "folder path to output page source (default is ./html directory)"
-  )
-  .option(
-    "-R, --reporter, --format <reporter>",
-    "output format / reporter",
-    "plain"
-  )
-  .option("--pretty", "render formatted JSON")
-  .option("--screenshot", "render fully loaded page to a given file")
-  .option("-s, --silent", "don't write anything to the console");
-
-// handle --config (issue #209)
-//program.setConfigFile("config");
-
-// handle env variables (issue #685)
-//program.setReplacementVars(process.env);
-
-// parse it
-program.parse(process.argv);
-var options = program.opts();
-
-debug("argv: %j", process.argv);
-debug("opts: %j", options);
-
-// handle URL passed without --url option (#249)
-if (typeof options.url === "undefined" && process.argv.length >= 3) {
-  if (!process.argv[2].startsWith("-")) {
-    options.url = process.argv[2];
-  }
-}
-
-// handle --no-foo options
-options["no-externals"] = options.externals === false;
-delete options.externals;
+// parse command line arguments
+let options = parseArgv(process.argv);
 
 // --url is mandatory -> show help
 if (typeof options.url !== "string" && typeof options.config === "undefined") {
   debug("URL not provided - show help and leave");
-  program.outputHelp();
-  process.exit(1);
+  getProgram().outputHelp();
+  process.exitCode = 1;
+  return;
 }
 
 url = options.url;
 debug("url: %s", url);
 
 delete options.url;
-delete options.version;
 
 // add env variable to turn off ANSI colors when needed (#237)
 // suppress this behaviour by passing --colors option (issue #342)
@@ -199,12 +43,13 @@ phantomas(url, options)
   .catch((err) => {
     debug("Error: %s", err);
     console.error("" + err);
-    process.exit(2);
+    process.exitCode = 2;
   })
   .then(async (results) => {
-    debug("Calling a reporter...");
+    debug("Calling the JSON reporter...");
     debug("Metrics: %j", results.getMetrics());
 
+    // TODO: handle more reporters
     const reporter = require("../reporters/json")(results, options);
     const res = await reporter.render();
 

package/bin/program.js

@@ -0,0 +1,198 @@
+const debug = require("debug")("phantomas:cli:program");
+const phantomas = require("..");
+const { decamelizeOptions } = require("./utils");
+
+const { Command } = require("commander");
+
+function getProgram() {
+  const program = new Command();
+
+  // define options
+  program
+    .name("phantomas")
+    .description(
+      "Headless Chromium-based web performance metrics collector and monitoring tool"
+    )
+    .version(phantomas.version)
+    .usage("--url <url> [options]")
+
+    //
+    // https://www.npmjs.com/package/commander#common-option-types-boolean-and-value
+    //
+
+    // mandatory
+    .option("--url <url>", "Set URL to work with")
+
+    .option("-v, --verbose", "print debug messages to the console")
+    .option("-d, --debug", "run phantomas in debug mode")
+    .option(
+      "--modules <modules>",
+      "run selected modules only [moduleOne],[moduleTwo],..."
+    )
+    .option(
+      "--include-dirs <dirs>",
+      "load modules from specified directories [dirOne],[dirTwo],..."
+    )
+    .option(
+      "--skip-modules <modules>",
+      "skip selected modules [moduleOne],[moduleTwo],..."
+    )
+
+    // .option(
+    //   "config",
+    //   "uses JSON or YAML-formatted config file to set parameters"
+    // )
+    // .string("config")
+    // optional params
+
+    // Client options
+    .option("--phone", "force viewport and user agent of a mobile phone")
+    .option("--tablet", "force viewport and user agent of a tablet")
+    .option("--viewport <width x height>", "viewport dimensions", "800x600")
+    .option("--user-agent <user agent>", "provide a custom user agent")
+
+    // HTTP options
+    .option(
+      "--auth-user <user>",
+      "sets the user name used for HTTP authentication"
+    )
+    .option(
+      "--auth-pass <password>",
+      "sets the password used for HTTP authentication"
+    )
+    .option(
+      "--cookie <cookies>",
+      'document.cookie formatted string for setting a single cookie (e.g. "bar=foo;domain=url")'
+    )
+    .option(
+      "--cookies-file <file>",
+      "specifies the file name to store the persistent Cookies"
+    )
+    .option(
+      "--local-storage <values>",
+      'ability to set a local storage, key-value pairs (e.g. "bar=foo;domain=url")'
+    )
+    .option(
+      "--session-storage <values>",
+      'ability to set a session storage, key-value pairs (e.g. "bar=foo;domain=url")'
+    )
+    .option(
+      "--ignore-ssl-errors",
+      "ignores SSL errors, such as expired or self-signed certificate errors"
+    )
+    .option(
+      "--proxy <host:port>",
+      "specifies the proxy server to use (e.g. --proxy=192.168.1.42:8080)"
+    )
+    .option(
+      "--proxy-auth <username:password>",
+      "specifies the authentication information for the proxy"
+    )
+    .option(
+      "--proxy-type <type>",
+      "specifies the type of the proxy server [http|socks5|none]"
+    )
+    .option(
+      "--ssl-protocol <protocol>",
+      "sets the SSL protocol for secure connections [sslv3|sslv2|tlsv1|any]"
+    )
+
+    // Runtime options
+    .option(
+      "--allow-domain <domain>",
+      "allow requests to given domain(s) - aka whitelist [domain],[domain],..."
+    )
+    .option(
+      "--block-domain <domain>",
+      "disallow requests to given domain(s) - aka blacklist [domain],[domain],..."
+    )
+    .option(
+      "--disable-js",
+      "disable JavaScript on the page that will be loaded"
+    )
+    .option("--no-externals", "block requests to 3rd party domains")
+    .option(
+      "--post-load-delay <N>",
+      "wait X seconds before generating a report"
+    )
+    .option("--scroll", "scroll down the page when it's loaded")
+    .option("--spy-eval", "report calls to eval()")
+    .option("--stop-at-onload", "stop phantomas immediately after onload event")
+    .option("--timeout <seconds>", "timeout for phantomas run", 15)
+    .option(
+      "--wait-for-event <event>",
+      "wait for a given phantomas event before generating a report"
+    )
+    .option(
+      "--wait-for-selector <selector>",
+      "wait for an element matching given CSS selector before generating a report"
+    )
+    .option("--scroll", "scroll down the page when it's loaded")
+
+    // Output and reporting
+    .option("--analyze-css", "emit in-depth CSS metrics")
+    .option("--colors", "forces ANSI colors even when output is piped")
+    .option(
+      "--film-strip",
+      "register film strip when page is loading (a comma separated list of milliseconds can be passed)"
+    )
+    .option(
+      "--film-strip-dir <dir>",
+      "folder path to output film strip (default is ./filmstrip directory)"
+    )
+    .option("--har <file>", "save HAR to a given file")
+    .option("--log <file>", "log to a given file")
+    .option("--page-source", "save page source to file")
+    .option(
+      "--page-source-dir <dir>",
+      "folder path to output page source (default is ./html directory)"
+    )
+    .option("--pretty", "render formatted JSON")
+    .option(
+      "--screenshot <file>",
+      "render the viewport to a given file once fully loaded"
+    )
+    .option("--full-page-screenshot", "enlarge the screenshot to full page")
+    .option("-s, --silent", "don't write anything to the console");
+
+  // handle --config (issue #209)
+  //program.setConfigFile("config");
+
+  // handle env variables (issue #685)
+  //program.setReplacementVars(process.env);
+
+  return program;
+}
+
+function parseArgv(args) {
+  const program = getProgram();
+
+  // parse provided options
+  debug("argv: %j", args);
+  program.parse(args);
+
+  // make sure options are not "camelCased" but "have-dashes" instead (issue #863)
+  let options = decamelizeOptions(program.opts());
+  debug("decamelzed opts: %j", options);
+
+  // handle URL passed without --url option (#249)
+  if (typeof options.url === "undefined" && args.length >= 3) {
+    if (!args[2].startsWith("-")) {
+      options.url = args[2];
+    }
+  }
+
+  // handle --no-foo options
+  options["no-externals"] = options.externals === false;
+  delete options.externals;
+
+  delete options.version;
+
+  debug("opts: %j", options);
+  return options;
+}
+
+module.exports = {
+  getProgram,
+  parseArgv,
+};

package/bin/utils.js

@@ -0,0 +1,16 @@
+const decamelize = require("decamelize");
+
+function decamelizeOptions(options) {
+  // decamelize option names as returned by commander (see issue #863)
+  let decamelized = {};
+
+  for (const [key, value] of Object.entries(options)) {
+    decamelized[decamelize(key, { separator: "-" })] = value;
+  }
+
+  return decamelized;
+}
+
+module.exports = {
+  decamelizeOptions,
+};

package/core/modules/navigationTiming/scope.js

@@ -1,4 +1,10 @@
-(function (phantomas) {
+/* istanbul ignore next */
+(function navigationTimingScope(phantomas) {
+  // Prevent events from being sent from an iframe. Only from the main document.
+  if (window.parent !== window || window.location.href === "about:blank") {
+    return;
+  }
+
   function emit(eventName) {
     phantomas.log("Navigation Timing milestone: %s", eventName);
     phantomas.emit("milestone", eventName); // @desc Page loading milestone has been reached: domInteractive, domReady and domComplete