 All right, let's do this Cool, right automated testing made easy with Cypress IO All right, let's start With me. This is me. I'm Sam. This is me This is how I look on a holiday. That was last week in Portugal time of my life needed some sun You can always follow me on these whoa You can always follow me on these links I'm not a very social person on social media, but you can always try to contact me if you like I work for smart passion pension and we are hiring Much better conditions than Right, what is Cypress First thing I thought when I heard of it Cypress Hill right can't go wrong there or is it an island somewhere in Washington? Yes, there is an island in Washington called Cypress, and it's not the Greek like island no What is Cypress? Cypress IO These slides are going way fast and I cool Cypress is it Is a testing tool entirely written in JavaScript? Which helps developers with automated tests for the web It's often compared to Selenium, which is very very different I have worked with automated testing tools before with a cucumber test suite written in ruby with the Selenium web driver And I had a whole bunch of problems with this before him in the past I'm pretty sure that you guys that most of you people already heard of of Selenium and most of you probably have worked with it as well There were always a whole bunch of problems setting it up is hard Ready or test is slow the test suite doesn't have a knowledge of states just to recap Just to recap Testing is just too hard now Many people have had the same problems I have many people have had these issues and so did Brian Mann This is Brian Mann just to make sure this is Brian Mann He took it upon himself to fix this problem Because he he had most of these problems that many other developers had So he actually went to the community and he asked the question to the community of developers What are the biggest testing challenges you want to have solved and He actually sent it out into the world and he got a lot of replies It must be easy to use Tooling that is fast Testing across browser is painful and so on and so on and so on right now thousands and thousands of messages came back and This is obviously a massive problem to solve. You cannot just solve it overnight The first problem that we see here is Selenium Selenium is a tool which was was first released in 2004. So it's quite an old tool It has been going through some optimizations over the years and eventually turned out into web driver Now we have this tool yet still a lot of people struggle with this so the first thing that we need to think about is Web evolution the web is change evolving all the time old web applications were stateless We had full page reloads Now in the old days that was fine That was that was okay The second thing is it used to be all synchronous The old applications in all days that was fine and everything used to be synchronous and for these applications Selenium was fine now Nowadays the applications use most asynchronous code almost everything now is asynchronous and our browser keeps a whole bunch of states and the fact remains is that well first of all for state a stateless code and Synchronous code Selenium is absolutely fine. You can you can use Selenium without any problems now Selenium is a is a stateless HTTP API So that means once we are using states. We are just lost and This is basically impossible to test a state is Stateful application with a stateless machine. You cannot you cannot do that. There are many hacks and you can try to solve it But it's basically kind of unfixable Now another problem is speed Selenium is slow No comments. That's just a fact. That's a given fact and then my favorite of all Debugging I was completely stunned now just so everybody's aware. I am not a q-air I have some experience with Selenium, but I was never really involved So I didn't really go through all of these pains that much, but I heard them all around me now This is quite amazing. This was for me the top. So the Chrome is going to be automated by the Chrome driver now The Chrome driver uses the same debugger uses the debugger protocol Now your dev tools use the same debugger protocol So the debugger HTTP protocol. So that means if you run your tests in Selenium, you cannot have your Dev tools open. I mean, how can you write your tests run your tests and Figure out where things go wrong if you cannot have the debugger open. That just blew my mind We will get there right Solving all these problems is not an easy task, but Brian Mann took it upon himself to leave Selenium aside and build a fully new thing from the ground up and He wanted this to be to be able to work with the modern application So for two and a half years He has been working really really hard and then after two and a half years He just that he just did what he wanted to do He created Cyprus IO Right. This was the whole speech talk. I am pretty sure that everybody wants to see what it is rather than know the history So let's have a quick look. Let's see if this works Of course, that's not gonna work. Okay, cool. So we just go into your application You just yarn at Cyprus to your dev or you can use MPM install And this will install the software for you If you look in the folder structure, it only adds your node modules package adjacent and your own the yarn.loc file Just simple application now Now we have this application we can run the yarn yarn has a special command to run now. I'm a lazy developer So I mimicked the command. Anyway, I think I have to go play here When you run the application When you run yarn, which is in your node modules bin Cyprus open It will actually take control of your computer and open some kind of software and as you can see it has a whole bunch of files in there Now when I opened it, it actually created a whole bunch of files for me So now if I go to look at look again in the directory Now I can see there is a Cyprus folder with fixtures integration plug-in support and a whole bunch of tests When I opened at the initial time now when I was making this presentation I had to do it a few times to record the video and this only pops up once So I had to do it on a different machine to get the thing But it actually tells you it's gonna create a whole bunch of stuff for you when you click Okay, it just generates those files. That's it. It's actually pretty interesting because what it actually is The integration test the example is actions aliasing Assertions all this kind of stuff and I was wondering what it actually is. So basically it helps you to to get started That was too fast Okay, let's try this again Cool structure Better cool. So the default test in action when you run the default tests. It's actually running tests on the Cyprus IO website and just Asserting a whole bunch of functionality on that actual website and I'll give you a quick example of this So I just aliased the open command There is opening the UI and if you click on one of the tests I click on the actions test It will run will open a browser and will actually run the test for you so these tests are actually gonna go to The actions to the actual URL and God is gonna do a whole bunch of assertion for you It's actually going through the actual live website from Cyprus Which is pretty amazing Cool. So this was my first Experience with Cyprus now. I'm gonna do a quick sales speech Not really a sales speech but on the Cyprus IO website. There was a really cool video That I just want to show you what the capacity capacity of Cyprus can actually do now Also, I do not get paid at all for this speech I just think it's an amazing tool and I just want other people to know about this tool. So Let's have a look This is the actual website And I hope we can get some sound Cyprus is an open-source test runner built for the modern web It makes setup writing running and recording tests much simpler easier and faster than ever before Whether you're testing the various login states of your application Or complex drag-and-drop operations that you've seen on web apps and Trello boards You can easily wait for dynamic content to load Or make sure things look good on mobile responsive views With Cyprus you have much more control over your application and can write tests in a way that was not possible for today You can programmatically control UI widgets like tree views and multi-selects As well as waiting for the results of an autocomplete to finish You can even step out network requests to control how the responses are returned This means you can easily test edge cases such as when no results are returned or test What happens if your server is down? As you write commands Cyprus executes them in real time providing you with visual feedback as they run Commands are interactive. So as we hover over them Cyprus time travels back to the application state when this command ran When clicking on a command we receive helpful debugging output to our console and based on the type of command And oftentimes interact with them There's so much more that Cyprus can do so we hope that you'll check out our docs and getting started videos We'll explain how to install Write your first tests and go into much more detail about how Cyprus is different from any other testing tool You've ever seen before Right, so that was a sales speech. I just think it's an amazing tool now That was my impression is it but now the question is Is it really that awesome? Yeah, I went too fast, but Yes, it is It is actually amazing when I first saw this This software popping up I actually sneaked it into our code base without anybody knowing and made it available to a few people Now we have a new Engineering manager who is a bit annoyed that this got into the code base because people like it a lot and people are like Oh, can we please use it? Can we use it? Obviously, we have this massive repository and we do automatic deployment So that also means once we run our tests or once you add test to your repository, you're potentially doing deployment now With Cyprus, that's not not needed. So what I did this week literally this week I created a new repository moved all the tests to a different repository and anybody can write tests wherever they want because this Is not inside your application it can be but it doesn't have to be now What I like the most about Cyprus is that it's completely written in JavaScript. I don't have to learn a new language I know JavaScript already plus it's it's very self-explanatory and it's using tools that we already know so Cyprus bundles the popular Chai assertions as You can see here. So we have BDD assertions Expect name not to to not equal Jane very simple We have TDD assertion assert is okay. Everything. Everything is okay There are the there is the Chai jQuery plugin which comes by default and We have the Synon Chai as well on top of that Chai allows you to to customize it. So you can write your own testing ways Inside there it's just extremely easy Right, so I have In a previous talk created a static page was a static blog And obviously it's a number meet-up. So I wanted to at least have something about ember to talk to so what I've done is I have taken that that PR and I actually integrated my Cyprus and I created some tests and I'm just just want to show you these tests running and just quick explanation what we are doing there So this is my ember static site I'm just gonna run Ember So in this case, I need to start my server because I'm gonna test them on my local host Which is absolutely fine. You could potentially swap it out for a real URL as you saw in the video It will just load it from there In the meantime, I'm gonna open Cyprus My laptop is running on full power because of recording. I think right. So here we go. We have the ember static site And I created a happy path spec. This will open my browser We'll visit my URL and I will do a whole bunch of assertions on my static blog Yeah, so the streaming is a bit slow I think But basically what it's doing is it's clicking on certain buttons asserting if all the elements in the page have to be are there If not, it will give us an error and this is the last one that contact me it will fill in the form This is by the way, not my real telephone number There are also a few I mean this tool is amazing. This tool is so big you can do so many things with it You can have a slope slow typing you can do a copy paste you can speed it up as much as you want You can have the real behavior So you can test your debouncers all of this kind of stuff is there as well So what I like the most about this software is what you guys did not see in the beginning So it's still running for the last test Cannot show snapshot while running test So what you can do is you can go back in time at this point and it takes snapshots of everything it done You can see Where what happened and you can open your debugger you can open your console You can see everything what what's happening there My computer I think is frying up. So this is normally going much faster and better any questions. Yeah Yes, so you can restart a test on just here, sorry here So the page will fail because I did not implement a callback for my form So I just want to show you as well if the test fail It will tell you exactly where it filled and how it failed The reload works there This is also connected up with live reload so if I am writing my test if I change anything in my test file It will automatically reload to the test suite as well. You can run tests a step by step now the most amazing part is that you can actually go back and see what it's doing and What you probably have not noticed is at some point. I tested the responsiveness of this thing So I visit the URL and I change the viewport and I do a whole bunch of assertions on that viewport I'm basically looking for the menu bar here So This tool is is so big. It's fast. It's easy to use it runs almost every machine It has its own built-in CLI it has its own hosting service and Most of all best of all is completely free. It's open source So if you want to download this and write all your tests yourself you can run it Locally you can run on your own server. You can run it basically on any CI or you can use the CI from From Cypress themselves they host it for you They have a whole platform you can run tests there and that's where the pricing comes in So you you can pay for it if you're if you're really interested and you really want to host this Completely following their rules. You can do that. Otherwise, you can just run it locally Right going back Cool. So if you want to see some resources, I stole most of this talk from a video I saw on YouTube. I'm not gonna lie about that But hey at least now you guys know about it. So yeah, do check this out I'm not saying that selenium is the worst thing in the world, but do have a lookout for this software so thank you very much and We are still hiring