Important

I'm not maintaining this anymore. Synpress is good enough for the job.

Cypress MetaMask

Interacting with you MetaMask made "easy". (Depending on how you define "easy" of course...)

This plugin is based on the solutions brought by Jakub Mucha - drptbl in Synpress, but with a more stripped down and (this is opinionated) simpler approach. The goal is to build a fairly straight forward solution that you can integrate into your own testing (end-to-end) flow.

Forked from - Synpress

Setup

Note: This plugin is in development mode. You might encounter bugs and you will have to tweak your implementation a bit before you get it to work. But it is worth your effort in my opinon. Being able to run automated tests of your application is a good thing. ;-)

Install the package using yarn or npm:

$ yarn add -D cypress-metamask-plugin
// or
$ npm i -D cypress-metamask-plugin

Import the plugin in cypress/support/index.js

// Import commands.js using ES2015 syntax:
import './commands';
import "cypress-metamask-plugin/support/commands";

Modify your cypress/plugins/index.js to include the plugin:

module.exports = (on, config) => {
  require("cypress-metamask-plugin/plugins")(on, config);
};

Add an .env file to your project root:

You can use the Cypress environment logic to have the variables to test the application.

For CI CD you can use the CYPRESS_VARIABLE logic.

These settings are for a Hardhat development environment. You will need to tweak those setting depending on the enviroment you use.

SECRET_WORDS="test test test test test test test test test test test junk"
PASSWORD=TestMetaMask
METAMASK_VERSION=latest
NETWORK_NAME=localhost
RPC_URL=http://127.0.0.1:8545/
CHAIN_ID=1337

Add these scripts to your package.json (or modify your existing scripts):

"cy:open": "CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open"

You should be ready to go.

Example

There is a small html/javascript (src/index.html) example that requires you to run a local chain to work. It uses the connected wallet to display its address and balance.

Once you have configured your setup and if you spin up a local chain, start a server and run your tests, you should be able to have the test pass.

Step-by-step

Start your local chain
Start a local web server (yarn start) and navitate to http://localhost:3473
Run Cypress (yarn cy:open)

describe('User can load page', () => {
  before(() => {
    cy.setupMetamask();
    cy.changeMetamaskNetwork('localhost');
    cy.visit('/');
  });
  it('is expected to display a sussess message', () => {
    cy.get('[data-cy=title]').should('contain.text', 'MetaMask Detected');
  });

  it('is expected to display the local wallet address', () => {
    cy.get('[data-cy=address').should(
      'contain.text',
      'Your address is: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
    );
  });

  it('is expected to display the local wallet  balance', () => {
    cy.get('[data-cy=balance').should(
      'contain.text',
      'Balance: 10000000000000000000000',
    );
  });
});

Known Issues

CI/CD - setup metamask on beforeAll on the first test will cause failure.

Work in Progress

Reduce the time it takes to check if the element exists on the notifications.
Adding mock functions for the ethereum network.