Implement Synpress support methods in your Web3 tests

Hello guys,

Today I am going to post a quick and easy to use snippet with Synpress MetaMask support methods in your Web3 E2E (end-to-end) Test Project.

Create a base class to get the Synpress methods and extend it to use across the project. Here are some examples of methods that you can have:

export default class MetaMaskSupport {
  getCurrentNetwork() {
    return cy.getNetwork();
  }

 isMetamaskWindowActive() {
      return cy.isMetamaskWindowActive();
  }

  getMetamaskWalletAddress() {
    return cy.fetchMetamaskWalletAddress();
  }

  acceptMetamaskAccessRequest() {
    cy.acceptMetamaskAccess();
  }
}

Then you can either extend the class:

import MetaMaskSupport from '../metaMaskSupport';

export default class HomePage extends MetaMaskSupport {
  constructor() {
    super();
  }

  visit() {
    cy.visit('/');
  }

  waitUntilLoggedIn() {
    cy.waitUntil(() => {
      const walletAddress = this.getMetamaskWalletAddress();
      return walletAddress.should('exist');
    });
  }

  getLoggedInWalletAddress() {
    const walletAddress = this.getMetamaskWalletAddress();
    return walletAddress.invoke('text');
  }
}

Or you can instantiate as an object:

import MetaMaskSupport from '../metaMaskSupport';

export default class HomePage {
  constructor() {
    super();
    this.metaMaskSupport = new MetaMaskSupport();
  }

  visit() {
    cy.visit('/');
  }

  waitUntilLoggedIn() {
    cy.waitUntil(() => {
      const walletAddress = this.metaMaskSupport.getMetamaskWalletAddress();
      return walletAddress.should('exist');
    });
  }

  getLoggedInWalletAddress() {
    const walletAddress = this.metaMaskSupport.getMetamaskWalletAddress();
    return walletAddress.invoke('text');
  }
}

Now, get yourself a drink, you deserve it 🤣