# Make the Tests Feel the User's Pain: E2E Testing for dApps by Carlos Gonzalez

- Channel: [Devcon](https://streameth.org/devcon)
- Date: 2020-10-09
- Duration: 34:52
- Topics: blockchain, smart contracts, distributed ledger, ethereum
- Watch: https://streameth.org/watch/yt-dX9YZZxQXsM
- YouTube: https://www.youtube.com/watch?v=dX9YZZxQXsM

## Description

Visit the https://archive.devcon.org/ to gain access to the entire library of Devcon talks with the ease of filtering, playlists, personalized suggestions, decentralized access on IPFS and more.
https://archive.devcon.org/archive/watch/5/make-the-tests-feel-the-users-pain-e2e-testing-for-dapps

With the move from protocol development to more user-focused products, the decentralized applications are in a stage where frontend testing is not an easy task due to the lack of tools and experience in the field of Web3. Protocols have strong testing and auditing, but their user-facing apps lack a simple way to do so. In this workshop, we aim to explain how to start focusing on the user and ensure that they get what we expect even when the chain behaves unexpectedly.

The main things that we will touch in the workshop will be:
- Classic E2E tools (Puppeteer and Cypress)
- Why they don't work the same way in DApps
- How to use them with Web3 injectors like Metamask and connect to different testnets
- What are the key pieces to test

The workshop will start with a bit more of theory around testing and then we will move to a practical exercise where we will set up the architecture needed to properly test our decentralized app.

Speaker(s): Carlos Gonzalez
Skill level: Beginner
Track: Developer Infrastructure
Keywords: technical

Follow us: https://twitter.com/efdevcon, https://twitter.com/ethereum
Learn more about devcon: https://www.devcon.org/
Learn more about ethereum: https://ethereum.org/ 

Devcon is the Ethereum conference for developers, researchers, thinkers, and makers. 
Devcon 5 was held in Osaka, Japan on Oct 8 - 11, 2019.
Devcon is organized and presented by the Ethereum Foundation, with the support of our sponsors. To find out more, please visit https://ethereum.foundation/

## Transcript

[Applause] I to be sure that something's going to pour em like this and call that you have done like done every single component but that flow of the user I want you feel at the end of the day my name is Cameron palette and the CTO again sir the new traditional marketing user interface or order so what I was going to use today some a simple app where you can buy ticket for the bank that gun is easy just leave Department okay wait or do anything like that so he's just a simple that was pretty cool there is just have to type an email right and you know simple simple stuff if you want to check your code of employment or if your home or whatever fantasy coverage anyway here you have the different practice so you can take it out there so probably most of you are developers four or more are working on a product and finish many many startups when the fire comes thanks should I deploy we can expect to be top ahead boy I don't know I've been good to work or knowledge to device that wait I need to stressful it's not it's not just about the park itself it's also about and you don't really know if it's been to worries you feel the pain you don't want to do that so this is where the tests come I'm sure that do you have sea ice in cities because to touch the computer this blows and you don't want that so see is what they do basically just a in the tests that you have programs programs it would run the test and then they continue Superman will deploy in some way that's easy we're not going to talk today exactly about that but the previous part so just to get you tested when you have to do what you want to react with the animal component but if you are working more like in the lower levels solidity or whatever that would be one component one of those contracts integration is when you have different of those components of different parts of the code and you are together you just send parameter between it's one of them and compare the money at the end is that they were together and then you have an end-to-end testing it's not that the tests work with each other because you have gone that already you made integration testing it's more about the flow for the user is more about the the whole process is more like the behavior of the user for example in a once you buy the ticket as we're going to do we'll have to do you have to test the whole process from the beginning to the end on the end and to normally world where things get a little bit messy so properties that we can find and even more in situation occasion so we will talk about them even more later is that they take sometimes because it's not it's not just the component the code that you have to test you have to test the net so well the network the connection between the component it is we think that you want to tell you might have to make a subsection normally give you that you would do that in in local in apps or whatever if you want to test it more like you know Ted Smith for example in rinkeby it will take some time you cannot be point of failure because when you do end-to-end you are testing like function specifically but when you want you sorry when you prepare the test you need like unit testing you [Music] functions as ascetic features of the code but when you do end-to-end testing you don't test specifically the code you test the behavior of the user interaction so you don't really know where the failure can be calm for example you can have problems in the database even though that you're testing the HTML you can have problems in the server problems of course students email CSS there are many things that a campaign on probably will you cannot know exactly where the failure even though you can get close and you'll stay below probably know more or less were seeing those but you don't really know exactly where I think one of the good things of the sentence goes into the usual behavior so when you test something like a function or a specific part of the code you don't really test what the user is going to do and that's a problem because you're not close to them they're not really Houston they are bus they are get cheese and that's one of the that's for many people interesting test one of the things is that I can take normally it sounds like this student I have seen many people talking about that one obviously and if you go to the talks that you have about thirty year in a Google developer talks they also say that it's a bit flaky anything come fails the wheel and so there are some tricks and we'll talk about them yeah sometimes if you don't program if you don't know the programming like quite specific to the things that you want take a fail so yeah they have some bad parts but they have many new things as a recommendation probably most of you know about these which are rule 17 2010 I mean basically that you probably should do some 70% of unit testing 20% of interesting 10% who lives with that should be like this world applies as well to the centralized applications there is no well probably the more sister you have with the protocol any number of testing and also you will have formal education well so so I recommend following this rule so this is the beginning of it here this is here's an old library that wraps the API of crop and allows you to control from in a simply way and it's super cold is held by the Google Chrome team was crummy hopefully like recently like two months three months ago or something that they release a beta for controlling also articles what happens you get you super close today it is since we want to control the personalized applications we need a specific extensions like madam asked and therefore to really remove from the carries you can't speak indefinitely or the debugging Firefox as well and you know what we're going to do so first we have the laptop we're going to control today and this is a second demo this one it's going to be super simple beginning we just refer puppeteer we want to get it runs a browser open the new phase then just go to the page that we exert all its moods media doesn't matter then we wait for the happy pieces with Mason stuff will rot in hell we have the context super simple to be doing the demos while I'm talking I think is it as much yeah we can see here in the video if I qualify them or do whatever you need because inside of this function animals you later you can cook enough to us in electronic one and then which will do the thing that you want as I say as I said before there are some times I've been faking so for example the brochures don't are not the fastest normal code they have they need some time to make requests and process the beta so there are some things that you have to do in order to wait for those things to value the personnel which would be wasteful and then the second step a new singer that you want I recommend using different because the crosser subjects are slower than others so requests take some time some other states this time also depends on the system so I don't recommend using a fixed time at all then you have wait for selector this is the one I recommend because it will wait some time that you can define by a test or whatever to wait for this kind of specificity of it you know this is the one that I recommend to use and you can also wait for a request right and once the request to pay is done you can continue or just drop you know whatever you're doing with puppeteer because puppeteer is not that it's not testing puppeteer is a sin before instead no library allows you to open a browser and control it with the api's with so if you want to test then you have to come back to the basis if you don't know this is yet is known is what the it's a normal library that you use to test with but you can use more card or commercial Python but there are some others you can use any testing library or unit test library that you want it will work it will work nicely with material and they are constantly trying to manage this a lot of them but we're going to do here is to just integrate what we did before with yet what we did before was has getting missions that with it was in the title imagine with a world who would magically [Music] one that we spent this is the bit for all the demos all the demos are on the github repo and you just have to go to the bastard this case is the demo free so as you can see here we're not welcome without the density so here we are not so with the Rose we're not anything that's where we got to fix in the in the next thing but I just said you don't really need the whole processor for these once we get into the since I some answers you will need to open the whole browser and a song combination so sometimes you might wanna know about puppeteer I'm going to be very possible this location has me later you can come through the mid speed so unless these page flows in lesson two seconds don't come in nice or you can do testing about the page speed for saying they use assets that you have interface for something you are not using more than 50% of your CSS you can test that in one package so you can type in forms scrub text get access to the console or through the networks as you can see to page 14 in they support a channel pretty good you can recover some videos or any generate speed search drag and drop and tell that the drag and drop works which you cannot do otherwise this configuration says a sway so is if you're learning too much data or two months CSS or JavaScript or whatever you can as well very much cheese you can intercept the request and change the data following fall or Auto reboots so you can have always the same they all follow the same base and there's another this is quite important because well learn some pages when you want some things to be like quiet always the same not you can make an image of the pains half a snapshot of the one that you want it's what the triggers that you walk you have and compare the peaks of that compare them pixel X by pixel and you consider that the CSS is saying that the page is saying that's quite cool so straight but become are assuming follow the the CEO SEO service workers you got peasant that's more complicated but you can do that offline keep memories you said oh hi Brendan and his missus that's some of the cool stuff you can do but there are homes and to see to show you how simple it is to do that you just have to it's not a CSS coverage so we'll start checking all the data she says when you stop it will eat you here they wouldn't turn you are not with all the data you know of the CSS coverage for example almost are you using a comma turn in North Houston and say mucho Street another cool thing is you can do this if you are always doing those tests things are getting out of them you can intercept the request emily is unstoppable getting the stop messing with your analytics in something don't want to mess with you're going to stop the request anyone testing while service workers converse with context this is very important if you want to get into this but it won't work sagging of a distant source applications because you won't be able you will be able to access the luggage but the if you are going to use [Music] I wouldn't recommend using the proper context it's super fast just what we saw before hezonia modes it just types and you'll see [Music] well different one I think okay you don't see it because it goes because I'm saying to puppeteer to be careless so you don't see it but another chance that so here have commented it's just this line when you say headless false will open the whole brochure for you it takes a little bit long time that's it for this test now we'll go into I think what we did that wasn't before we just spicy about we need to type some emails in a mailbox but the rest is EC is send out good before this has the tip the type of people that you have right your press I recommend is you know way selector for before we do that I think that you want to type into there's one more thing and elasticity for something that we all need so that I recommend a lot well there are more ways but I recommend is using the hinterland library for that I won't show it Bristol is super simple it can render when we are so this is basically a library against the chemicals and injected into a specific but the opportunity waiting for youget device so did you see that we'll see an example man is super simple just nvm spell dump it here and you for the library you open a new browser with it you have to also and then we open and you could see that you won or create a new one you can see that you want which are perfectly then you have the typical enzyme ask approve and they will prove the society what you have construction [Music] well the api's not for me users per month but if you want to do something specific and you don't have and you don't have it in API you can always you will say down you can always go to the base of the material that I will put that Manas province librarians and control it like if it was a normal page in a browser so even if it's not in the API you still can use it it just will take a very long time so we are in the demo hopefully yellow [Music] okay just need some time we just type the whole thing probably [Music] so life famous yeah yeah let's try another one yeah baby yeah and therefore this is important to you as well he works is just immense intimate to verify all the stuff but what I think it looks he's just the type [Music] if I was one ball where you try anything else generally speaking anyway Oh another code first so all we do here is dance to puppeteer with other dear we can take the season one twist to the narwhal anyone open a new page wait for it to load once it done well that's know before all just are doing whatever you need so the first thing that you have to do is a prepare mask to be healthy basically the bottom two and I saw before at the beginning of the pub once you click the button you will pop up a venomous subsection thing and you will get to confession and that's what it does is there ways for what you do this way and identification and I teach you to come up this is quite simple probably this is what is paying right now well they're not many it does make more time and then ticket quality successfully will appear once you can switch our goods when she turn off a noun that always helps and help you well anyone I just question is that tool pretty actively maintained like if there's a breaking change in well they took pictures so you can almost under I'm always taking the in case there is something it's not maintained my me probably my innocent one team and in one of those works yeah I mean and whatever there's a failure they normally try it because I don't want to - okay you can definitely do that and they recommend you to the other side yeah you have to there and you want to do that yeah yeah but what do you have to do that is you absolutely same that the library that's when you income you have to do it in fires and that's basically putting the men on suspension for Firefox in a specific directory of puppeteer Firefox is waiting for it this word is looking for the go back when you open the browser there's a directory where the values or having stopped and you what you have to do is to get the code editor and then tell it to load it and where it is so let's try it once more that one and one thing if you want to use these on see I like to call CIA whatever the whole thing so such a ball and everything so yeah it was only when I say I was saying if you're not testing it on if you want to use it on signals yet for something what you have to do is to each style the eggs virtual frame memory typical thing is there are some doctor containers ah all the things that you need already so yes those people's had to use those since you need the whole prongs you open you need the X which is basically the graphic environment what you will do a separate beautifully beautiful eggs that's it any more questions about separate check yeah Cyprus I mean Cyprus is fine for me we had some problems in the beginning because this in those too many things in it opens too many things i it has screenshots videos all the stuff you have talking about Cyprus right yeah how do you feel about 2008 right every single one okay well that's more like Java spree stuff and you can always do promise all you can always do the dang thing yeah Evan there's no like JavaScript poem but did you manage to work to dirac-delta tear or something similar of Cyprus right because I what you have to do is to load the yeah it's not possible because I mean I try and I allow you to eject yeah you cannot love custom extensions and but you can stop someone who make it work but then it's not staying there a long time so at the end I I think it doesn't work but I was discouraged maybe I haven't actually tried because in the beginning we were like thinking our Cyprus but when I saw the puppet the heart all the things that I needed it was like if he doesn't allow you to open on a specific directory to allow flag in a minimal suspension I don't see how you can does it happen and yeah I mean I just wondering yeah actually I think that is because even if the popliteal the back with your ABI is not good enough for you for your needs you can always change the pace and you have two pages based where you're testing and the meta masters page it is not just the thing that the Box you are you have also the page you can always change the base from this one so they were number one I knew everything I [Music] to trans and user author like using another mobile wallet through was act signed transactions or using contract accounts doing something yeah so what would either like what salt depends when you will need balance if you are using a wallet connect that will be complicated I guess you need to test in the form but if you don't have any of those things on you laughs if you have that come inside there and you need a defense you know if you can also intercept you can read you can get all the requests not from one text and any other people so for instance you could try to intercept that request that was working right now and prevention I hope these mocking at the response yeah [Applause] you