Introduction to Cypress testing - Cypress Tutorial

Welcome to the first video in this series on using Cypress in your web applications. Throughout this series, we'll have individual videos that show you how to use Cypress's Testing Suite to make sure that you provide your users with the high quality web applications that they have come to expect. In doing so, we'll be partnering with LambdaTest. LambdaTest is a cloud platform that lets you run both your manual and automated tests on your websites and web apps across a variety of different browsers and operating systems. So rather than running your tests locally or relying on another series of servers, LambdaTest provides you with their cloud platform to utilize their resources to run your tests and show you a really cool dashboard of how your tests are performing, if there are any flaky tests, if things are passing, if things are failing, what things need to be tightened up and those sorts of things. So throughout this series, we'll be focusing on how to use Cypress specifically, and toward the end, we'll show you how to integrate Cypress with LambdaTest and quality cloud platform. So getting started. My name is Chris. I'm a front-end engineer based out of Austin, Texas. I use Cypress in my day job and I love it. It has made the testing process so much more smooth and enjoyable. So in this video, we're going to make sure that you've got everything that you need to get set up with Cypress in your application. Going from the basic system requirements to actually installing Cypress and running through the test runner for the very first time. So the goals for this video are to understand the benefits of Cypress and LambdaTest To install Cypress in a project, to use the terminal-based test runner and the browser-based test runner. So first off, what is Cypress? Throughout this video and through this series, we'll learn that Cypress is a JavaScript-based test automation framework. So you can write all of your tests in JavaScript and it'll automate your tests for you. A lot of the syntax of Cypress should already be familiar. It's easy to read so that when you read a test that's written in Cypress, it almost looks like English. The LambdaTest Cypress CLI or command line interface allows you to run cross-browser tests with Cypress while using the LambdaTest cloud platform. Now, of course, throughout this series, we'll give more information, but feel free to jump over to the blog or community sections on LambdaTest website for more information. So first, making sure that we've got everything to set up and install Cypress. You're going to want to make sure that if you're using Mac, you've got 10.9 and above. A couple of different options for Linux. Linux also requires a few extra dependencies, which can be found on the "Getting Started" page of Cypress documentation. If you're on Windows, just making sure it's Windows 7 or above, and then you'll need to make sure that you've got Node installed on your machine as well. And Cypress requires node version 12 or above. So a couple of other resources for you at docs.cypress.io, you can find all of the quality documentation that Cypress offers, from a Getting Started guide to some more advanced tips and tricks. At nodejs.org, you can find the latest version of Node and download that if you don't yet have it. And then feel free to use the code editor of your choice. I'll be using VS code as it provides some friendly options and it's easy for me to use, but you can use whatever you like. So jumping in. The only step you've missed at this point is cloning down a repo called the cypress-example-kitchensink. The link is here. We'll provide it in the description. So the only thing you'll need to do is find a folder that you want to store this project. And you'll run git clone and then paste in the URL that you see in the description. From there, you'll now have a copy of this project. It's going to include a couple of extra things that I have removed so that I can show you how to get everything set up, but your next step would be to run npm install, or simply run yarn to install all of the dependencies that have been bundled in with this project. From there, we're going to install Cypress. So run npm install Cypress or yarn add Cypress. Either option is fine depending on your setup. Now that that's finished installing, we can take a deeper look into the package.json file. Here, the Kitchen Sink application comes bundled with a number of scripts, many of which have to do with specific Cypress commands. You'll also want to make sure that your dependencies array includes Cypress. It might be included already in your dev dependencies object here, just making sure that it has successfully installed. Now, I mentioned that I removed a couple of files and folders from this project. You might notice something down in this area called cypress .json, which will automatically be generated the first time that we run the browser-based test runner. And then you may also notice a directory up here called Cypress that will also be automatically generated for us when we run the Cypress open command. So I'm going to clear out my terminal. Now, if you're on your own project and you're not using this Kitchen Sink, that's totally fine. These steps are still applicable starting with the npm install Cypress step. So the first thing that we're going to do is run this cy open command, which is going to run Cypress open. And this will take us -- well, to do a couple of things. Number 1, they'll generate that cypress.json file. Number 2, it'll generate the Cypress folder with our series of tests, as well as some other custom commands and configurations that we'll get into in later videos. And then it will open the browser-based test runner for us, which we'll get into in a second. So from here, I'm going to run npm run cy: open. Now, you may have noticed that could have taken a little bit more time than you'd expect. If this is your first time running Cypress locally, it might take a little bit more time since it's generating a couple of extra files for us and opening up this little window. So here, you can see our series of integration tests. You'll also notice that this Cypress folder has been generated for us. Inside of here, the key directory that we're looking for is integration which has a series of subdirectories getting started and advanced examples. All of these files ending in .spec.JS are our tests that have been automatically generated as examples by Cypress. So you can see this described statement. Before each of the tests, we're going to visit this URL. And then you describe each of the individual tests in the Suite and do a couple of things which we will get to how to write in the next couple of videos. So if we take a look at this Window that popped up, we can actually run our first test. So if we click on "to do.spec.js," it's going to open up a browser for us. You can see it's opening Chrome 91 here. And there is our Chrome window opening up. So notice all of this is happening automatically. You can see little flashes of our application on the right side. And in just over 11 seconds, six tests have run and have passed. So what's happening here is we write our tests in Cypress with the Cypress open command. We actually open up our application and then we click through it, just in the same way that a real-world user would do. These series of statements will correspond with the it statements. So it displays two to-do items by default. And then you can see, before each command that was written for us, it says to visit the URL here and then this is our test body. So this kind of gives us a little breakdown of what was written and what happens in our test. So we can see we're looking for this to-do list list item we expected to have a length of two which it does. We wanted to grab our first list item. We expected it to have text to pay electric bill, which you can see on the right-hand side, it does. And as I'm hovering over these things, you can see where in the -- where the UI is in the test. So as the test progresses, the UI will change as if a user was actually interacting with this, which is pretty, pretty cool. So that was a brief overview of the browser-based test suite and we'll get way more in-depth and show you how to actually write these tests. But this is just a high-level overview showing you the power and the functionality of Cypress's browser-based test runner. In addition to that, we close this out. So you can see right here our cypress.json file was generated. Now it's just an empty object for now. You can add more configuration which we will do in future videos. But now that this file has been generated for us, we can actually run a different test runner with this cy: run command. So Cypress open was the one that would open up a browser. Cypress run is actually going to run it in the terminal for us. So we can do npm run cy: run. And after a few seconds, we can see that it's getting started. We're running our Getting Started folder, the to-do spec, and it just runs it in the terminal. I'll try and expand this for us. You go. And then we're getting our nice green check marks showing us that our tests are passing. And this is actually going to run through all of the tests for us in our terminal. So this, getting started, is spec run. You can see that this video is being generated for us. And what that'll do is it'll actually make an MP4 for us. And it shows you the path to that file. So if you wanted to say that you had a failing test and you wanted to watch what was happening in the browser, similar to what we did with Cypress open or the cy: open command, you could actually go back and watch the recording of that video to see the robot user clicking around your site, and you could see specifically what went wrong. Oftentimes, when I'm writing tests, I'll misspell something. I'll have a typo or something here and there, or sometimes the test will run and it does what it's supposed to do. It lets me know that something broke. By watching those videos, sometimes it's more helpful to see what interaction was happening, where the test failed, and how to fix it. So now you can see as well we're running these two advanced examples, actions.spec. So now you can see we're running these two advanced examples, actions.specs. So we're getting into this second folder of our integration tests. And at the end of each spec file, it'll give you this breakdown of how many tests there were, how many were passing and failing, et cetera, how long it took, and that it'll make that nice video for you. From here, I'm going to go ahead and pause the video and let the test runner run through the remainder of the tests, and then we'll pick back up once those are all finished. Now that that's all finished running, we can see this nice table with a summary of all of the test files that we ran, the number of tests, how many were passing and failing. So some really good insights into all of our tests and how successful they were. So this was just a high-level overview of Cypress getting us set up, running through the test runner, making sure that everything works. From here, we'll move forward into writing our own tests and some more advanced tips and tricks along the way. And, again, finishing up with how to utilize the LambdaTest cloud platform to run your tests and get some really insightful data.