 But to be sure that we're going to find something, it's going to work, and not just the call that you have done, I've done every single component, but the actual flow of the user are going to feel at the end of the day. My name is Carlos Gontalic, I'm the CTO at Gesser. We do traditional markets and user interface for all of you. Do you want us to get out? That's us. So, what are we going to use today? So, I made a simple app where you can buy a ticket for the bank debt con. It's easy, you just click the button, you'll get it. You don't have to wait or do anything like that. So, it's just a simple demonstration. There it is. You just have to type an email, and you know, make a mask, simple stuff. If you want to take a call at any moment, or at your home, or whatever, it's quite easy to call. I'm just going to spell it a little bit. Anyway, you have it here, you have the different branches for every traditional market. So, you can take it out there. Probably most of you are developers or are working on a product. And many, many, many startups, when the Friday comes, I like this, like should I deploy? Should I not? We can, it's going to be tough if I deploy. I don't know if it's going to work or not should I deploy, should I wait? And it's a stressful, it's not just about the product itself, it's also about, you don't really know if it's going to work, you feel the pain. You don't want to feel that. So, this is where the test comes. Until then, you have CIS and CDs, producing, programming, and deployment. Because when the users start to touch the computer, it explodes. And you don't want that. So, CIS, what they do, basically is they get the test that you have programmed, they will run the test, and then the continuous deployment will deploy somewhere. I'm going to talk today exactly about that, about the previous part, about the test before that. So, just a simple example, just to get the things on the ground. Unit testing, when you have to, when you want to test every single one of those components that you have done, will react with the, I don't know what component, but if you are working more like in the low level, solidity or whatever, that will be one component, that's one of those contracts. Integration is when you have different of those components of different parts of the code, and you want to test them together, you just set parameters between each one of them, and compare them at the end, because they work together. And then you have end-to-end testing. It's not that the tests were with each other, because you have done that already, you made integration testing. The user is more about the whole process. It's more like the behavior of the user, for example. If they want to buy a ticket as we want to do, you have to test the whole process from the beginning to the end, from the end to the end. And that's normally where things get a little bit messy. So, properties that we can find, and even more in centralized applications, and we'll talk about them a little more later, they take some time, because it's not just the component, the code that you have to test. You have to test the network, the connection between the components. If it's with blocks, the thing that you want to test, you might have to make a transaction. Normally, you would do that in local, in the match, or whatever. But, if you want to test it more like in a test net, for example, in Renkivi, it will take some time. I don't recommend that. I would recommend to do it in local, in local, whatever. You cannot be more in the group of failure, because, when you do end to end, you are testing functions specifically, but when you, sorry, when you test unique, like, unique testing, you test the functions, and specific 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 in your app. So, you don't really know where the failure can come. For example, you can have problems in the database, even though you are testing the HTML, you can have problems in the server, you can have problems, of course, in HTML, CSS. There are many things that can't fail, and probably will. So, you cannot know exactly where's the failure. Even though you can get close, and you, as a developer, probably know more or less where the thing goes, but you don't really know exactly where that thing is. One of the good things, as we said, is that it goes into the user's behavior. So, when you test something like a function, or specifically 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, you're not really using the app as they are going to use it. And that's one of the, and that's, for me, a key point of interest and density. One of the things is that they are fake, and normally it sounds like they shouldn't. I've seen many people talking about them. Well, they're a bit fake. And if you go to the talks, they do a lot of talk about tier, and we'll talk about that later. In the Google Developer talks, they also say that, right? It's a bit fake. Many things can fail, the wheel, it's low. There are some tricks, and we'll talk about them, but yeah, sometimes if you don't do the programming quite specific to the things that you want, they can fail. So, yeah, they have some bad parts, but they have many good things. As a recommendation, probably most of you know about this, but it's a rule, 17, 20, 10, and it's basically that you probably should do 70% of unit testing, 20% of integration testing, and then 10% for elsewhere. That should be like, this rule applies as well to the centralized applications. There is no, well, probably even more, since you are, well, that's not your problem, but if you are doing the protocol, you need a lot of unit testing. And also you need to have a normal integration, so I recommend following this rule. So, this is the beginning. Pappeteer. This is, here's an old library that grabs the API of Chrome and allows you to control Chrome in a programmatically way. And it's super cool. It's developed by the Google Chrome team, well, Chrome team, actually, and like, recently like two months, three months ago or something like that, they released a beta for controlling also Firefox. We're not going to get into Firefox today because since we want to control the centralized applications, we need a specific extension like MetaMask, and therefore, it will be a little bit more complicated. You can definitely store the, the binding in Firefox as well and control it, but you know what we're going to do. So, first we have the, the app that we're going to control today, and this is the second demo. It's going to be super simple at the beginning. We just require Pappeteer, we want to get it, launch a browser, open a new page, then just go to the page that we served with, well, it's written in Google, it doesn't matter. Then we wait for the happy message, which is a message that we wrote. We get the context, text, and we console it. Super simple. I'm going to be doing the demos while I'm talking. I think it's the best way to do that. It's quite easy, quite easy. We can see here, this is the title that we're looking for, and the call was super simple. I actually saw all the code that is here. In this slide, you don't need anything else. I wrote it with node, node, MPM, or anything like that. Just to say this is quite simple code, it's not super complicated. Just start with all this. It's not complicated at all. Just to give you a bit more of a syntax in the beginning, so we are in the same position. Dollar evil, due to get a query selector of HTML, so you just get an ID of HTML tag, or you can also get a name, or whatever you need, and then you can do something with that. If you have an array of those IDs, you have to disable it and you will get an array of them and you can modify them if you need, because inside of this function, and you will see later, you have to pass the place error 31 and then a function, which will do the thing that you want. As I said before, they are sometimes a bit flaky, so, for example, the browsers are not that fast as normal code. They need some time to make requests to process the data. So there are some things that you have to do in order to wait for those things to happen. The first of all, would be wait for, and then the second, the music that you want. I don't recommend using this one, because the browsers sometimes are slower than others, and some requests take some time, some others take less time, also depends on the resources of your computer. 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 just or whatever to wait for a specific idea of it. This is the one that you recommend to use. And you can also wait for a request, request to be done, you can continue the testing. Just grab whatever you are doing with Puppeteer. Because Puppeteer is not testing. Puppeteer is a set before, it's a null library that allows you to open a browser and control it with APIs. So if you want to test, then you have to come back to the basics. If you don't know this is just, it's a normal library that you used to test with Java 2, but you can use more of Gukumbari for Python, but there are some others. You can use a testing library or a unit testing library that you want. It will work nicely with Puppeteer and they are constantly trying to manage this also. You won't have a problem there. Here's another one. What we are going to do here is to just integrate the test. What we did before was just getting the message that was in the title and matching with one more we know is the one that we expect. This is the before all the demos are on the GitHub and you just have to go to the browser in this case it's the demo 3. As you can see here we have the test, we get the message, but as you saw here we are not selling the browser we are not ordering anything. That's what we are going to fix in the next demo. But as you saw you don't really need the whole browser for this, once we get into the synthesizer you will need to open the whole browser and not have some computation. So some stuff that you might want to know about puppeteer. I'm going to be very fast about this but you can ask me later. You can control the page speed so unless this page loads in less than two seconds don't commit this or you can do testing about the page speed it's super awesome. Or change the usage assets that you have with your page for example you are not able to test you can test that. Once I get you can type in forms, scrap text, get access to the console through the networks so you can see your page works in places where the internet is not very good. You can record some videos or whatever you need. Drag and drop, and test that the drag and drop works which you cannot do otherwise. So if you are loading two months data or two months CSS or JavaScript or whatever you can test that as well you can intercept the request and change the data for all the inputs so you can have always the same page and test some stuff there. This is quite important because when you want some pages to be quite always the same and not move them because I know whatever you can make an image of the page half a snapshot of the one that you want which was the previous that you had and compare them pixel by pixel and you can consider that the CSS is the same that the page is the same. That's quite cool. If you can download the SEO service workers you can test them, that's more complicated but you can do that offline JavaScript key memory usage of my rendering and reduce CSS. That's some of the cool stuff that you can do but there are moments. And to show you how simple it is to do that you just have to start CSS coverage we'll start checking all the data of CSS and when you stop you hear that it will return you an object with all the data that gives you all the CSS coverage for example how much are you using and how much are you not using and you can do whatever you need with that. Same with JavaScript. Another cool thing that you can do is if you are always doing those tests and you are doing all of them you can intercept the request of analysis and stop and stop messing with your analytics which is at the end of the day but you need to see if it's working or not and you probably don't want to mess with it. You can stop the request and if it's not analysis you can continue with the request more stuff. If you want to test them while easy service workers this is very important if you want to get into this but it won't work slightly with the central applications because you won't be able to access the libraries. But if you are not going to use metamask for example I really recommend using the browser context. It's super fast it's awesome. So this is another demo. It's super fast with this one. It's just what we saw before it has some inputs, it just types and you will see. The first one I think you want you don't see it because it's closed because I'm saying two puppets here to be headless so you don't see it but I want to change that so here I have commented it's just this line when you say headless falls it will open the whole browser for you this takes a little bit more time and that's it for this test. I will go into more the thing what we did that wasn't before it was just specifically allowing it to type in the email box but the rest is easy it's the same that we did before these are the type of people that you have type, either press, click type I recommend using wayselector 4 before doing that so you actually that you want to type into there's one more thing I don't know something that we all need right and for that I recommend a lot well there are more ways but I recommend them it's just using the the cinzland library for that I will show it the important thing here to install is super simple but it can render when we are doing stuff so it's just basically a library that gets the mirror mask code and injects it into specifically the top of two waiting quotes to get the blindings so to use it and we will see an example now it's super simple you just nvm install it here then you import the library you open a new browser with it well you have to also import the library and then we you have to open metamask or install metamask and you put the scene that you want or create a new one you can then switch to the network that you want for example brinkini then you have the typical things like metamask approve and it will approve the transaction but you have the confirmed transaction which is the same for rea whatever you need and then you start the team in case you are wondering the api is not for me but you just kind of match metamask but if you want to do something specific and you don't have it in the api you can always you will say now you can always go to the base of the apitir that metamask opens and controls 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 little more of time so we are in the metamask demo hopefully this will work it just needs some time do you just type the whole thing probably in the network like themas that's already yeah the network is important here as well it works it needs internet to verify all the stuff but I think I can do it if it's just the time I'm going to try one I'm going to try one I'm going to try one more for where are you trying anything else generally it's I will show the code so what we do here is launch the apitir with apitir we inject the cn1 twist it to the network open a new page wait for it to load once it's done just start doing whatever you need the first thing that you have to do is approve metamask it's a big deal once you click the button to and I saw before at the beginning of the talk once you click the button it will pop up a metamask and you will have to confirm the transaction and that's what it does instead of wait for what you do is wait for identification and I need to come up but this is quite simple and probably this is what is taken right now it just needs more time and then a ticket bought successfully will appear once you confirm the transaction that's it once you turn off an alarm that always helps the last try just a quick question is that tool pretty actively maintained like if there's a breaking change in metamask well it's open source so you can always have I'm always taking the diary in case there is something it's not maintained by me probably by the cn1 team and but it more or less works yeah and whenever there's a failure they normally try to do that right because I don't want to do that but yeah you can definitely do that and I recommend you to do that I was gonna say oh yeah but yeah you have to do better if you want to do that is yeah in the metamask settings when you open it you just change it for closing out if you can test on firefox I mean because the this tool is called chrome yeah but what you have to do then is you have to do the same that the library does for you in chrome you have to do it in firefox and that's basically putting the metamask extension for firefox in a specific directory of the firefox is waiting for it is where the code when you open the browser there is a directory where the values or atoms are and what you have to do is to get the code and then tell it to load it and where it is but then let's try one small last one and one more thing if you want to use this on ci like you call ci or whatever well yeah it did the whole thing so it's actually on board and everything so yeah it was on it same I was saying if you are testing it on if you want to use it on a single ci for example what you have to do is to install the x virtual frame memory the good thing is there are some doctor containers that have all the things that you need already so you just tell the typical ci to use those since you need the whole chrome to open you need the x which is basically the graphic environment what you will do is a virtual x to open so that's it any more questions? yeah what about cypress? yeah cypress cypress is fine for me we had some problems in the beginning because it's in those too many things it opens too many things like it does screenshots, videos, all the stuff you are talking about cypress right? yeah how do you feel about writing a wait like on every single line? well there's more like javascript stuff and you can always do promise all you can always do the then then yeah there's more like javascript problem but did you manage to or to run dapeteer or something similar with cypress? I haven't like tried because I'm happy with it but what you have to do is to load the yeah it's not possible with cypress I mean I tried it doesn't allow you to inject? yeah you cannot load custom extensions but you can somehow make it work but then it's not stable in there long term so in the end I think it doesn't work but I was just curious maybe you did yeah I haven't actually tried because in the beginning we were thinking about cypress but when I saw the property hard all the things that I needed was like but if it doesn't allow you to open a specific directory to load the plugin a metamask extension I don't see how you can do it what about the team from your experience say the solution is stable does it have any cases where you have a known error for example? I haven't actually found any but probably so you would say it's a reliable solution yeah I mean I'm just wondering I think that is because even if the dapeteer API is not good enough for you for your needs you can always change the page you have two pages where you are testing and the metamask page which is not just the thing that compups you have you have also the page you can always change the page from this one to the metamask one and move everything like fake clicking and therefore you can change the unit two trends in user auth are like using another mobile wallet through wallet connect to sign transactions or using contract to accounts and then doing something to open the app so what would be there what would the application be for wallet it depends I mean you won't need metamask right if you are using wallet connect that would be complicated because you need to test in the phone but probably what you can do there it's I really recommend it for wallet connect you can probably open a new type of this test it's just okay I need another then you can change the page if you don't have any of those things and you have the app absolutely okay okay okay if you have the account inside the app then you don't need anything else do you know if you can also intercept the requests from the metamask you can you can get all the requests not from one bank also it's pretty cool so for instance you could try to intercept that request that was flocking right now just mocking that response and then hook it up to metamask