Hermes

A simple lightweight and straightforward browser testing tool

• Hermes
  • What is hermes?
  • Usage
    • Viewport Test
    • Configuration
      • Example script

What is hermes?

Hermes is a tool which came out of an simple Idea and problem: Testing viewport sizes for responsiveness.

More awesome commands will come!

Usage

First, install Hermes globally using either yarn add @lunnarapps/hermes or npm i -g @lunnarapps/hermes.

Typing hermes on your command line should bring this help text to your screen:

hermes 0.4.0 - Automated chromium-based scale browser testing

USAGE

  hermes viewport [links]

ARGUMENTS

  [links]      List of links to be tested (comma separated)      optional

OPTIONS

  -l, --links-file <path-to-json>           Path to a json containing the links to be tested      optional
  -o, --output <path>                       Output path for the screenshots                       optional default: "./screenshots"
  -vp, --viewports-file <path-to-json>      Path to a viewport configuration file                 optional

GLOBAL OPTIONS

  -h, --help         Display help
  -V, --version      Display version
  --no-color         Disable colors
  --quiet            Quiet mode - only displays warn and error messages
  -v, --verbose      Verbose mode - will also output debug messages

As of now, Hermes currently support a viewport command, which means that you can only use hermes viewport [links].

Viewport Test

Viewport testing means that Hermes navigates to all websites passed to it and then takes a screenshot of the browser in a desired size. The catch is: Everything is defined by a JSON file.

This means that you can have either a JSON file containing all URL's you're going to test or the [links] argument is a comma-separated list of URLs, such as google.com,github.com,bing.com. This list is optional, but if you ommit it, then the -l option becomes required. This options states a path where Hermes will be able to locate a JSON file with the following contents:

[
  "URL1",
  "URL2",
  ...
]

This array will be used to apply a iterative test over all viewports one by one, in other words, this will navigate and print the browser screen at every configured viewport on the viewports file.

As for now, Hermes does not resolve relative paths, so ./ and ../ will not work properly, please type the full pathname of the file

Configuration

Hermes needs a viewport file in JSON format to start testing. This file can be passed in the -vp option (look at the warning above) providing the path to it.

A viewports file is something like this:

[
  {
    "name": "HD",
    "resolution": {
      "width": 1920,
      "height": 1080
    }
  },
  {
    "name": "8-5",
    "resolution": {
      "width": 1280,
      "height": 800
    }
  },
  {
    "resolution": {
      "width": 1024,
      "height": 768
    }
  },
  {
    "resolution": {
      "width": 800,
      "height": 600
    }
  }
]

The property name can be omitted, 'No name' will be used instead

If nothing is passed, the above example will be the default viewport to be tested.

The -o tag is also necessary to output PNG files with the results of the test. This will take a full absolute path to output all the screenshots taken.

Example script

Running:

$ hermes viewport google.com,linkedin.com,fb.com -o <myOutputFolder>

Will produce a viewport test like this: