(function(){<br />
let canvas = document.createElement('canvas'),<br />  
ctx = canvas.getContext('2d'),<br />             
w = canvas.width = innerWidth,<br />
h = canvas.height = innerHeight,<br />
particles = [],<br />
properties = {<br />
bgColor : 'rgba(17, 17, 19, 1)',<br />
particleColor : 'rgba(255, 40, 40, 1)',<br />
particleRadius : 3,<br />
particleCount : 60,<br />
particleMaxVelocity : 0.5,<br />
lineLength : 150,<br />
particleLife : 6,<br />
};<br />
<br />
document.querySelector('body').appendChild(canvas);<br />
<br />
window.onresize = function() {<br />
w = canvas.width = innerWidth;<br />
h = canvas.height = innerHeight;<br />
}<br />
<br />
class Particle {<br />
constructor() {<br />
this.x = Math.random()*w;<br />

Home PostsTesting dApps with Synpress

Testing dApps with Synpress

For testing functionality related to MetaMask, I use Synpress. It is built on top of Cypress, so the development workflow is almost identical to working with Cypress.

Documentation: Synpress documentation

First, install Cypress:

npm install cypress --save-dev

Then install Synpress:

npm install --save-dev @synthetixio/synpress

To use Synpress, you will also need a Synpress private key.

package.json scripts:

json

1"scripts": {
2    <...>
3    "synpress": "synpress run --configFile=synpress.config.js",
4} 
5

Run the tests with:

npm run synpress

A list of core commands and their descriptions can be found here:
https://github.com/Synthetixio/synpress/blob/dev/tests/e2e/specs/metamask-spec.js

Below are some commands that I found particularly useful.

Checking Network Switching

For example, switching to the Goerli network:

JavaScript

1cy.changeMetamaskNetwork('goerli').then(networkChanged => {
2    expect(networkChanged).to.be.true;
3});
4

Confirmation

JavaScript

1cy.acceptMetamaskAccess().should("be.true");

Adding a network

JavaScript

1cy.addMetamaskNetwork({
2            networkName: 'Polygon',
3            rpcUrl: 'https://polygon-rpc.com',
4            chainId: '137',
5            symbol: 'MATIC',
6            blockExplorer: 'https://polygonscan.com',
7            isTestnet: false,
8        }).then(networkAdded => {
9            expect(networkAdded).to.be.true;
10        });
11

Switching accounts and verifying that the connection was established.

JavaScript

1cy.switchMetamaskAccount(1).then(accountChanged => {
2			expect(accountChanged).to.be.true;
3}).then(connected => {
4			expect(connected).to.be.true;
5});

Getting the address and performing further actions with it.

JavaScript

1cy.getMetamaskWalletAddress().then(address => {
2            let cut_address = address.toString().substring(0, 4) + '...' + address.toString().substr(address.length - 4);
3            cy.get('.user_address').should('have.text', cut_address.toLowerCase());
4});
5

Disconnect

JavaScript

1cy.disconnectMetamaskWalletFromDapp().then(disconnected => {
2    expect(disconnected).to.be.true;
3});
4

Transaction confirmation

JavaScript

1cy.confirmMetamaskTransaction().then(confirmed => {
2    expect(confirmed).to.be.true;
3});
4

Transaction rejection

JavaScript

1cy.rejectMetamaskTransaction().then(rejected => {
2     expect(rejected).to.be.true;
3});
4

Switching to the MetaMask notification window.

JavaScript

1cy.switchToMetamaskNotification();

Adding and switching networks.

JavaScript

1cy.allowMetamaskToAddAndSwitchNetwork('close').then(approved => {
2     expect(approved).to.be.true;
3 });
4

The synpress.config.js file.

JavaScript

1const setupNodeEvents = require("@synthetixio/synpress/plugins/index");
2const { defineConfig } = require('cypress');
3
4const supportFile = 'tests/e2e/support.js';
5
6module.exports = defineConfig({
7  userAgent: "synpress",
8  retries: {
9    runMode: 0,
10    openMode: 0
11  },
12  fixturesFolder: "tests/e2e/fixtures",
13  screenshotsFolder: "tests/e2e/screenshots",
14  videosFolder: "tests/e2e/videos",
15  video: false,
16  chromeWebSecurity: true,
17  viewportWidth: 1366,
18  viewportHeight: 850,
19  e2e: {
20    setupNodeEvents,
21    baseUrl: "http://localhost:8080",
22    specPattern: 'tests/e2e/specs/**/*.{js,jsx,ts,tsx}',
23    supportFile,
24  },
25  component: {
26    setupNodeEvents,
27    specPattern: './**/*cy.{js,jsx,ts,tsx}',
28    supportFile,
29  },
30  env: {
31    coverage: false
32  },
33  defaultCommandTimeout: 30000,
34  pageLoadTimeout: 30000,
35  requestTimeout: 30000
36});
37

The support.js file.

JavaScript

1import "@testing-library/cypress/add-commands";
2import "@synthetixio/synpress/support";
3

GitHub

Testing dApps with Synpress