ivelin
December 26, 2021, 5:55pm
1
Is there a recommended e2e test framework for web3 apps and Brave Wallet?
For example, Dappeteer is an option (around puppeteer) for Chrome and MetaMask:
Synpress is another MetaMask option (Cypress wrapper):
1 Like
brian
December 29, 2021, 3:50am
2
We aim to be fully compatible with MetaMask so basically you can do anything you do with Chrome + MetaMask. Please let us know if you run into any issues though.
ivelin
December 31, 2021, 4:10pm
3
Hi Brian,
Thank you for the response.
The question was related to test automation. Is there an API or a documented and stable UI component convention that web3 app developers can use to write end to end tests with cypress, playwright or puppeteer?
Unfortunately MetaMask does not offer a stable e2e test API yet, which requires manual testing before each release. That of course is error prone and unreliable.
Maybe Brave can lead the way towards more polished web3 UX. Happy to setup a call with your dev team to discuss ideas further.
brian
January 7, 2022, 5:08pm
4
We don’t have a way yet but please post an issue here if you don’t mind:
I think it’ll be not until the 2nd half of this year until we might be able to take a look on it though because we have a very aggressive list of things to do before that.
ivelin
January 7, 2022, 6:53pm
5
Done:
opened 06:51PM - 07 Jan 22 UTC
OS/Android
OS/Desktop
Transferring a discussion from the Brave public forum per @bbondy 's request.
…
https://community.brave.com/t/e2e-testing-for-web3-app-interactions-with-brave-wallet/318181/4
**The Web3 Frontend Brittleness Problem**
Many of today's web3 apps feel brittle, partially because there is no robust e2e test framework API officially supported by MetaMask.
There are frequent ongoing UI flow breaks and misplacement or misrepresentation of user's crypto funds due to subpar UX. This is true even for top web3 apps like Uniswap, Axie and Sandbox. As users navigate between different web3 apps and interact with multiple blockchain networks and wallets, these web3 apps often get out of sync with the state of the current wallet and as a result, the user ends up looking at unexpected content.
Given web3's promise to better protect user's identity, privacy and provide more control over user's own assets, it is imperative to offer superior, trustworthy UX. That in turn requires improving on test automation practices and infrastructure.
**Current Workarounds**
Test frameworks like dappeteer and synpress are trying to bridge the gap, but they feel brittle as they are constantly chasing MetaMask's changing front end code. This test framework brittleness frustrates web3 developers who are used to sophisticated web2 tooling. Writing web3 e2e tests that frequently break due to underlying base layer problems, results in postponing these test automation initiatives, which then results in brittle web3 frontend apps and subpar web3 UX.
The following snippet is an example of web3 e2e test frameworks "screen scraping" metamask code.
```
const firstTimeFlowFormPage = '.first-time-flow__form';
const secretWordsInput = `${firstTimeFlowFormPage} .first-time-flow__seedphrase input`;
const passwordInput = `${firstTimeFlowFormPage} #password`;
const confirmPasswordInput = `${firstTimeFlowFormPage} #confirm-password`;
const termsCheckbox = `${firstTimeFlowFormPage} .first-time-flow__terms`;
const importButton = `${firstTimeFlowFormPage} .first-time-flow__button`;
const newPasswordInput = `${firstTimeFlowFormPage} #create-password`;
const newSignupCheckbox = `${firstTimeFlowFormPage} .first-time-flow__checkbox`;
```
and another example:
```
const addressInput = await page.waitForSelector('#custom-address');
addressInput.type(tokenAddress);
await page.waitForTimeout(4000);
const nextButton = await page.waitForSelector(`button[data-testid='page-container-footer-next']:not([disabled])`);
await nextButton.click();
const footerButtons = await page.$$('footer > button');
```
While web3 app test developers are looking for reliable API that looks like this:
```
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();
```
This MetaMask test-dapp repo could be a starting point for standardizing web3 e2e testing by documenting and providing test-spec examples for the interaction between its page components and the metamask wallet in various browsers through a cross browser e2e framework such as playwright.
This issue was also reported in MetaMask's repo:
https://github.com/MetaMask/test-dapp/issues/147
Hope we can get some traction soon, although I see that Brave’s repo has over 4K open issues already.
Will keep an eye out for updates. Happy to help with use cases, testing and design ideas from OlympusDAO’s front end apps perspective.
Thank you!
1 Like
system
February 6, 2022, 6:53pm
6
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.