E2E Test API

[ivelin]

The End-to-end test problem

Currently there is no stable WalletConnect API that allows web3 apps to write E2E tests that cover user's path across app and wallet controls. This leads to users experiencing app brittleness as they switch between wallets and networks.

For example, consider an issue like this one:
OlympusDAO/olympus-frontend#1038

Proposed Solution
Ideally , WalletConnect will provide a stable API that can be used in e2e tests to reproduce the exact user path through a web3 app and wallet on a specific browser and OS platform.

There are some early attempts for that with MetaMask such as dappeteer and synpress, but they are constantly breaking because the authrose of the tools have to keep up with unstable HTML control tags instead of relying on a stable API provided by wallets.

Additional Context
This issue was brought up to MetaMask (here), Brave (here) and Coinbase Wallet / WalletLink (here).

Hopefully WalletConnect supports this effort. Happy to setup a call across teams to coordinate a plan of attack.

[MuckT]

@ivelin we are working on some e2e tests for wallet connect with Valora. You can see the progress here: valora-inc/wallet#1412

[ivelin]

@ivelin we are working on some e2e tests for wallet connect with Valora. You can see the progress here: valora-inc/wallet#1412

@MuckT This is really good stuff. Thank you for sharing. Have you started a conversation with the WalletConnect team about this. Looks like we can use some support in several areas:

• Provide stable API for e2e test interaction. Avoid HTML scraping that depends on finding wallet UI components by test labels (await waitFor(element(by.text('Success! Please go back to ...) or style dependent element IDs (await waitFor(element(by.id('SendOrRequestBar')))).
• Test data injection hooks. The WalletConnect UI should behave as it does in production, but it should allow injecting test data to emulate various user actions and wallet behavior. For example timing out waiting on user to scan barcode or user rejecting a transaction request on their mobile app.
• Provide test environment mockup mode with predictable response times. Currently e2e tests have to wait as much as 10-15 seconds before proceeding. This is inefficient and unnecessary in a UX test automation environment where long IO operations can be replaced with local mockup behavior. In CI environments sensitive to total test run duration, e2e test API response times need to have predictable upper boundaries.

dappeteer seems to have a good abstraction API for MetaMask, which can be a starting point that WalletConnect standardizes and abstracts out wallet specific syntax.

  const browser = await dappeteer.launch(puppeteer, { metamaskVersion: 'v10.1.1' });
  const metamask = await dappeteer.setupMetamask(browser);

  // you can change the network if you want
  await metamask.switchNetwork('ropsten');

  // you can import a token
  await metamask.addToken('0x4f96fe3b7a6cf9725f59d353f723c1bdb64ca6aa');

  // go to a dapp and do something that prompts MetaMask to confirm a transaction
  const page = await browser.newPage();
  await page.goto('http://my-dapp.com');
  const payButton = await page.$('#pay-with-eth');
  await payButton.click();

  // 🏌
  await metamask.confirmTransaction();

It might be ideal to do this for playwright instead of puppeteer in order to allow testing across multiple browsers, including webkit, not just chromium based.