7

I want to test how my application interacts with Metamask (e.g. is the wallet open?) and create a flexible test configuration that enables me to access the application by 'mounting' the Metamask interface in a similar way to how ordinary 'login' is done (I use MM for login effectively) in the Assert JS (2018) lecture videos like: https://www.youtube.com/watch?v=5XQOK0v_YRE Is there any reference material or advice for testing Metamask with Cypress? Cypress has the following documentation for loading a Chrome extension plugin:

    module.exports = (on, config) => {
      on('before:browser:launch', (browser, launchOptions) => {
        // supply the path to an unpacked WebExtension
        // NOTE: extensions cannot be loaded in headless Chrome
        launchOptions.extensions.push('/path/to/webextension')

        return launchOptions
      })
    }

but there's no other assistance beyond this. Once it's loaded, how would I interact with it to produce meaningful tests? I expect that this should be possible. I see that other's have considered the issues and I have posted this question in the MM github: https://github.com/MetaMask/metamask-extension/issues/8605 thx ...

dotnetspec
  • 91
  • 1
  • 5

2 Answers2

6

As per: https://github.com/cypress-io/cypress/issues/1965

You can't test or interact with extensions using Cypress with ease.

As a workaround, I've used puppeteer in conjunction with Cypress to be able to achieve this.

Your example for loading extensions is correct. You can see my approach here, which downloads latest metamask version before loading it in browser: https://github.com/Synthetixio/synpress/blob/16095f8eb9ad6d92e95719c903878c32991a8ab2/plugins/index.js#L56-L58

However, remember about these things before going this way:

  1. Because metamask is opened as a new tab on initial install after you run a browser, Cypress tests won't start with default setup because Cypress background tab will be "inactive". To fix this, you need to use these:
module.exports = (on, config) => {
  on('before:browser:launch', async (browser = {}, arguments_) => {
    if (browser.name === 'chrome') {
      arguments_.args.push('--disable-background-timer-throttling');
      arguments_.args.push('--disable-backgrounding-occluded-windows');
      arguments_.args.push('--disable-renderer-backgrounding');
    }
}

https://github.com/Synthetixio/synpress/blob/16095f8eb9ad6d92e95719c903878c32991a8ab2/plugins/index.js#L48-L53

  1. Always use "chromeWebSecurity": true in cypress.json config, otherwise metamask will won't work properly with dapps and have issues with connection. https://github.com/Synthetixio/synpress/issues/17

Consider if you won't need to turn them off in long term: https://docs.cypress.io/guides/guides/web-security.html#Limitations

  1. Always run Cypress inside headed mode (cypress run --headed). Headless won't work with extensions.

Feel free to checkout Synpress which is an integration of metamask with Cypress: https://github.com/Synthetixio/synpress

I think you can find a lot of details here which will suit your needs.

Cheers, Jakub.

Jakub Mucha
  • 1,342
  • 1
  • 13
  • 18
0

Using Synpress is our only solution in Web3 right now ( if we don't consider mocking the Web3 provider ). Check out this article it Helps you configure Synpress and Cypress.

if you have Cypress installed note that you have to specify your Cypress.config path when using "Synpress open" using the -cf flag. Also, check out the GitHub page.

mostafa
  • 324
  • 2
  • 8