E2E Tests for Web3 Applications

Rate this content
Bookmark

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.

Rafaela Azevedo
Rafaela Azevedo
21 min
03 Nov, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

In this Talk, Rafaela discusses Web3, its decentralized and token-based model, and the architecture based on smart contracts. Testing Web3 poses challenges due to the need for third-party providers like MetaMask. Approaches such as mocking the Web3 flow and using end-to-end testing tools like Taskafar are suggested. The trade-offs in Web3 testing include test speed and dependency on third-party apps. Balancing unit, integration, and end-to-end tasks is crucial for a robust testing strategy.

Available in Español

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.

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
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Network Requests with Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.
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
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
Making JavaScript on WebAssembly Fast
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 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
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.
Detox 101: How to write stable end-to-end tests for your React Native application
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Yevheniia Hlovatska
Yevheniia Hlovatska
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
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.
API Testing with Postman Workshop
TestJS Summit 2023TestJS Summit 2023
48 min
API Testing with Postman Workshop
Top Content
WorkshopFree
Pooja Mistry
Pooja Mistry
In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman.
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.