Skip to content
No description or website provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.npmignore
Readme.md
config.default.js
package-lock.json
package.json
tsconfig.json

Readme.md

Medusa 🐍

Medusa is a simple connector to help you use Percy.io with puppeteer in your project.

Installation

npm i @virtualidentity/medusa --save-dev

Usage

To run medusa, you have to have the percy environment values set.

export PERCY_BRANCH=YourBranch
export PERCY_TOKEN=YourToken

Then setup an npm script to run medusa

{
  ...
  "scripts": {
    ...
    "test:regression": "medusa"
  }
  ...
}

Now you are ready and can use it with:
npm run test:regression

Configure

You can configure medusa by passing a configuration file via --config:

medusa --config path/to/config.json

This defaults to medusa.json.

The config file can set the following values:

Name Description Default
targetDir The directory where to search for .html files. dist
ignoreFiles Files to ignore for screenshots. []
screenWidths Screen widths to screenshot and send to percy [320]

Hide markup

Medusa brings its own CSS class which helps you to hide elements in the visual regression test. To hide an element just add the class hide-in-medusa to it:

<div class="hide-in-medusa">...</div>

Handle Animations

It's recommended to hide animated components or add them to the ignore list, because it can't be guaranteed that the animations are captured at the same state of animation each time, this causes diffs in the snapshots where really are none.

Different Environments

The simpelest way to have different environments

You can’t perform that action at this time.