---
title: How to set up Synpress for Web3 dApp Frontend Test Automation with MetaMask | &‌amp
description: Setup, configuration, and example tests using Synpress / Cypress for end-to-end frontend test automation of a Web3 dApp with MetaMask login.
image: https://miro.medium.com/v2/resize:fit:700/1*UFkzEEmfRMaD7WoN9njI4A.png
---

[Skip to content](https://insights.andamp.io/blog/how-to-set-up-synpress-for-web3-dapp-frontend-test-automation-with-metamask#main-content)

[![andamp logo black (ampersand symbol)](https://insights.andamp.io/hubfs/logo_black.svg "andamp logo black (ampersand symbol)")](https://insights.andamp.io/?hsLang=en)

- [About Us](https://insights.andamp.io/about-us) 
    - [Career](https://insights.andamp.io/career)
    - [Code of Conduct](https://insights.andamp.io/code-of-conduct)
- [Blog](https://insights.andamp.io/blog)

# How to set up Synpress for Web3 dApp Frontend Test Automation with MetaMask

[![](https://insights.andamp.io/hubfs/Maximilian%20Hoheiser.jpeg)](https://insights.andamp.io/blog/author/max-hoheiser)

[Max Hoheiser](https://insights.andamp.io/blog/author/max-hoheiser)  30. März 2022

Setup, configuration, and example tests using Synpress / Cypress for end-to-end frontend test automation of a Web3 dApp with MetaMask login.

> **TL;DR: **Add Synpress as a dependency to your project, create the default Cypress folder structure and a `synpress.json` config file. Run your tests with `env-cmd -f .env npx synpress run -cf synpress.json --config supportFile='support/index.js'`

![](https://miro.medium.com/v2/resize:fit:700/1*UFkzEEmfRMaD7WoN9njI4A.png)

Synpress github repository

End-to-end frontend testing of a Web3 dApp presents unique challenges and sometimes requires special tooling compared to regular web apps. A particular problem presents the use of [MetaMask](https://metamask.io/) as a means for authentication through the wallet address of users. Existing standard tooling does not support browser plugins, and therefore is inadequate as a fully automated end-to-end frontend testing suite.

This article will focus on the use of [Synpress](https://github.com/Synthetixio/synpress), a wrapper for the popular frontend testing framework [Cypress](https://www.cypress.io/). We will cover how to set our project up with Synpress, how to configure it, use the extended commands and how to write tests. MetaMask will not only serve as a means of authentication but also for interacting with a smart contract.

This guide is heavily influenced by the `README` of the Synpress project.

# Set up

We will follow the recommended folder structure from Cypress: [*example*](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests#Folder-structure)*.*

![](https://miro.medium.com/v2/resize:fit:700/1*25063p5izCldkxRlx_bAKw.png)

Default Cypress folder structure

The next step is to create a `package.json` file to install the Synpress package and the necessary dev dependencies. Most of the dependencies are already taken care of by the Synpress `package.json`, like `cypress, @testing-library/cypress` and the necessary `eslint-plugin` packages. If we want to use a later version of Cypress or any other package, we can also overrule the version defined by Synpress here.

 

## Configuration of Synpress

The necessary configurations for Synpress/Cypress, like the viewport, timeouts, and default folders need to be specified in the`synpress.json` file. Here we also define our `baseUrl` and our test file naming syntax.

The `synpress.json`file has to be included with each Synpress execution with either the`--configFile synpress.json` or the`-cf synpress.json` flag.

 

 

Example `synpress.json`

Setting up MetaMask, selecting a network, and adding one or multiple accounts can be done via environment variables.

Selecting the network is done via the`NETWORK_NAME` variable. We can choose between `mainnet`, `ropsten`, `kovan`, `rinkeby`, `goerli` and `localhost`.

To configure the account, we have the option to either pass in a private-key with `PRIVATE_KEY`or a secret passphrase of a wallet with `SECRET_WORDS`

 

Example with localhost and a secret pass-phrase (in this particular case the [hardhat](https://hardhat.org/) default pass-phrase) default accounts

## Linting and code-hinting

To use linting of test files with `eslint` we need to create a `.eslintrc.js` config file and extend with the Synpress `eslint` configuration

 

 

## Writing tests for Synpress

Tests are written in either the `integration` or `e2e` folder and generally follow one of the two naming conventions:

```
<name>.spec.js<name>.test.js
```

 

Cypress provides a good quick-start tutorial on how to write tests: [writing your first test](https://docs.cypress.io/guides/getting-started/writing-your-first-test#Add-a-test-file)

Since we are using Synpress, we can also use the custom commands, to interact with MetaMask. All commands are described here: [index.d.ts](https://github.com/Synthetixio/synpress/blob/dev/support/index.d.ts)

For most use cases, one of the following commands will be sufficient:

```
cy.rejectMetamaskAccess()cy.acceptMetamaskAccess()cy.rejectMetamaskTransaction()cy.acceptMetamaskTransaction()
```

 

Most of the Synpress custom commands are asynchronous and return a boolean response once finished.

 

 

Following the recommended Cypress test structure, a test using the new Synpress commands can look similar to our `login.spec.js` test.

 

 

## New custom commands

Often it is cleaner to extract frequently used functionality in our test. For example, the setup and teardown of tests can be moved into custom commands, that can be executed like built-in cypress commands like `cy.commandName()`.

To define custom commands, we can use the `support/commands.js` file, provided by Cypress.

 

Example commands.js with login custom command

To include the new commands with Synpress, we have to include them in the `index.js` file. Since the functionality of Synpress is also provided by custom commands, we have to load them in the same `index.js` file, credit goes to [**cs-balazs**](https://github.com/cs-balazs) for describing the solution here: [https://github.com/Synthetixio/synpress/issues/346#issuecomment-1060506096](https://github.com/Synthetixio/synpress/issues/346#issuecomment-1060506096)

 

 

To run Synpress using our newly defined `index.js` file, we have to pass the `supportFile` flag as configuration like so:

 

```
npx synpress run -cf synpress.json --config supportFile='support/index.js'
```

## Helpful custom commands

Synpress does not handle multiple accounts well. This custom command can be helpful, to disconnect all accounts and to have a clean setup for each test.

 

 

Example command to disconnect three accounts from dApp

 

Switching between the first three connected MetaMask accounts, with an additional check of successful switch:

 

Example command to switch between connected accounts

# Running Synpress

Synpress adds in addition to the new commands a global *before() *where it installs the MetaMask plugin, and sets it up, as defined in the env file.

![](https://miro.medium.com/v2/resize:fit:700/1*hrxV_1by4o04xAn0SJiWJg.gif)

Setup of MetaMask by Synpress

 

To run all tests following the specified naming convention, we can execute the following command:

 

A successful test of our dApp [app.banity.com](https://app.banity.com/) looks like this:

![](https://miro.medium.com/v2/resize:fit:700/1*CO4C-FEc18a_qFtH9-VmNg.gif)

gallery.spec.js

🎉 That’s it! Now you have the necessary tool to test your dApp and provide a more reliable dev process.

 

> Disclaimer: [&amp](https://andamp.io/) developed the app [app.banity.com](https://app.banity.com/) for decom.ch

 

## If you have any questions, don’t hesitate to contact me:

**✉️ **[**Email**](mailto:max.hoheiser@andamp.io)

[Web3](https://insights.andamp.io/blog/tag/web3) [Test Automation](https://insights.andamp.io/blog/tag/test-automation) [Cypress](https://insights.andamp.io/blog/tag/cypress) [End2End Testing](https://insights.andamp.io/blog/tag/end2end-testing) [Metmask](https://insights.andamp.io/blog/tag/metmask)

## Read On

[![](https://miro.medium.com/v2/resize:fit:700/1*JpEcT3Ugg3cBEaDeCXan8A.jpeg)](https://insights.andamp.io/blog/extending-synpress-with-additional-metamask-commands?hsLang=en)

### [Extending Synpress with additional MetaMask commands](https://insights.andamp.io/blog/extending-synpress-with-additional-metamask-commands?hsLang=en)

 A guide on how to find and define new selectors for Puppeteer and add custom commands for Cypress to Synpress.

[![](https://miro.medium.com/v2/resize:fit:1400/1*7QzI18A7wTLO92bwFm1_7w.png)](https://insights.andamp.io/blog/testing-multiversx-former-elrond-smart-contracts?hsLang=en)

### [Testing MultiversX (former Elrond) Smart Contracts](https://insights.andamp.io/blog/testing-multiversx-former-elrond-smart-contracts?hsLang=en)

 An introduction to the Given-When-Then pattern, followed by instructions on how to use that pattern to test smart contracts.

[![Why We Chose CDKTF Over HCL for Our Infrastructure](https://miro.medium.com/v2/resize:fit:700/1*oCrShpkC0v0AJ9ijBEswAQ.jpeg)](https://insights.andamp.io/blog/why-we-chose-cloud-development-kit-for-terraform-over-hashicorp-configuration-language-for-our-infrastructure?hsLang=en)

### [Why We Chose Cloud Development Kit for Terraform Over HashiCorp Configuration Language for Our Infrastructure](https://insights.andamp.io/blog/why-we-chose-cloud-development-kit-for-terraform-over-hashicorp-configuration-language-for-our-infrastructure?hsLang=en)

 In this blog post, the author breaks down the challenges with HCL, why CDKTF’s programming-language flexibility was a game-changer, and how it’s helping us build a more scalable, maintainable infrastructure.

[![logo_white](https://27222727.fs1.hubspotusercontent-eu1.net/hubfs/27222727/logo_white.svg "logo_white")](http:/?hsLang=en)

[Follow &andamp on LinkedIn](https://www.linkedin.com/company/andamp/) [Follow &andamp on Instagram](https://www.instagram.com/_andamp_)

## Our Services

- [Team as a Service](https://insights.andamp.io/team-as-a-service/)

## Sitemap

- [Blog](https://insights.andamp.io/blog)
- [Career](https://insights.andamp.io/career)
- [About Us](https://insights.andamp.io/about-us)
- [Code of Conduct](https://insights.andamp.io/code-of-conduct)
- [Our Diversity Journey](https://andamp.io/diversity-journey)

## Our Mission

 We offer a risk-free way to optimize customer experience and realise your business' potential through MVPs

## Case Studies

- [Notarity](https://insights.andamp.io/case-studies/notarity/)

## Location

 andamp GmbH  
 Währinger Straße 48/2. Hof  
 1090 Vienna, Austria

## Contact Us

[hello@andamp.io](mailto:hello@andamp.io)  We would love to hear about your ideas!

### Let's build your project!

This site is protected by reCAPTCHA and the Google [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms) apply.

® 2025 andamp GmbH [Legal Notice](https://insights.andamp.io/legal-notice/?hsLang=en) [Privacy Policy](https://insights.andamp.io/privacy-policy/?hsLang=en)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Max Hoheiser",
    "url" : "https://insights.andamp.io/blog/author/max-hoheiser"
  },
  "dateModified" : "2023-05-23T10:02:47.579Z",
  "datePublished" : "2022-03-30T20:45:00.000Z",
  "headline" : "How to set up Synpress for Web3 dApp Frontend Test Automation with MetaMask",
  "image" : [ "https://miro.medium.com/v2/resize:fit:700/1*UFkzEEmfRMaD7WoN9njI4A.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://insights.andamp.io/blog/how-to-set-up-synpress-for-web3-dapp-frontend-test-automation-with-metamask",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://insights.andamp.io/hubfs/andamp%20Full%20Logo%20Blue%20Light.svg"
    },
    "name" : "andamp GmbH"
  }
}
```