# cypress-metamask-plugin

> Cypress Metamask Plugin inspired in the Synpress package. A simplified version to included the synpress logic in the cypress without refactor needed

Latest version **1.0.8-beta** (published 2022-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install cypress-metamask-plugin
pnpm add cypress-metamask-plugin
yarn add cypress-metamask-plugin
bun add cypress-metamask-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8-beta |
| Published | 2022-08-22 |
| First published | 2022-05-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=10 |
| Dependencies | 19 |
| Unpacked size | 82.8 KB |
| Known vulnerabilities | 0 (+24 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | pcardosolei |
| Maintainers | paulo.notpablo |
| Keywords | Synpress, Cypress, metamask, testing, e2e |

## Links

- npm: https://www.npmjs.com/package/cypress-metamask-plugin
- Repository: https://github.com/pcardosolei/cypress-metamask-plugin
- Homepage: https://github.com/pcardosolei/cypress-metamask-plugin#readme
- Issues: https://github.com/pcardosolei/cypress-metamask-plugin/issues
- npm.io page: https://npm.io/package/cypress-metamask-plugin

## Dependencies (19)

- [axios](https://npm.io/package/axios.md) 0.27.2
- [bytes32](https://npm.io/package/bytes32.md) 0.0.3
- [cypress](https://npm.io/package/cypress.md) 10.6.0
- [prettier](https://npm.io/package/prettier.md) 2.7.1
- [cross-zip](https://npm.io/package/cross-zip.md) 4.0.0
- [node-fetch](https://npm.io/package/node-fetch.md) 2.6.1
- [synthetix-js](https://npm.io/package/synthetix-js.md) 2.74.1
- [etherscan-api](https://npm.io/package/etherscan-api.md) 10.2.0
- [@cypress/react](https://npm.io/package/@cypress/react.md) 6.1.1
- [puppeteer-core](https://npm.io/package/puppeteer-core.md) 16.2.0
- [@synthetixio/js](https://npm.io/package/@synthetixio/js.md) 2.41.0
- [cypress-wait-until](https://npm.io/package/cypress-wait-until.md) 1.7.2
- [@drptbl/gremlins.js](https://npm.io/package/@drptbl/gremlins.js.md) 2.2.1
- [@types/puppeteer-core](https://npm.io/package/@types/puppeteer-core.md) ^5.4.0
- [@cypress/code-coverage](https://npm.io/package/@cypress/code-coverage.md) 3.10.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) 13.3.0
- [@testing-library/cypress](https://npm.io/package/@testing-library/cypress.md) 8.0.3
- [@cypress/webpack-dev-server](https://npm.io/package/@cypress/webpack-dev-server.md) 2.2.0
- [@types/testing-library__cypress](https://npm.io/package/@types/testing-library__cypress.md) 5.0.9

## Alternatives

- [@snazzah/davey](https://npm.io/package/@snazzah/davey.md) — 1.5M weekly downloads
- [@vendure/testing](https://npm.io/package/@vendure/testing.md) — 8.3K weekly downloads
- [vue-simple-context-menu](https://npm.io/package/vue-simple-context-menu.md) — 6.6K weekly downloads
- [cypress-webpack-preprocessor-v5](https://npm.io/package/cypress-webpack-preprocessor-v5.md) — 2.1K weekly downloads
- [@backstage/plugin-catalog-backend-module-puppetdb](https://npm.io/package/@backstage/plugin-catalog-backend-module-puppetdb.md) — 1.3K weekly downloads

## Recent versions

- 1.0.8-beta (latest) — 2022-08-22
- 1.0.7 — 2022-06-21
- 1.0.6 — 2022-06-14
- 1.0.6-beta — 2022-06-14
- 1.0.5 — 2022-06-08
- 1.0.4 — 2022-05-24
- 1.0.3 — 2022-05-23
- 1.0.2 — 2022-05-20
- 1.0.1 — 2022-05-19
- 1.0.0 — 2022-05-19

## README

# 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](https://github.com/drptbl) in [Synpress](https://github.com/Synthetixio/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](https://github.com/Synthetixio/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`:

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

Import the plugin in `cypress/support/index.js`

```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:

```js
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](https://docs.cypress.io/guides/guides/environment-variables#Option-2-cypress-env-json) to have the variables to test the application.

For CI CD you can use the CYPRESS_VARIABLE logic.

**These settings are for a [Hardhat](https://hardhat.org/) 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):

```json
"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

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

```js
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.

---
_Source: https://npm.io/package/cypress-metamask-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._