E2E Tests for Web3 Applications

We will go through a brief explanation of what is Web3 and the architecture of a web3 application. Then we will talk about how to end-to-end test, its challenges, some test tools that are available, and a demo using cypress and metamask.

Agenda: What is Web3; The Architecture of a Web3 Application; Web3 E2E Tests Introduction; Web3 E2E Tests Challenges; E2E Test Tools; Demo.

Rate this content
Bookmark
Video Summary and Transcription
The video discusses the challenges and strategies involved in end-to-end testing for Web3 applications, emphasizing the integration with third-party providers like MetaMask. It highlights the complexities of testing in a decentralized environment where the front-end interacts with smart contracts and the Ethereum blockchain. The talk covers the architecture of Web3, which is based on smart contracts and offers more privacy and security compared to traditional web applications. The speaker explains the use of tools like SynPress and Synthress for testing Web3 applications, noting the trade-offs between using real third-party integrations and mocks. Testing with SynPress provides real-world scenarios, but mocking Web3 interactions can speed up the testing process and reduce dependencies. The talk also delves into the role of MetaMask in Web3 applications, serving as a cryptocurrency wallet and interface for Ethereum blockchain interactions. The video concludes with a demonstration of a mock Web3 scenario using Cypress and discusses the importance of balancing unit, integration, and end-to-end tests for a robust testing strategy.
Available in Español: Pruebas E2E para Aplicaciones Web3

FAQ

Using a mock in Web3 application testing allows developers to simulate blockchain interactions without relying on real third-party integrations. This approach reduces dependencies, helps avoid issues related to third-party downtimes or bugs, and speeds up the testing process.

For end-to-end testing of Web3 applications, tools like SynPress can be used. SynPress is a wrapper from Cypress IO that supports integration with MetaMask. Alternatively, developers can use typical testing frameworks like Jest or Mocha for unit tests, and mock strategies for integration tests.

The main challenge in end-to-end testing for Web3 applications is the integration with third-party providers like MetaMask, which are necessary for blockchain interactions and transaction submissions. Current test frameworks often struggle to fully integrate these third-party plugins, especially in headless browser environments.

Web3 is the new version of the web that incorporates decentralization, token-based economics, and blockchain technology. It emphasizes a read-write-own model, allowing users more control and ownership over their data and the online communities they are part of.

In Web3 applications, the architecture is centered around smart contracts and the Ethereum blockchain. Unlike traditional web applications that have a front-end, back-end, and database controlled by a corporation, Web3 applications have a decentralized structure where the front-end interacts with smart contracts on the Ethereum blockchain.

Using real third-party integrations in Web3 testing provides a more accurate real-world scenario but can lead to slower test execution and dependency on third-party reliability. Mocks, on the other hand, offer faster testing and independence from third-party issues but might not mimic real-world interactions as precisely.

1. Introduction to Web3#

Short description:

I'm Rafaela, a QA professional with 15 years of experience in test automation, strategy, and leadership. I created a blog in 2011 to share my knowledge in QA, programming, DevOps, and test automation. In this part, we'll discuss Web3, its decentralized and token-based model, and the evolution of the web. We'll also explore the architecture of Web3, which is based on smart contracts and offers more privacy and security.

Hello, everybody. I'm Rafaela, and I'm gonna share a bit of my experience with end-to-end tests for Web3 applications. So just a bit about me. I have 15 years experience in QA, test automation, test strategy, architecture, and leadership, and I got really passionate about the QA area, so I created this blog in 2011 where, you know, you can find everything that I have learned in the past couple of years.

So code snippets, programming, DevOps, leadership, and test automation, of course. I was born and raised in Brazil, to be more specific, I'm from a coastal city called Santos in Sao Paulo. And you can see the picture on the screen. I'm also a really big fan of Harry Potter, as you can see, and this is one of the reasons why I moved to London eight years ago. And the weather as well, but nobody believed when I said that.

But yeah, the agenda is going to be this one. We are going to talk about what is Web3, then the architecture of the Web3 application, some introduction about the entry-in tests, and the challenge, then the tools that you can use, and we are going to have two demos, one just using a mock, and another one using a framework called SyncPress. And then in the end, we are going to talk about the tradeoffs of each approach.

So what is Web3? Web3 is just a new version of the web. We are on Web2 right now and this Web3 comes with the ideas of decentralization, token-based economics and also blockchain technology. So it offers a read-write-own model, so people, they have financial stake and more power over the online communities they belong to. So they own the data, which is not the case right now. The online experience is expected to change as cell phones and smartphones and the pieces they did in the past, so it's going to be a big change for, you know, us that we are living in this moment.

Some business they try to join this new market but they encounter some pushbacks as you know with blockchain as well. Like, you know, the negative impact on the environment and the financial speculation as well. This is the evolution of the web. So from the first version to now, so the first version we had the static read-only pages where you couldn't interact too much with them. And then now what we have is a bit more dynamic and interactive so we can go there and post things. So, you know, Twitter, we can just send our data away basically through these big corporations. And the Web3, which is the one coming now, is more private, secure and decentralized. So the idea is, you know, our data is not going to be owned by these big corporations but by yourself.

And the architecture of the Web3 is also quite different because it's based on smart contracts like blockchain. So if we see now what we have is basically the front-end, back-end database inside of this web server. And this is controlled by, you know, the corporation or the company, somebody. And the Web3, we have just the front-end in the web server. So this is going to still be part of the, you know, it's going to be controlled by the company or the corporation.

2. Web3 Architecture and Testing Challenges#

Short description:

The smart contracts in Web3 are decentralized and handle the business logic of transactions. Interactions with the front-end are then passed to the smart contracts and the Ethereum virtual machine (EVM), which adds transactions to the blockchain. The Web3 stack consists of layers such as centralized applications, cryptocurrency wallets like MetaMask, and developer environments. Unit and UI tests can be performed using familiar frameworks, while integration tests can use smart contract libraries. However, full end-to-end tests face challenges due to the need for third-party providers like MetaMask. Faking UI interactions is complex, and existing test frameworks do not support these plugins. One approach is to mock the Web3 flow, where the user interacts with the Web3, which then interacts with MetaMask or the third-party provider to send transactions to the Ethereum blockchain.

But then the smart contracts, the EVM and the Ethereum blockchain, this is something that is going to be decentralized. And the smart contracts, they have the business logic, or the protocol of these transactions and these business. So basically now, what we have is just we are going to interact with the front-end and then the front-end is going to interact with the smart contracts, and then EVM, the Ethereum virtual machine, and this is going to add the transaction to the blockchain. So it's going to add a new block to this Ethereum blockchain. And this is the part where it's decentralized.

So this is an example of a WebTree stack. So we have some examples of like tools and frameworks, but you can see the layers. So you have the first layer with the centralized applications. So it can be something like MetaMask, which is a plugin to authorize it. Identity have wallets, it's a cryptocurrency wallet. Then you have Uniswap. Then you have another layer presentation layer, which is called then you have the developer environments where you can, you know, test your product. And then you have the other layers like blockchain interaction layer. And the network layer with the EVM blockchains. So this is not all the tools that you can use. It's just like an example with the most popular ones, I believe. But at least you have an idea of, you know, how it is their Web3 stack.

And then the tasks, they are, the end-to-end tasks are more like the problem with Web3. And if you want to do, you know, the unit tests, it's fine, you can use something that you already use it for, you know, web2 applications. You can use Jest, you can use Mocha, it's the same kind of framework. And then you can just verify, you know, if the components they are operating as intended. So UI tests are also not a problem, because you can still use the same frameworks that you use right now to do the tests. And, yeah, the integration tests, they are not a problem as well, because you can just use the smart contract libraries to mimic their own changes by just mocking the underlying EVM. So the problem is when you go and you try to do the full end-to-end tests without the mocking, because you have this third party provider that you need to use to communicate with the blockchain and submit the transactions, and most of the frameworks right now that do end-to-end tests, they cannot access this plugin. So one of the most used plugins is MetaMask, as I said, it's a cryptocurrency wallet, and you need these to interact with the Ethereum blockchain and sign the private keys and do the full transaction cycle flow. So yeah, faking these UI interactions is really complex and the test frameworks that we have right now, they don't support these plugins, even when running headless browser. So one of the approaches that I'm going to show you after is just mocking the WebTree. But this is basically what is the flow. So the user goes in and interacts with the WebTree that interacts with the MetaMask or the third-party provider. And then finally, MetaMask is able to send this transaction to the Ethereum blockchain and add the block there.

3. Web3 Transaction Signing and Testing#

Short description:

Transactions in Web3 are signed by a private scheme, making it difficult for UI frameworks to handle. One approach is to use the WebTree mock, which allows for testing without relying on real third-party integrations. Another option is to use Synthress, a Cypress IO wrapper with Metamask support. However, this limits you to using only Metamask. Alternatively, you can use other end-to-end testing tools like Taskafar and mock the Web3 interactions. I will now demonstrate a mock Web3 scenario using Cypress and show you the code on my GitHub.

And these transactions, they are signed by a private scheme, so UI frameworks, they cannot do that at the moment as well. And one of the approaches is using the WebTree mock. So now, it is a good practice anyway not using the real third-party integration because you shouldn't be like dependent on this, because you don't have control of this third-party. You don't have control of the plug-in. So if it crashes or if there is a bug, you might need to pause your entire development just because you cannot test your own application. A full end-to-end cycle.

So, one idea is to mock the web tree and then just do the same, sending transactions and then simulating this part with the Ethereum blockchain. And then yeah, with the web tree mocking you can solve the problem by signing the transactions with a private key automatically and then sending to the EVM and Ethereum blockchain. Another approach would be using this framework called Synthress, which is a wrapper from Cypress IO and has Metamask support. But yeah, the problem of this, you are tied to use only Metamask with this. It's the only telepathy provider plugin that supports at the moment, and you need to use Cypress IO as well because it's a wrapper from Cypress IO. But as it is, you can choose between locking the version of the Metamask so you don't have unexpected failures, or you can just make sure that Synthress can just run the tests but before that, update the Metamask plugin just to have the latest one. So you can decide what you want to do, basically if you want to lock the version, or if you want to update with the latest Metamask before running your tests. Which would be good to figure out, you know, if your application has any problem with the new version of Metamask. And you can use any of the other end-to-end tests tools that are in the market already, the only problem is they don't have something like Syncpress, they don't have a framework just that is built on top of them, apart from Cypress.io, just to do the integration with the third-party provider, but you can use the mock strategy, so you can still use, for example, Taskafar, that I really like as well, you can use that, and then mock the web-trim. But, of course, they have down-signs as well, so if you want to use something different from Metamask, you can use it with the mock, but then if you go with SynQPRESS, the only thing that you can use is the Metamask plugin.

So, now we are gonna just see the first demo, which is with the mock, so it's gonna be Cypress and the mock of Web3. Let me just go to the other screen... Oops. Just, sorry... This one. Yeah, this is on my GitHub and it's just a fork from another project, but you can see already how that works. So it's a simple... You just need to use yarn start to start a local host web page, simple page, and then you can use yarn cypress run to run the tasks. But basically it's just this task is sending the transaction. It's really fast so you cannot see it properly. But the first one is just connecting to MetaMask. You can see... Oops. You can see the connect with the logging and this is the sample they created.

4. Web3 Testing and Trade-offs#

Short description:

You need to check the data response, if it's what you expect. Try sending a transaction to the address and amount. There is another demo using the SyncPress tool, which integrates with MetaMask. The trade-offs include test speed and dependency on third-party apps in real end-to-end tests.

So you can see here is expecting to have the address of the wallet that you connected. Then you are signing the messages as well. And then you need to check here the data response, if it's exactly what you expect and if it's doing the right transactions. And then in the end, yeah, try to send a transaction which you sent to this address, this amount. And then you should have... Yeah, in this case, it's okay to have this service, it cannot send transactions, which was expected in this case. And then signing out as well, which you should be... Is really, really simple, this one, but you can at least see how the mock is done.

And the other... And the other... This is the address, so if you want to have a look. And the other demo is going to be using the SyncPress tool. So you can see that we are using the SyncPress and we are really integrating with MetaMask. So this one is just running Cypress, and it's loading Cypress, and then it's gonna load the specs, and just run straight away. So this is the MetaMask plugin. You can see that it's starting, and it's not mocking, so if you go and install MetaMask plugin you can see that it's exactly like that. And also on the top you can see Chrome extension, so it is the real plugin. Then now it was just setting up the MetaMask with importing the account, and now it is using the plugin to accept the connection request and just connect to this account. And now it's just creating the network as well. And yeah, basically this is another demo with the SynPress. It's really straightforward as well, but it's well maintained. You can also check on the official SynPress repo on GitHub. They have other examples there if I'm not wrong. But this one is really simple and is on my GitHub repo as well, GitHub account, sorry.

And yeah, of course the trade-offs. So we have the test speed that we need to take into account. So when you use the mock, of course it's faster than using the Third Party plugin and waiting to load and also the network. All the problems that you have when you are not mocking this third party provider. Then you have the dependency on the third party app when you are doing the full real end-to-end tests. So if something crashes, if there is a bug, you might need to just stop or revert the version that you were using before the bug.

5. Testing Strategies and Balancing Tasks#

Short description:

You might need to pause or wait for bug fixes when testing with the latest version. End-to-end tests with SyncPress provide real-world scenarios, while mocking requires maintenance to ensure compatibility. Mocking allows for isolated testing, eliminating dependencies on external systems. Balancing unit, integration, and end-to-end tasks is crucial for a robust and trustworthy testing strategy.

And you might need to pause, or if you are really testing and you want to make sure that it's going to work with the latest version. If there is a bug, you might need to wait until this bug is fixed just to make sure that it is OK.

And also, the end-to-end test with SyncPress is the real-world test, so you know that this really what the user's going to do, they are not going to mock, of course. And then the other one is MockMaintainance, so you need to worry about that if you are mocking, just to keep up to date if you want to make sure the latest is working with your app.

And then you have the test app in isolation as well, so when you do the mock, you don't care about the study party, if it's working or not then you are making sure that your app is always working fine, you don't need to pause, you don't need to stop your development, you don't need to worry about the study party should be fixed or anything like that. It is a good practice anyway to do that, to mock.

So one thing that you can do as a strategy is just to have a good balance between the unit tasks, the integration tasks so you can mock most of the tasks and then having, I don't know maybe 10% or even less of end-to-end tasks. So you can use something, for example the framework and automating these 10% or you can have some exploratory tasks doing the full end-to-end or you can just have manual tasks for that. It's really up to you, your project, the strategy that you use, what are your needs. But a good balance, always make sure that okay, we cannot task end-to-end with the latest version of the telepathy, but we know that with, you know, integration is working fine, we have everything covered, so it's more robust, it's more trustworthy.

And yeah, that's it. So thank you. If you want to connect to me, you know, in any of these social medias, just feel free to do so or send any questions or feedbacks. I'm open for these as well. It's always good to improve. So yeah, that's it.

Rafaela Azevedo
Rafaela Azevedo
21 min
03 Nov, 2022

Comments

Sign in or register to post your comment.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Scaling Up with Remix and Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Network Requests with Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Cecilia Martinez, a technical account manager at Cypress, discusses network requests in Cypress and demonstrates commands like cydot request and SCI.INTERCEPT. She also explains dynamic matching and aliasing, network stubbing, and the pros and cons of using real server responses versus stubbing. The talk covers logging request responses, testing front-end and backend API, handling list length and DOM traversal, lazy loading, and provides resources for beginners to learn Cypress.
Testing Pyramid Makes Little Sense, What We Can Use Instead
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
Gleb Bahmutov
Roman Sandler
2 authors
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.

Workshops on related topic

Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
Points Covered:
1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
How It Will Help Developers:
- Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
How to Start With Cypress
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
Filip Hric
Filip Hric
The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.
Integrating LangChain with JavaScript for Web Developers
React Summit 2024React Summit 2024
92 min
Integrating LangChain with JavaScript for Web Developers
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Hussien Khayoon
Kahvi Patel
2 authors
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.