Cypress Framework for End to End UI Testing | Learning District | Skillshare

Cypress Framework for End to End UI Testing

Learning District, Invest in yourself

Cypress Framework for End to End UI Testing

Learning District, Invest in yourself

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
34 Lessons (3h 21m)
    • 1. Course outline

    • 2. Introduction to Cypress

    • 3. Simple UI app

    • 4. Initializing the project

    • 5. Create the backend portion of our app

    • 6. Create the front end portion of our app

    • 7. Front end part 2

    • 8. Front end part 3

    • 9. Adding to our backend

    • 10. Testing our application functionality end to end

    • 11. Quick recap and source code up to this point

    • 12. Installing cypress framework

    • 13. Creating our first test file

    • 14. Writing and running our first UI test

    • 15. Best Practices for locating DOM elements on the UI

    • 16. DOM Operations and Assertions

    • 17. Tests and Assertions Part 2

    • 18. Tests and Assertions Part 3

    • 19. Tests and Assertions Part 4

    • 20. Test setup and Teardown

    • 21. Running a Singal Test File using Cypress Commands

    • 22. Running Multiple Tests Files

    • 23. Delays, Waits, and Sleeps

    • 24. Videos and Screenshots

    • 25. Commonly used DOM operations

    • 26. Clearing input fields

    • 27. Double click action

    • 28. Checking and un-checking checkbox elements

    • 29. Radio button selection

    • 30. Dropdown menu selection

    • 31. Uploading files and attachments

    • 32. Elements with no IDs or Classes

    • 33. Limitations and Tradeoffs

    • 34. Recap of the Course

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

This course will teach you how to install and get started with the Cypress framework. Cypress is a very powerful framework for writing end to end tests for your applications. Getting up and running with Cypress is fast and very easy. We will cover cypress and how you can write end to end UI tests to help test your application and catch any defects as result of new code or changes to existing code.

As part of the class project, we will start by building a simple UI application that we will later use to write our UI tests against. we will then install cypress and start to write our tests and assertions and then we will take a look at how we would go about running those tests for different use cases

  1. Course Outline

    This section will go over the course outline and describe what we will cover in this course

  2. Introduction to Cypress

    Introduction to Cypress and why we might want to use it and embed it into our project

  3. Simple UI Application

    This section covers the simple UI app we are going to build. We will then use this app later to write our UI tests using Cypress

  4. Initializing the Project

    This section shows you how to initialize our project and install the dependencies we need to move forward with building our app.

    Please ensure you have the latest version of Node.js (LTS) installed on your computer before you proceed

  5. Create the Backend Portion of our Application

    We will start building the back-end part of our simple application

  6. Create the Front Portion of our Application

    In this section we will begin to build the front-end portion of our application

  7. Front End part 2

    Continuing on with our front end portion of our application, we will be a simple login page form in this lecture.

  8. Front End part 3

    Here, we will build a home page after the user has logged in. we will also build a page where the user is redirected once they logout

  9. Adding to our Back End

    We will modify the backend of our app to return the correct static html file to the front end given a specific request

  10. Testing our App End 2 End

    Now that we have finished building a simple app, we will test it to ensure correct functionality

Meet Your Teacher

Teacher Profile Image

Learning District

Invest in yourself


Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Course outline: Hi, everyone. I like to start by saying thank you and welcome to my course. And this course we're going to cover the Cyprus framework, which is really a framework for ah, front end testing. Ah, and for writing you I test on Antoine test of your application. And I'm my opinion. This is really the next generation, um, testing framework, especially if you're coming from selenium. And I'm sure you guys are gonna I love using Cyprus once you get started. So with that said, let's break down the course outline and go over the sections on We'll start by. Ah, in you know, a basic introduction off Cyprus and what it is and why we want to use it. Then we'll talk about the pre RECs you need in order to continue on with the scores, which is not much. If you have basic programming skills. I think you should be able to to ah go through the course, but no issues, especially if you have ah written you eye tests before we'll start by Ah building. Um a simple application for Are you I testing now? We could really right test for websites that are out there For example, we can just write a test that navigates to google dot com. But a lot of those websites out there they don't have unique ideas for, um, obvious reasons. So we'll just start building a very simple you. I up, um, so that we can actually have controls over the I ds, and they will be very specific to our needs. Then we'll go ahead and ah, set up Cyprus on our local machine, and then we're going to, ah, start writing tests and some assertions and will run our tests and to wrap up, we'll talk about some of the limitations off Cyprus and some of the things you can't do. And then ah, well ah, basically wrap everything up and go over what recovered? 2. Introduction to Cypress: So what is cypress? Cyprus is a complete testing framework for you in front end. It's built for into an testing of your Web Applications, however, is not just limited to you. I test you can use Cyprus as a tool for writing unit tests. Integrations tests such as, ah ap I tests and obviously you eye tests. For the purpose of of this course, we're going to be mainly focusing on your eye tests. Why do we want to use Cyprus first of all and the most one of the most important reasons is that is very easy to install and set up as you guys will seem the next Ah few sections. It works on any framework or websites. So it doesn't matter if your ah front end of your web application is written in angular or react or other frameworks. You can use Cyprus to test it, which is a very powerful concept, and the tests are written in javascript. So, for example, if a devil Looper is actually using, um, like a javascript ah library to actually implement the front end ah of the application, they already know javascript. So, in order to write the tests there's no learning curve. So this actually in turn saves them a lot of time on the because the language and the language the application and the test are written are both the same, and the test run really fast. They're not flaky. Cyprus helps you focus on writing tests. So there are a lot of things that Cyprus handles automatically that developers or Q A engineers who are writing the test don't need to worry about. One of them is a, for example, is waiting so Cyprus automatically waits before checking for elements. Ah, as if if you were in selenium, you would actually have to implement away yourself, and it provides building tools. So, ah, for example, if your tests fail, Cyprus automatically takes screenshots and videos of each step. So when there is a failure and error will let you know, you can just quickly find out that the bug the error by looking at some of those ah, things like such a screenshot or videos that were taken by Cyprus. Normally you would have to set this up. Ah, in your fixture, set up or tear down. Ah, if you're working with ah selenium Web driver one in a different language. So here's a very quick example. Um, of how easy it is to actually get started with cyber. So as you can see here to start with Cyprus, um, you just installed it as a dependency in your ah application or projects. So NPM installed Cyprus that just basically installed Cyprus. And once you have it in Seoul, we can get started right away. So, for example, here, um, by just one line here side that visit and then www dot google dot com This one line just launches the browser and navigates the navigates to google dot com. And here I put two commands which will later a c is Ah, this is how to run open Cyprus and you can actually run it through Ah, gooey they provide for you. Or you can just use Cyprus run to run your tests. So the pre RECs for this course, um to start with Ah, it would be great if you guys have a basic knowledge of html JavaScript, CSS or maybe bootstrap and ah, for the, um simple your application. We mentioned that we're gonna build earlier. We're going to use no Js and Express, which is a backend framework. It's no require that I'm sure you guys can follow along. But they were just a nice to have, Um, but it's not required. Also, it would be great if you guys have prior experience with writing you. I test or familiar with writing you. I test using tools such a selenium Web driver. And ah, just the thing you need to really be aware of is, you know, how do you do those basic dom operations? So, for example, how do you find, ah, element on the dom and how do you select it? Howdy inspected. How do you click it? Things like that. So with that said, Let's get started. 3. Simple UI app: in this chapter, we're going to build a very simple up so that later on we can write your tests against it using Cyprus. Now, um, if you don't follow along or if you're not familiar with notes and express, that's fine. I'm going to check in the code as part of the course, so you can just if you don't want to write the code or if you don't ah, follow along again, just use it and then move on to the next section, which is writing the tests with Cyprus. But if you have any, if you've ever worked with no door, um Express, it's very It's a very, very simple app. And to give you a brief ah, description, what we're gonna do is we're going going to Ah, right, a few. Ah, we're going to use express, which is ah, back in very popular back in framework that is used with no to construct ap I endpoints. We're going to use that to intercept some routes and then serve up static html files to the front end 4. Initializing the project: Okay, so I've created a full there, um, new folder and you can go ahead and create a new folder on your desktop or anywhere you like on your computer to get started with this project. And I've opened the folder in visual studio code. Now, you can use any, um, editor that you would like or anything you're comfortable with. I just really like visual studio code because it's free and it's great for front and development and anything javascript related. It's really great. So if you like to follow along with me, please go ahead and download and install visual studio code. And the way you can open the Fuller ah, in visual studio code is simply by just going to file and open folder. And that opened the folder for you. I already have this open so it's ready to go now. The first thing we want to do is we're gonna initialize our app. And now if down here you don't have a terminal window, you can just simply go here and go a new terminal from the terminal. Many we can just go new terminal and you'll get this Ah, command prompt here and what we want to do is call. Ah, we want to call this command NPM in it. And what this does is it creates initialize is our project with a file called Package that Jason, which is actually going to hold a lot of information about our project, including the dependencies we need, Um, now, when I ah, if I could just enter right now, it's gonna ask me a whole series of questions, but because this is just for ah ah are learned this for learning purposes and for the purpose of this course, I'm just going to say yes to everything. So I don't have to answer any questions. So in order to do that, I'm just going to, ah, Tiger Dash y and hit Enter and they'll escape from asking us all those questions. So now that you can see it created this file here called Package that Jason for us, if you click on it, it holds some information. For example, the name of our application, the version descriptions over example. We can just put, um, writing you. I tests using Cyprus, and it has the scripts here. This script is what will use to run. Um our application or to run things like unit tests, integration tests. Ah, things like that author goes here. License. This is fine as is. So you can see that this well has some, um, useful information. And later on, when we actually add ah, install our dependencies, it also go in this file. So now this is very important here. The main this is ah index dot Js. So this is the main main is the actual entry point into your applications. So we will have to create this, which will actually be our server. So let's go ahead and create that. You can just go here and click on the new file and you can just name it Index Js, and this is the main Ah, are is going to be our main application here. Now we're gonna we want to go ahead and install express so down here and the command prompt again, you can just go ahead and say, um npm install express, and this will actually install and pull all the dependencies required for the express framework which we need for our application. And as you can see, it pulled in all the required by years of modules here in this folder called node modules. Now that we have expressing stole if you quick on this, um, package that Jason, you can see that it's added the section called Dependencies. And this is the express framework me install. Then you can see this is the version. It's the latest version as off to their as the date of this recording. So now if he actually we need to add a command other we have expressing stole, and we're going to use it to build our server. We need to add a command to actually run this once we actually finish writing our server. So in order to do that in the script section here in the file package that Jason What we want to do for this this test common, maybe just leave that alone on and then we just want to go to the end. Atacama come to a new line and, um, type in. Ah, say Dev. And then what we can do is we can actually, um, put the command here. Sorry. With two quotes on DA, the way you would run. This is, um, the index R J s is the main entry point to your applications. So the way you would actually run nor the applications is you would go note index dot Js So this scripts here it will. Whatever you see here is is ah followed Ah, at the end of NPM run. And then these scripts years over example. If you type in the command prompt here and in the ah, in the command prompt down here if you type in MPM run death What that does is actually runs the commands node index dot Js which actually will start our application. 5. Create the backend portion of our app: So now that you have all the dependencies, uh, that we need installed, we can go ahead and start writing our back end server on. We can just simply do that by bringing in, ah, importing express and ah, initializing our application to use express. So let's go ahead and do that. Const Express always require express on our application that will use express Now I have ah , extension called prettier, which actually auto formats called every time I save in case you see things like if the court automatically adds semi colon or turned single code into double courts, that's because I had that that I have that extension installed if you like. You can use any extension that you would like with visual studio cord, and you can do that over here in the extraction stab. But that's beyond the scope of this course, so I won't get into too much detail. I just wanted you guys to know that in case you see things change or reform called gets reformatted that when I hit safe, so now we need to create a port for our server to listen on. So let's say Const Port were just using this for our on our local host. So we'll just do Port 3000. And now we need to tell her app to actually listen on Port 3000 so after lesson, and then we can say port. And then we can just use the arrow function to do a consul log to make tell the users that this APP servers actually started on the specific port. So a console dar log Ah, and then we can say server started on port. There you go. So now, if you want, we can go ahead and actually run this. So bring back the command prompt again on the bottom. I'm just minimizes throughout the course. So there you guys can see more of the court. So if you bring this on and then remember if you guys remember we created this thing here deaf. So every time we run NPM, we could essentially just run note index R J s down here and they'll do the same thing, or you can run npm run deaf. So whichever you like, we can do both. Um so here I can do, um npm, Ron Dev. And that groans no space index dot Js And then you can see the consul log server started on Port 3000. Perfect 6. Create the front end portion of our app: It's no time for us to start building the front and portion of our application eso that later we can use these files to actually serve up to the front end. So what we'll do is, um, imagine you have ah, Web app and when users actually navigate where you are l, um, in the our case will be local host calling 3000. Um, imagine they'll see a log in page where there is a simple ah interface where they have to enter a user name and a passport, or an email and a password. And if their email and password is incorrect when they hid log in button or the sign in button, nothing happens on there just prompted with an air. Ah, if their user name and password or email and password is correct, they'll be redirected. Toe Ah, another page, which is called, for example, Let's call it logged in ah dot html. On that page, there's a simple message that says, Now you're logged in and there's a button called Long Out. And if you quick that log out button and redirect you to another page, let's call that logged out page and ah so with that said, it sounds like we're going any three simple HTML pages. Ah, we can just call them log in, logged in and logged out. And, ah, they're going to be very simple static HTML files. So let's go ahead and build those. The way I like to do that is I like to create a full. They're called, um, public. And inside there I'm going to create Ah, focal. Let's start with um index dot html index or HTML is going to be our log in page where there's Ah, there's gonna be two inputs on a button for users to enter the email and password and then log in. So let's go ahead and create some basic HTML here. So the store with HTML will say language equals English and just like any, um ah, simple html pages. We're gonna need body a head and a body ah, elements years. So let's create those head and then, um, in head, we can have a title and let's call the title log in, and that's good for our head for now. And then we want to create body and we'll put some stuff in there later. Now we ever simple, um, html tags for a simple page here. Now One thing I would like to do is I like to Vegas somewhat decent looking. So I want to bring in Ah, bootstrap. And if you don't know what that is, it's very it's a very great CSS library. So instead of writing all the CSS yourself, what you can do is you can just apply. Um, if you import bootstrap or you bring it into your project and you just apply classes to your elements, such as you know, your dibs or your buttons or your inputs or anything, Um, I'll do it. I'll take care of all the, um ah, styling for you, which is something I really like because it's TECO. It takes away all the complexity and all the court. You have to write for your CSS in order to style elements as you like. So in order to do that, let's just open a browser here and go to Google and search for Bootstrap. And it's the first link here if you quick that and just scroll down here. Ah, you'll see this thing called bootstrap CSS, and it's a CSS on Lee, so Let's just go ahead and grab that link. And now we can pasted in our head. And it just really formatted for me because I hit save, um And now we have CSS Ah, sorry. Bootstrap imported, so we can go ahead and start using it by applying different classes, store elements. 7. Front end part 2: Let's go ahead and create our form, which consists off to, ah, input fields for user to put their user name, password or email password and then Ah, a button for submitting that form. Just gonna close this terminal here so that you guys can see more of the page Ah, on the court. So let's go ahead and start by. I'm just going to create a defers to wrap my, um, former on that. So let's go ahead and create that div. Um and I'd like to just apply some ah classes here. These are all bootstrap classes. So I'm going to do ah Mt. Five. If you know, if you don't know what that is, that's, um, just bootstrap classes. You can look that in bootstrap documentation on there page. But this one just says margin top. So I like I don't like this sign in Ah, Wizard to actually stick to the very top of the page. I'd like to have some spacing, so it's easier for you guys to see that. Now, let's go ahead and create a form here now for our form we need in action. So when you actually submit this for what do you want to happen? Well, in our case, we want to redirect to a different page, so let's just call that slash log in. So let's create an action with that will say slash log in And remember this because later will actually go back to our server and program it so that every time it receives slash law again will return this html page. And, ah, the method for this is going to be posed unless you supply some classes to make this a little bit the nicer. So let's say ah so will center the text. Ah, we'll give it with of 25 so it doesn't go like from all the way to the from the left of the page all the way to the right and ah, we'll give it margin auto here. So I think this would this would just center your ah log in user interface and ah, now we can create our inputs. So, actually, let's just say, um well, doing each one here and say, um, log in and let's give it a class Styler, But, um well, say, um m b three. So that's margin from the bottom. And now Let's go ahead and create our inputs. So we'll start by saying input and this one is gonna be for email. So let's type the type is going to be email groups. The US give it and I d um, now this I'd be here, is going. I'm going to call it input email with Capitally and this is the Actually, this is Ah, bootstrap. This is coming from bootstrap. So if you give it this, I D. It does some of validation for you on the front. And so if the user, for example, for the email, they import something like John Ah, if if they don't have the at say, for example, yahoo dot com, they just put John, it's not going to allow them to submit the form. There's some validation built into this, which is quite nice. So you go ahead and give it that I d. And then ah, well, assign the class. It's assigned some ah bootstrap glasses so it will save form control, and we'll give it some margin from the bottom, and we'll put some Let's put some place holder tax in there and we'll say this is email and we'll make it a required field. That's close that off. And we need another one for passwords. I'll just save this. It reform. That's the code for me. And Ah, create another one. So the type for this one is going to be password. Let's give it Ah, I d input password. And this does the same thing. If you actually put this ah, idea input password. It does some basic validation on the passport site. And, ah, let's give it the same classes here. So, class, um, form control and some margin on the bottom Here, I'll give it and before and we'll call the placeholder password. And now we're Now that we have are two input fields. We can go ahead and create our oops. I forgot to cause the brackets here. Here we go. And now we can go ahead and create our but in here. So for this will just apply some CSS Ah, bootstrap CSS classes. So we'll call the B TN and then be tiene dash LG, which is large button and then be tiene primary, which makes it a blue color and then some positioning. So VT en bloc. I think I have two spaces here and then for the type will put in submit here, and we'll give it a text sign in. So let's close that off on sign in and then we That's pretty much it for our form here. So if you have it close, we have the difficult. We have the body closed and we have the HTML. So let's go ahead and save that on. There you have it. You have a very simple index alleged GMO with to user input fields and one button. 8. Front end part 3: Sorry, guys. I just want to make one small note here. Ah, for index dot html, I forgot to put the, um required for our second input, which was the password for the 1st 1 The MPA type was email, and we put the required. But if we're going to put it for the input Ah, that start off type pass for their second input. So please go ahead and put that in. I already put that in so it's ready to go. And now Ah, save everything and opened this index dot html in a browser like chrome or Firefox and ah, there you have it. It will look something like this or should look something like this. Now, as you can see, it looks pretty decent for them. Honor code rewrote, and it doesn't look too bad. And there to input fields here, email and password and a button. And then now let's not go ahead them input anything. Let's just click sign in. And as you can see, this is really cool, because we it actually does some basic validation. And it says it realizes that this field is empty and it says, please fill out this field. So this is really need because we didn't actually write any quote to do validation. All we did was assign an I D on DA from Bootstrap, and it did. It's doing some basic validation for us. So now this. Go ahead and type something, ran them in on going to hit signing. And then it gives me a different validation. Says Please Intern email address. It kinda detects that I don't have an ad here, so let's just go at some random stuff and then hit signing. So now, every past the email input phase and it realizes or detects that there is nothing in the ah password field. So it's asked us to please fill out this field. So this is pretty cool. Now that we have our log in page, let's go ahead and build the other two pages, which is gonna be law. Ah, this is our signing peso. Our index that HTM also now let's build the page where we actually hit signing and it says you're now logged in. So for that one, let's just call that one, um, log in, go ahead and create a new file called Log in Daud html Ah, the naming isn't really important. Um, you would pick better names, but this is just the course, and it's for learning purposes. So for the main part, we can just let's go ahead and grab everything from index dot html. So just, um, copy everything from in exploration. Amylin log in and pasted in logging because we can just easily remove everything. So for the, um, keep everything in the head for the title. We just wanted to change this to, for example, Say ah, logged in. So this is when they're on this page, we assume they're past the log in page on there now signed in and then for the body. Um, this is gonna be very simple pay. So let's just go ahead and delete everything. That's ah, encapsulated within the body tags. We can quickly create some simple stuff here. So this speech is going to consist of just a simple text that says, Hey, welcome your now logged in on the button that says Log out which, if the user clicks dialogue about and they'll be redirected to the to the third page which we haven't built yet, which is which we're going to call logged out. So this again, like Teoh rap Ah, my form in a deaf. So let me just create a diff here and I'd like to give it Ah, some class here, some bootstrap classes again You can look, Look these up, But just to make things look a little bit decent as we go along. So it's gonna be Jumbotron and also going to give it a container class. So now Ah, let's for like, let's give this attack. So let's put this in The Edgemont so is very big, and we're just going to say Welcome. You are now logged and great. So now we have some text and then let's create a form here for a button. So our form, the ah, it's gonna have the type action. So for this one, if they click the button, we went Or when the former I should say is submitted, we want to redirect to the page called Log Out. So we have long. We have index additional. We have logging. The additional we have log out. So let's go ahead and go slash log out. So when the former submitted its going to be redirected to the log out, the method is going to be post and let's go ahead and create our button and just going to give it some basic bootstrap classes, like with it in index others she ml So let's say B TN which is but in then we'll make this one small. So be TN slash our dash S m and then we'll be tion dash secondary. And this one makes it a dark, grayish color btm block on. We wanna make it. We don't want to go all the way across the pace. It will make the with 25 and give it a little bit of the margin on the top. So we'll make that empty five and let's give it a text here, we can go log out or sign out. That's a sign out on, and I'm going to save this and reform as the court. And there you have it. So now let's go ahead and open this file in the browser. Um and that's what I have. So there you go. You have, ah, simple container. It says, welcome your logged in. So this is our log in that HTML with the body in here, right? now it doesn't do anything. But the goal is that, um when we have our full application running is when we actually come in this page, which is the log in page, and we actually put in our email and password. It's going to redirect us to this page and then when we actually quick on this sign off, but in we actually go to a different page which says, Sign out So let's go ahead and build that. Okay, back to our Ah, I d here. So let's create 1/3 Wild. Let's call this log out dot html and let's go to log in that a shame will grab all this cold and copy it and then paste it into our log out. Our log out is going to be very similar, but very simple again. We want bootstrap in here instead of log. Then we're gonna call this logged out for our title in the head and then body. Um, we don't really need anything here except just attacks to tell us where we are. So let's just keep everything as is, um let's get rid of this form and the button. We don't need that and then here instead off just well this ways simple message saying, um, instead of saying welcome, your now logged in will just say, um, you are now logged out on will keep the jumbotron and container classes here. Let's save. And then let's go back to the browser. I'm just gonna duplicate this tab, um, and change the log in to log out just to see what we see on their ego. So here we have a page that we have, um, you're now logged out. So now we have our three pages and ah, the goal is that when you are actually on the log in page and he hit sign, are there real direct us to the ah, this Patri says you're now long doubt. So now we have our static HTML files. The next step is, ah, to go ahead and actually change the back end to actually serve these files up to the front end. So let's go ahead and do that 9. Adding to our backend: okay, back to our server in ah Index that ah Js. We now want to actually go ahead and serve up these HTML files that we just wrote, and this is very easy to do. So first thing we want to do is on the top here. We wanna There's a built in thing called path here in north that you want to use to actually ah, take away some complexity and figuring out where the files are on our file system on our machine local machine. And we do that by just let's create ah, variable called path. And then we have to go require path so that we can actually go out and use it. And then ah, here we can go ahead and start actually writing some court to intercept the routes and ah, serve of the html falls and, ah, the way you do that, it's very easy, guys. I'm not sure if your family with express this is very simple. If you're not, please follow. Ah, along with me. And I'll try to explain as we go. So first thing you want to do is apt. Don't get So this is where um, we want to say if anybody is actually going to the slash, which is basically by default index dot html We actually want to serve up the ah index dot html file so app dot get is basically like a get call on a p I http gecko So there's actually int intercepts that and decides what to do with that. So for this one, we want to say forward slash So again, this is equivalent to saying when you go to index card HTM Oh, and we have access to these objects, your request and response. And I'm just going to use an arrow function here. And what do we want to do when that ah endpoint is hit? So what we want to do is response has access to this method called send file. So we can use that to actually send in excited html back to the front and a portion of our applications so we can go rest dot sent ah filed with capital left here and we just need to get the directory of with the location of where this file index dot html Fallis sitting on the file system and we can easily do that with the ah module. We just loaded in called Path. So let's go half dot join and weaken. Just there's a built in thing called their name or directory name. You just have to go double underscore. So underscore underscored their name. As you can see here, it's auto completing. So go ahead and select that. And then we're just going to do ah, comma. And then we'll do public because we put them in a folder called Public and then we'll do comma and then the name of the file. So let's go ahead and put index dot html on. That's it. So what this block of court is saying is when there's an AP, I get call with slash or slash index HTML. We want to send this file index dot html that's located in this ah ah directory that we actually constructing it apart to that directory served that up, and that's very easy. So if now we just got to do it two more times for ah logged in and logged out. So if you go to index dot html and if you remember, we actually for this form here. When this form gets submitted, the action is is going to route to this. Ah, ah slash Log in and the method is post. So going back into our index that, um, J s, we just need to copy It's very simple Zip again. Just copy paste this block and this is now no longer get goal. It's a post call, as you saw earlier, this is posed and this is going to be slashed law again. So we're saying every time we redirected to the log in slash log in your l, we want to serve up the log in dot html fall. So we're just gonna change that to log in and we'll have to do that. Let's save that on. Let's do that again. So this is also opposed. So if you go to the log in page and there's a form year, it's his action log out. So when the U. R. L. Is actually hitting slash log out and it's opposed. What we want to do is back to our index dot html. We want to serve up the log out dot html static files, so it's still opposed, as you saw earlier, and we just need to change this to log out. And ah, we want to serve. Log out dot html and that's it, guys, this should take care of all everything we need. 10. Testing our application functionality end to end: this is a good time to go out and actually test this out now with every all the changes we've made. So from the top, go ahead and select a new terminal here. Um, again, you can start your server or ah, your application by the command we made earlier. NPM Ron death. Or you can just simply go node index dot Js Go ahead and it says server start on port 3000 . So now if we go to the browser, let's go ahead. Let's open a new ah top here and go local host um Colin 3000 and we hit this u R l and we navigate without their ego were landed on the log in page. That's exactly what um this block of court is doing when we go to local host. Ah, the default, which is slash or local host call and 3000. It's actually sending the index dot html file, which it was our log in page. Now, if you go back to the browser, let's put in some information here, So let's put in, um, let's say John at, Ah, I don't know, um yahoo dot com past for Let's just type something in, Um doesn't matter if you hit signing Now, you can see that. Just gonna go ahead and get rid of the prompt to save the password. But now you can see that, Actually, it's rerouted us to local host, um, calling 3000 slash log in, which is exactly what this block of court is doing. Because it's saying that every time we hit log in slash, log in in the URL, then serve up this log in dot html file, which is exactly what this is. So now it's saying slash log in. Now you see the message we wrote earlier. Welcome. Your now logged in. And then if he had sign out, as you can see, we hit, slash, log out in the URL, and then it says you're now logged out, which is exactly what this block of court is doing. So it's saying that when there's a stash log out, you serve up the log out. Dad. HTM Oh, static page. Okay, guys, that said I really hope, um, this makes sense. Please follow along. If you don't have any prior experience to ah, express or note, I apologize. But again, all, um, this is not. Ah, completely necessary. In order for you to write you eye tests, I will include, um, the code as part of the course. Um and I think we're now ready to We have enough to go ahead and start writing some you eye tests for the simple up we just made using Cyprus. So I hope you guys are as excited as I am. Let's go ahead and start. 11. Quick recap and source code up to this point: so I think we're pretty much ready to go ahead and install Cyprus and start reading R u I n in tow and ah, tests for application. But before we go any further, I like to do a quick recap of Avi Done s so far. If you followed along with me and up to this point and you've written all the court I've written and you've your application is up and running and you've tested it, like with it in the last section. Please go ahead and skip this module and move on to the next module. So, so far, what we've done is we've created a simple application with a simple front and simple back end. And what it does is it navigates to a website which has a log in page user enters their user name and password hits log in. They're going to the home page where they're not logged in. They see attacks the welcome text. And then there's a log out button, and then you quick on longer than it takes you to the law garbage with a log out message. No, I, um I know that some people might have difficulties with coding Or maybe some people don't have aren't familiar with express and note. So I initially intended this course to be for everyone. And the main focus and intent off this course is really to ah, right. Tests using Cyprus. So I want everyone to follow along. And what I've done is up to this section all the court we've written. I've, ah, put it in a folder and I call that code dash before. So if you follow along with my cursor, please Here it's called Code Dash. Before I've put all the court in this folder, I've zipped it up and I'm going to attach this to this section. So please go ahead and look for that. And then, Ah, one thing you you have to do is download the zip violin on zip, zip it somewhere on your computer. Now there's some things you have toe. Make sure you have or install one is obviously no Js, and you can just go to directly to Google Google know J s and then they'll take you to their official website and you can just download the latest version or the latest, um, I should say long term support or LTs and, ah, when you download that, you can install there that wants the insulation completes. You also get this thing called the NPM, which is Ah, no package manager as ah, you saw. We used that ah few times during the previous videos. Now, once you have the code and once you install know J s ah, you can go ahead and open the folder in visual studio code. That's the editor of my choice. That's what I'm using for development. And it's a great editor. I highly recommended, and it's free. So if you like, you can open the court dash before full day in visual studio code Or you can just use any editor you like, whichever you're more comfortable with. Now, if you're not using cold, what you have to do is before we proceed any further, is you gotta open the command prompt navigate to that folder that you on zip and then you got to run the command NPM install, and this should download all your dependencies. Now, um, if you're I'm just going to minimize this now, If you're you are using visual studio code, you can just do it directly. Visual studio code and open a new terminal. And then from here you can type in NPM install, and you can see Right now we don't have a full. They're called Nord Module. But as soon as I run this command, it's going to download and install all the dependencies that are required by this project. Ah, should be done soon. There you go. So that's done. And then now you can actually see that. Ah, no. Underscore modules. Folder is created and it has all the binaries with. That's neither for this project. Okay, great. So now we can go ahead and move on to the next section and install Cyprus. 12. Installing cypress framework: Okay, so now we're ready to go ahead and install Cyprus on DA. The way we do that is very simple. So, um, you're going to go ahead and type in NPM install now? Um, one thing I want to mention is Cyprus is a test tool. It's a testing framework or any. It's a test related, um, tool or framework were pulling in into our note project. So one thing I wanna mention he has aside for all the key way Ah, engineers and developers out there is anything tests related. Anything that's not part of your code or production called should go on their death. Dependencies on what I mean. Here is if you look inside package that Jason, there's a section called Dependency. So, for example, express, which is our backend framework, is part of the dependencies. We need that to be under dependencies. But if you pull in libraries just for testing purposes, for example, ah, if your family with chai or just or mocha or sometimes tools that does stubbing or a P, I calls anything tests related, you want to put it on their death dependencies and how you'd actually do that? You don't want those things to be part of your code. Your production called. So let's close that on the way you do that is you just tag along at Dash Dash, Save dash death. And this will create a new section called Day of Dependencies and pulled all your testing tools under that section. So or you can Actually, there's a shorthand way of writing this. We can just not do this and then do, um, dash capital D. So they both do the same thing. So for now, let's go ahead and type in dash, dash, save dash death. And then you just type in Cyprus. So just to recap, NPM, install dash, dash, save dash death Cyprus and issued install Cyprus on the our death Dependencies in our project. So go ahead and run that command. And this is going to install Ah, Cyprus and get it set up. So this this is going to take a while, so I'm just gonna fast forward the video and ah, pick up where it's done. All right, So Cyprus has been installed successfully. Now, quickly. Want to show you guys if you go into package that Jason here as you can see, we had previously had a section called Dependencies, and this is where we have our ah dependencies for this project. This is part of our production called and now this. Now you see a new section called Dev Dependencies. So this was added because we save Cyprus under dash dash saved at Steph. So that creates a new section called the Dependencies. And it puts our Cyprus framework tool in here. And it also shows you the version 3.3 point one, which is the latest version off Cyprus. As of this recording now, no, that Cyprus has been installed. What we can do is we can open Cyprus and initialize it. There are two ways to do that. I want to show you guys both ways. So the 1st 1st approach is very easy on the command prompt. Here on in the terminal, you can just simply type in Cyprus and then open. So this command will actually initialize cypress and open the visual command tool for you to start working and ah, develop test locally. Now there are other commands. For example, there's a command called Cyprus run, which actually runs the test. So in your Ah, if you have ah, continuous integration model and you have pipelines. Anyone to run tests on your pipelines, you would use that command in your pipeline. Cyprus Run now you can again. You can run the command Cyprus opening here. There's another way we can do this is just like with it with our, um, script section with our obligation. If you guys remember, we could have run the application and started our server by just running node and then indexed R j s. Or we can add it to the script section off Package that Jason and be Kendra on NPM Run, Dev And that would run the exact same command which is note indexed R J s so we could do something similar and this is just a cleaner way of doing it. Um, we can do that with Cyprus as well. So let's go ahead and do that again. You can just run Cyprus space open down here in the terminal. Let's do that in the script section. So what we can do is we can go ahead and add that in as part of our script. So what we can do is we can just say a Cyprus colon open. And then the command for this will just be Cyprus open. That's it, guys. That's all you need. So now, now that you have that if I run NPM run Cyprus Open that will in turn runs Cyprus open. So let's go ahead and do that and PM Run Cypress open. So now this is going to run Cyprus. We can see here. It's running underneath the hood is running Cyprus open here as we expected. And ah, this is going to ah, if it's your very first time running Cyprus, this is going to initialize Cyprus and it's going to run a bunch of stuff and it's going to take Ah, while on my machine it takes quite a bit. So what I'm going to do is I'm going to fast forward the video to when it's actually done. Okay, So Cyprus has been initialized. Um, and if you follow along so far and you ran the commands, NPM runs Cyprus School and opened. This is after a while. This is what you should see. Similar to what I see on my screen. I think there was a get started dialogue here that just gives you some information. I just go ahead and close that you don't need that. But this is the main important thing here in front of us. This, um, dialogue here, which is which is the cypress? Ah, dashboard or the Ah, you. I've digit for us to actually run our tests. Now I wanna focus your attention on the left hand side. Here. Excuse me. So if you see here Ah, What it's done is after Cyprus was when Cyprus was being initialized. It created this folder here in your project called Cyprus. And if you actually go ahead and expand that they're several folders here. So there's fixture, There's integration, There's plug ins and their support. If you look on their integration, there's a fuller called examples. And if you go ahead and expand that they're all these tests here and these are all examples and I highly these all Cyprus test examples and I highly recommend you guys to go over these and, ah, look at the test because it sort of teaches you or guides you through what kind of things you can do. So, for example, assertions There's tons of test about assertions. They're connectors or cookies if you need to work with cookies, their actions. So you know, typing, clicking things like that. And, ah, tons of good stuff here. Guys like, definitely recommend going through this, and we're going to cover the most commonly used things in here anyways. But if you have free time, please do go ahead and look at these. They're very helpful documentation and examples. So that's one thing that it sets up for you automatically those sets of example tests. Now, this, um, dialogue we have in front of us if you Ah, look at this. This is essentially assuring what's in the integration test folder, which was the example Fuller with all the things I just showed you. Ah, just now. And these are all the test inside the integration full there. And ah, as you can see here on the right hand side, it says chrome 74. Um, and if you quit it says electron, 61 will cover Electron 61. But for now, I just want you guys to pay attention to Chrome 74. Now the thing with cypresses, if you read up on their documentation, is it? It actually uses chrome But it's not the rial chrome that you many of you have, insulting your machines. It's a derivative or an extension off chrome, so it's dare version off chrome, to be exact. But it's very similar to the rial chrome, so I just want you guys to know that difference. And, um, it's very easy. This is This is your dashboard that is meant for running the test when you're doing local development and it's very easy to run. Tests is basically all you have to do is, for example, in the examples full their year. We have all these tests, let's say B road these days, for example, on all you have to do is click on the test, and that's it. So this one actions that Specter Js. Let's go ahead and click on this, and what it's going to do is going to lounge that Chrome 74 browser, and it's going to start running all those tests that are inside that test file. So as you can see here, it's doing all this stuff. Guys here, it's doing all this stuff. It's typing stuff. It's quaking stuff. It's running tons of tests and on the left hand side if you pay attention, The left hand side is when it's actually running the test. There's click DoubleClick, check on check, Select. It's doing all these things and look how fast is running through tests. That's amazing. This is the power of Cyprus. That that's how fast it runs you. I test, and it just ran through all these tests and made all these assertions. And then, um, this this was all in one test file actions that's back. And it made all these ascent assertions and everything passed. So this is what we'll be doing. But I just wanted you guys to know, um, how to use it. So when you run Cyprus open, it just opens this up. And then any of these files you click, it's going to immediately launch the browser and, ah, run the tests. So now Ah, let's go ahead. And you can also click Stop, which kills the browser and stops that session. So and then, um, I clicked it so it killed the browser. And then you can quick all these other ones or the ones will ah, later, right? So, for example, assertions, if I click on assertions, is going to launch another browser, start a new session, launch a browser and run all the tests in that test file. So it's going to do all these things that is running through all the assertions on the left hand side. Hope that's easy to follow, guys. So I'm going to, um, basically stopped this. So now we're actually ah, ready to go ahead and start starting writing some you eye tests. 13. Creating our first test file: in order for us to start writing our you eye tests. First, let's begin. Ah, by collapsing the examples folder here on the left hand side of the idea visual studio code . We I don't really need to look at these falls examples anymore because we're going to create our own test file and write our own tests. But whenever you feel like you need some refresher or refer, needs some sort of reference or documentation to refer back to, you can always come back to the examples for then look at the different type of tests they're writing for you or providing for you on different types of asserts, and the examples fall there is under the integration Ah, folder. But for now, we're just going to create our own file. So let's go ahead and click on the integration full there and on the top. Here you have a button called New for New File, so click that and then we'll call our test file log in app dot specter Js and now we're ready to actually start typing are test cases. Now, if you're familiar with any type of BDD syntax, usually they use the use the word described to describe their test suite, and they use the word it to describe individual test cases. So for the purpose of the discourse will stick with those two naming conventions. And, um, that's what we'll do. So let's go ahead and define our test Street. So use the word, uh that he would describe. And then, um, for this for simplicity and purpose of this course will just name artistry you eye tests and then let's create a narrow function. And then now we have our test. We want to find individual test cases, so let's go ahead and type the word. It now is trying to auto complete using all these things in this list. But we don't need any of this, so just hit escape, and then just type it yourself. And before we actually start writing tests for our ah application that be built, I just want to show you guys a very simple example because there are other things I want to walk you through and show you before we right our ah, actual tests. So if the for this one will just say should navigate to Google's website and let's create a narrow function. And, ah, this gets easier guys, as you type. When you write one or two of these test cases, then the rest is easy because you can copy paste a lot of the score than than just do different assertions and you're selecting different elements and you'll you'll see that in a bit. So for one thing I want to bring to your attention is, um, Now if you start typing, um, the keyword sigh, Um, first of all, you can see that you don't see that in here, and if you scroll down, you don't see that keyword. And, ah, if you type in dot you can see that is actually auto, completing it with the wrong thing. That's not what we want. We want side because that's a reserved key war than that's recognized by Cyprus as you'll see in a few minutes. But it's not actually picking that up, So what we need to do is let's go ahead and delete that. So what we want is actually we want that to get recognized and we want visual studio Ah, cord to actually auto complete things for us so it gets easier and ah, a few times. I've tried this the first time. It didn't actually work, and I had to do, Ah, some extra work, which I'll show you guys in a sec. But the second time it sort of worked on its own. And now, now that I'm showing you guys, it's still not working. So this is something you might have to do. So I'm going to include it right now in this course and so that you guys know what to do. Okay, so first, let's go ahead and click on the folders called Cyprus on top. Here we're my cursors and let's go ahead and create a new file called Ah, we'll call this file ts config. Guard Jason and ah, we'll start by typing some court here. So if you don't follow along, or if you don't really understand what this means, that's okay. All you really need to know is that this is going to help us get that auto completion for free in visual studio code, which is gonna make our life a lot easier. So that's just please fall along with me and type this in in this file so we'll start by ah compiler options as you can see it's auto complete years, the 2nd 1 in the list and then the 1st 1 is going to be called Allow Js again. It's actually auto. Completing it for me was said that to true. And then the next one is going to be called base your L. And then we'll set that to our node module. So dash, dash, um, slash note modules. And then the third thing is going to be types over here. And then we'll just set that to Cyprus. Then we'll close this off. Ah, put a comma there and then we'll say, include all files So we'll say include over here. And then we'll say star star slash star dot star on Let's go in and save that on. Don't worry about this red underline thing here. That's not really an issue. But one thing you have to do is you have to restore visual studio code for this to take effect. So go ahead, close visual studio code and open it again. And, ah, if you go back So now we have this. Ah, filed. He has conflict done without going and close it. Now if you go back to our logging up that specter Js. Now, if you type in Sai, you can see that it's actually picking that open is recognizing it. And if you look here, it's a Cyprus that changeable. And if you click it and nine you click on dot you'll get all these things here, all these methods that now you can actually see and use like for example, Children check, there's click. There's a tons of other stuff you can actually start using and chained to sigh. So now that that actually worked. So all you really need to do to do is create that yes, CONFIG file and, um, put the options in there and now you get the auto completion for free. 14. Writing and running our first UI test: Okay. Now have you got the auto completion working? Let's go ahead and write. Our first test is going to be a super simple one. So let's go ahead and type in Sai and the way you navigate to the websites is very simple. It's just visit and you can see here. It shows up now, so just go ahead and click. Then then all you have to do is really put the website here, and in this case, because our test cases should not be, get to Google's website will just go ahead and type in www dot google dot com and, ah, just at a semi cool in here and save and we're pretty much ready. We can actually run this test and ah, let's go ahead and do that now. If you don't have the terminal already open here, let's go ahead and open a new terminal. And then, if you remember here in our package Jason, this is how Iran Test and PM run Cyprus Colon open or Cyprus open. So let's go ahead and type pain Um, NPM run Cyprus Open, and that's going to ah start. Cyprus, for us pretty soon is now open and, um if you go ahead and click the examples collapsed Examples for that we don't need to see those. But one thing you should notice that now our file that we created our style is now appears in this window. So log in app dot Specter Js which is the file we created earlier here in visual studio code that contains air test suite and are one test case we should navigate to Google's website that appears in this Ah, Cyprus. We don't know if you go ahead and click that that you love on our test. And ah, that should simply just navigate to Google's website and the way you navigate is that method called visit so side that visit on. There you go. It actually navigates to Google Um, website successfully. Now, Walgreen on this page, I want to show you a few handy tools that I leverage a lot and I really like this is one of the reasons I like Cyprus. They make things really easy for developers. Thank you engineers in terms of writing tests. Ah, one thing to begin with is this thing here they call it the ah selector playground. I just call this the inspect tool is very similar to the ah chrome inspector. Well, if you wanna inspect Dom elements on a certain page, So if you click that they'll open this window over here on day, As you can see as I'm hovering my mouse over different, um, elements, it's highlighting them and is showing me the tool tip with either they're class or I d or both. So, for example, if I hover over the Google image on the top here, there's ah, tool to black tool tip called HB logo. So Cyprus is actually trying to identify the element for you and grab the class for you or select that element, using whatever he can is doing its best to actually select something. And the one cool thing is I wanna show you guys is, ah, pay attention to the top part here. The part that's a side that get and then go in and hover over Google's image and click on that. As you can see this thing just change. So Saida, get this method get is very similar to if you're familiar with selenium, it's sort of like find element by I D or find element by class, name or expat. Things like that, it This is what it's trying to trying to do. The same thing is trying to find the element. So if you click on that, this changes. And another cool thing is there's a copy to Clipboard here. So this is really cool, because all you can do is you can just click in a one element on the page that you actually want to do stuff with, like click buttons or type stuff. And then you can just click copy to Clipboard, and now it's copied. And then you can go to your ah, cold and then just insert a new line here and paste. And now there you go. It's like we didn't actually write any gold. You just called me a copy pasting stuff. And if you hit dot you have all these things here. So, for example, if this was a button and we grab Thea, we re trying to grab or locate that element, and it's a button you can just use dark, quick and running. This one line would actually click that button. Or, if it's an input field, you can just type in the type, and that would type like a string, whatever that email or use any password or anything in the search box, this would do it for you. So it's really easy. And if I go back, let me just remove this. And then if I go back to this ah, Cypress browser. So that's that's one of the handy tools I used the Inspect the copy to Clipboard. And here this is your page and he can inspect stuff is a button here called Ronald Test. So once you're done everything and you want to make sure everything is running and passing on your machine, you would just click that. So right now we only have This is we only have one test. So if I click on it, I'll just rerun that test, which is just going to go Hold up. Come on, DA. Over here in the green is showing you the number of tests that have passed and here is showing you the number of tests that failed in this case. We only have one test, and that's passed. So there's a check more check box there with the number and then, ah, this area here is really, Um, for your tests. And if you pay attention here, this this thing here called you. I test This is the name of our test suite, which we define in the describe block here. So this is our test suite name and this it is our test case. So if you go back, So this is our described with the test suite, and this is our it with the test case name so you can see those here easily. Now, one thing Cyprus does is I I believe they call this at the time machine. That's their terminology. But pretty much what is just all this doing is creating snapshots along the way so that, you know, in case at a certain step, the test fails. You can actually step through as your troubleshooting, your test or the failure. You can step through, um, each individual step and to see what things it's doing. And as you're actually hovering over these steps year, you would see things being highlighted on the right hand side of the browser or your application. So this is another very handed tool that Cyprus provides. But essentially, it's just snapshots in the dorm, so that, you know, in case failures happened, you can strip through them and troubleshoot easily. So that's all there is really to this. We can just, you know, play around with this and, ah, explore if you like. But those air, they're handy tools I use, and I highly recommend you guys use those as well. Dame made things so easy to write test, as you can see, so I think that's it for for introduction to the tool. So another thing I want to mention is that as you can see on the terminal, this is running and I haven't really stopped this, and the browser is actually open, and I haven't stopped the session. So, um, one cool thing is, if I go back into the cord and then just change anything, So let's just saying sort of google dot com. Let's say let's go to, for example, um amazon dot com. And then as soon as you hit save this test is going to rerun automatically because the session is running. It picks up that there's been a change, and then it just navigates to Amazon's website. That's super super cool and ah, that's pretty much of guys. Um, now, if you kill the session, he won't do that. You just have to start again. But, ah, there's no reason to actually kill the session here. So you can just keep on running and write your code hit save. And in the terminal, you can see things are running and passing, and then you can see the your test, um, rerun again as soon as you hit safe. So now, um, what I'm going to do is I'm just going to I think that's pretty pretty good introduction to the tools. So what I'm going to do is I'm just going to revert this back to google dot com, and I'm going to Ah, just comment this test out because we don't really need this. This was more of an introduction to Cyprus And how you navigate to different websites and how use their Ah, inspector. And, uh, yeah, I think we're ready to go ahead and start writing test for application 15. Best Practices for locating DOM elements on the UI: before starting to write the first us for our log in application. What we need to do is ah, start our application or server. So it's very easy. Just use what I want you guys to do is use command prompt because we're going to use the terminal inside visual studio code to actually run the test. So just use a command problem, navigate to the folder where you have your coat and simply run NPM Ron Dev, or you can just write, write, note um indexed R J s um those will do both do the same thing. So let's go ahead and start our server. So NPM run death and then we should cease Ever started on poor 3000. Perfect. Now be ready to write the first test. So for the first is what we're going to do is navigate to our log in ah, page. So let's go ahead and we can start by, um writing the its statements. So it and then the syntax follows should do something so should load the log in page correctly, and then we'll do a narrow function. And then first, obviously, we need to ah, navigate our websites or that side. That visit as you saw earlier and then our ah, page is going to be http local host. Call them 3000 poor 3000. And that should just be enough. Um, for that to navigate to our, um, log in page app. So let's go ahead and save that. Now, let's ah, open the, um terminal here, and we want to run an NPM run Cyprus Colon open and to be signed the previous section and this would start Cyprus, and ah, we should see the file recreated with the new test in there. So just give that a second. Okay? So if he run our law g logging app, that specter Js that should launch chrome. We just wanna make sure it's visiting our website properly first. Okay, great. So, as you can see, it's actually loading our long and page now for the first test. What we said was, if you go back to the gold, we said it should load the log in page correctly. So right now you're navigating to a one of the pages on your ah web application or website , and you want to make sure that it loads correctly So if you look at that, um, there are several ways you can actually verify this. Um, and this is again, Ah, if your family with you I testing with different frameworks such a selenium. What? Some of the things you can do is you can use assertions to verify that your page has, ah, loaded correctly. So, for example, and these are just examples there are many different ways of doing this. So, for example, we can say, um, this button has loaded and is visible. This log in page exists on the dom. Um, these fields are in here, and, um, there's many ways of doing that. So, um, what I'm going to do is I'm going to look at this log in element because this is within html element. And, ah, we're going to make sure that this element exists and it has the length of one. And also we want to check that it's visible. If this exists on the dom and if it's visible, then we can assume safely that the page has loaded from cypress point of view. So the way we right that is again, if you remember, we talked about the inspector will here. So if you just inspect that quick on that and then hover over the log in, you can see that it's actually saying if you look at the black tool tip on the top left hand over here, it's saying Dodd MBI three. So what's happening here? It's actually picking up the, um ah, one of the classes we apply to this, um div ah, that contains this text. And ah, this is not really like in terms of best practices. This is not really a good selector to use, because, um, this is a good time to actually talk about this for in terms of best practices for selecting and finding elements. You need unique ideas because there were several. If you remember, there were several classes. Um, that we apply to all of these elements on the page and Cyprus is you can see is just selecting one off them may be the 1st 1 in the list, ah dot mp three, which is Ah, bootstrap class, margin bottom. And ah, we don't wanna if I click on this you If you pay attention on the top here, that will change to a and B three But then we don't really want to use, um, side get MP three because the reason for that is because this is a really a CSS element. Um, and it's a CSS class and the style can change within the pages. Very fragile Developers can easily change the coat and then this test will break. But the functionality of your log in page might not necessarily break, but your test is going to fail, which is gonna give you sort of like it false positive, because nothing has really changed in terms of behaviour or functionality. This logging will still appear log in. But this class and B three might change to a different idea or a different class. So this is a good time to actually talk about best practices for selectors. And ah, this is I got this straight from the cypress documentation on the official Cyprus website and they have really good ah recommendations here So we can go through this, um, together. So number one says don't target elements based on CSS attributes such as I d class tag again. The reason for that is because those are very fragile and there was can change often so we don't want to rely on those who want to rely on unique I ds to be present on the dome so that we can use them as, ah, selectors number two don't target elements that may contain their Ah, that may change their tax content. So if you're trying to find elements that kind contain certain text, same thing the text can change. So again, fragile and not great for, um, selectors in your you eye tests. And then here number three, this is ah, they're a part of the best practices and not just Cyprus, but any you I testing framework, even selenium. This is good practice to do so it says add data slash Sorry, dash something Now that something could be anything. It's his attribute to make it easy to target element. So if you add this data dash something to so this could be data dash sigh Or it could be data dash Qiwei Or it could be data dash away dash ivy. It could be anything. You can, um ah decide that on your own or with your team. But ah, the industry standard is that you just used data dash um and then follow along with something and some value to create unique elements. Sorry created unique tags so that he can use the selectors. And this is another one I found from these are examples I found from the official Cyprus documentation. So if we can, we can, um, look at this together again. So it says these are the recommendation. So it says, Don't ever use um side dot get Baden because this is way to generate and it has no context . So don't use that. Don't use, um, classes here. So side that get But in desert classes, um, don't click. So it says that's ah, couple to styling, highly subject to change. So that's bad practice here. It's saying it's using. I decide that get, um number sign main. So it's a little bit better, but still coupled to start styling or Js event listeners. Now, this one, it's it's actually doing the text or saying side that contains and then the text submit, which you're assuming that that's probably the text on the button or something like that. It's saying a little bit better than the previous ones, but still cup couple to the text content and that could potentially change if they just want to change the label of the button. Now that test fails because it can't. I actually find that element before clicking it. Now here's what the recommended as the best solution because it's insulated from all the changes. So what they're doing is side that get and then they're doing data Dash Sy equals submit, and then they're clicking that. But it assuming this is an element, they're trying to locate an element. Now again, this data dash sigh this that's I could really be anything but the point they're trying to say is make it unique. So again you can make it dash Qiwei You can make it dash Qiwei i d. You can make it anything but this is the best practice because what it does is that it results in a unique element name on the dump. So selecting it, there will be no confusion for Cyprus when he tried to, um locate that element because there's only they can only be one, um, on the page. So this is what we're going to do in terms of best practices. And if you don't have this in your applications or at work. When you guys are working on Web, perhaps, or the U I portion, you can add this yourself. You can add these, um, ideas your obligation as best practices, and then you can use them in your you I test. Or you can ask your developers to add the's so that when you're writing you rightist, it makes things a lot easier. So back to our test. Now, we can't We don't really want to use this. Um ah, we don't really want to click on this and then copy that over. And then I mean, this would work right now, but this is not that great. So we don't want to do this. What we want to do is actually go ahead, and ah, if we go to I just want to show you just how easy um, this is to do is we just want to go to the, um, index dot html. So, in your ah public folder here, actually, let me just first remove this because we don't want that. And then if you go to our index dot html, if you find this text log in in our okay, so you have Etch one. Sorry. I said it was never clear. So it's an etch one with the class MP three, as you saw Cypresses actually picking this up as, um, class name. So what we want to do is you want to go ahead and introduce our own ivy. So what we can do is ah, you can just go ahead and say, um, we're gonna use data dash side, But again, you can use anything. So go ahead and type that in data dash, sigh, and then we'll give it a value. It even auto completes it for you because we did all that ts conflict, um, stuff earlier in one of the sections. So you get the auto completion for free and then, ah, let's just say for this one, we can just say logging dash text. Okay, so let's save this. And then if you remember, I said test three run. So, um, let's go ahead and then, um, let's rerun this test. Yeah, I just need to save this file. Oops. And then if you use the select tool and we hover over the log in now, you can say that MP three has changed, and now we see data Dash, I log in text. Now we can actually use this. So go ahead, click on it now it actually does side that get for you So and that's the element, selectors. So let's go in and copy that. Let's go back to our code logging up Specter Js So now let's go ahead and pace that. And now what we want to do is we found the log in text. So a couple of assertions we can make one is check the length because we want to say the length it has. At least it has the length one, because there's only one of them. So the way you write that is dot should and then it's very easy. And then you just type in, have dot length and l Auto completed for you, and then you just school comma and then the length you expect. So in this case, we expect that only there's only one log in text elemental on that place where you go one. So let's go ahead and save that. Let's run the test again. So now, as you can see, it says, um, expected Etch one MP three. So it's saying this thing here is actually expecting to have length of three length of one , and it's actually passing this H one tag here and then we can do one more thing. Um, just to be safe here, we can just say, um so now we can start copy pacing this because we're taking the same elements. So you can say that same element should. And now you can use the visible. So it obviously needs to be visible for us to say the page is loaded correctly so you can just go ahead and type in, be visible, dot visible and go ahead and save that. And then the test will run again, and then he can see it here. The assertion has been made. So then go ahead and we run the test. Now you can see that it, um again, this is the time machine that we were talking about, or that's what Cyprus calls, but it just every step along the way. So first it visits http calling the slash slash local host 3000 which is our app. Then it tries to find this element here which, if you see on the right, it highlights when I go over it, then it makes the first assert saying Expected that HTML element, which is an Etch one to have a length of one, which it does. And then that assert passes and then the next yesterday, it's saying, is, um it's trying to get the same element and it's saying it's expecting that Etch One element that contains the log in text to be visible so very easy. Um, very easy to actually check. Get the elements and the selectors and we'll do this. Ah, I d thing for the rest of the elements as we actually making a research. But as you can see, this is, ah, best practices. So I just wanted to share with ah with you guys this first before moving on to the next tests. 16. DOM Operations and Assertions: for the remainder of the course. I'd like to walk you guys through some of the commonly used operations and some of the very commonly used assertions so that we can start building tests right away. If you ever need more details, The Cypress official page has tons of documentations that you can refer to. So for our second test, let's go ahead and say that we want to write the test so that it tests the input field and verifies them. So if the user does not provide, for example, the user name, but they provide the passport, it should not law again, which is the correct functionality of our. So let's go ahead and write this test. Let's begin by copying the it block on pacing it here, and we need the beginning part. So leave that in there because that navigates to our website. Let's save that Onda. Let's change the name of the test and say, Um, it should not law again. When user name is not provided great. Let's go ahead and save that the test is running. I just want to quickly highlight that we need to work with these input fields and but in within our tests. If I hover over them, you can see that it is using the bootstrap classes. We assign these fields earlier. So as you can see, these don't match the best practices convention because we need the ideas to be very unique . So before moving forward with writing the tests, let's change the I DS so that they match the best practices convention. So back in the court in our test inside index dot html, What we want to do is go ahead and find the input field and, um, at the attributes data Dash, Sigh and for the value we will assign email. Let's copy that, because we need this two more times. So for the password, let's assign password and for the button. That's a sign the value off submit, but it so let's go ahead and save the changes. Uh, let's run all the tests again on now. If you use the inspector will to hover over the elements, you can see it is picking up their new ideas. We just a sign now these I ds are unique and no other elements have these ideas, so it is easily searchable by Cyprus, so Let's go back into our test and in our long in that specter Js we can perform the dome operations. So for this test, we said we will not input the email, but we will input the password and the option of law again. So first operation is to type into the input field. Let's copy the password attributes and go back, and we want to type the password. And the operation keyboard for that is just simply type. So in this case, let's type any password like 123456 If you run that, as you can see here that the test got ran and 123456 got inputted into the password field, but nothing into the email. And now we want to click on this signing button and see what happens. So that's easy. Let's go back into the browser and select a button with the selector toe. Copy the selector into the clipboard on. In order to click that l. A. Man, you just need to type dot Click with brackets on that. You just click it Now. If you run the test as you can see it, type the password and it clicked the button and he got this message that it is really coming from the Boonstra. There's a little bit of, ah, basic validation on the front and side by applying that boot strap class with it earlier. And so this is working correctly now for assertions. We want to say the user has not been logged in or the user has not been redirected to the next page, which is the home page. And that page had the text there welcome text we created around here. So how did you write the assertions? Well, it's easy. What we want to do is we want to just check that we are on the same page. So in the court, I'm going to leave a comment here check that were still on the same page. And then the way we assert that, let's say we can go back to this because the next page does not have the log in text so we can verify that the element that has the text log in exists similar to what we did earlier . And the other thing we can do is we can check that the next pitch does not exist and I'll show you what I mean. But first, let's right the assertion for that. So we already have written that in the previous tax. So let's copy the assertion on Put that in there. So for the next one, where we want to save your no logged in into of the page with welcome text, that's easy. Let's go ahead in the ah logging dot html. And then this is where we have our welcome tex here with the ah H one. And then what we can do is we can just go ahead. This is You're assuming that when user sees this, they have already got past the log in page, and they have entered the correct user name and password. So let's go ahead and add in the data dash, sigh on Let's call this one home page so that we can actually say if this thing doesn't exist, that's the correct behavior, because we shouldn't have logged in. And so then we shouldn't be seeing this element on the dog. So let's go ahead and save that. And then let's go back to our test, and I'm just going to do save all here and then go back to our test. And now what we can say for our ah, next assertion is, um Well, what we want to say is that that, um, etch one text that we just gave the idea of home page should not exist. So the way we right, that is we can just say, um let me just it has the length of zero. So let me just grab this. All copy pasted. After this point, we can copy paste a lot of code because just the elements and the actions changed. So we change this one. We're looking for the element called Home page, which shouldn't exist on the log in page, and then we want to say have length of zero. So if these two conditions are met, that means that we're on the correct page. And, as you can see here, should not allow logging when user name is not provided on. Our assertions are both passing. So the application is working as expected 17. Tests and Assertions Part 2: you can now write a similar test, but switch the user name as sorry, email and password. So basically same same functionality should behave the same. So if you provide ah, email address but no password, users should still not be able to log in that that is the correct functionality of the application. So we can write a test for it. So again, very easy. Let's go ahead and copy this entire it block. And ah, what we want to do is, um let's say, um so this test name, first of all, our description as the change so should not allow logging when user name is not provided. So we want to save in. Password is not provided. And then we want to visit our website. We want, um, eso instead of, ah, password. We want a type you want actually type into the email, but not the password. So let's go ahead and change the i d to email. This is what we added earlier to the index dot html as I d. And then for the, um ah email. We can just say John at ah, yahoo dot com or anything. Really, any string would work um, any valid string with the at woodwork. And then, um, we just want to say hit the submit button. So again, to recap in putting the email we hitting submit on, we should not actually be able to log in. So our assertions actually remain exactly the same as the previous one. So the log in text, um, the Etch one that contains the long in text should be there, and it should have lemons should have a length of one. And the home page, which is they Welcome to Ah, you are now logged in that Ah, element. That's one element that contains that text. Should have the length of zero because we're not on that page. So it shouldn't be on the doctor so exact same thing. So let's go ahead and save. Look at the test. So same thing. Now we've entered the, um, email. No password. We hit signing, and then he tells us, Please fill out this field because their validation on it. So again, application is acting correctly. Look in the if you look at the left hand panel, you can see that. Now we have three tests. So as we're building this you'll be able to notice them here and then if you click on it, you'll see all the details for that test, as is progressing. So now let's go back. Um, now let's do some other operations. So let's say now we give it, use their name or email and then password and me log e log in and assuming those ah, or actually valid credentials users actually logging in. And they're going to the home page, which is welcome your now long, thin page. So let's go ahead and write that. So let's just copy this it block and, ah, let's rename the test. Let's call it, um, should log in to the home page with, uh, I guess valid creds so should log in to the home page with valid creds credentials. So first we navigate to the page, and then we go to, um, input the emails. Or now we need to input the password. So let's go ahead and copy that we do the email first. Then we do the password and then for the password. We can really leave this, but let's just say 2123456 for the sake of this example, we click on it. So now we should actually be on the same pace. So let's I'm gonna, um, get rid of this, um, assertions for now. Um, and let's run the test and see what happens. There you go. So you can see on the fourth. Now we have our fourth test here, and then now it actually clicked. Log in. And now you're on the home page. It says, Welcome your now, long then And there's a sign up button. So now we want to assert and make sure we want to verify that we're here using assertions. So how do we do that? There's, ah again, we can use the same things we Ah, we've done here. But I want to show you different types of assertions as well. So you get familiar with different ones. We don't want to do that same ones over and over again, like have length, have length or, um, that kind of stuff. I want to show you new stuff as well. And then when you're writing your own test for your own applications, you get decide which ones you want to use or which ones make sense for your case. So let's Ah, First, um, we don't have I think one thing we can do as an example is what we can say is, for example, the already done text in the previous one redid assertions on the log in text. So I guess we could do the exact same thing here. But since you have a body and one, some of the things we can do is we can say Okay, go find this button and they make sure it's visible. And then you can also do things like make sure it has the class name blah, blah, blah. So those are some of the assertions you can do, but I mainly want to show you guys these are the things you can actually do, and then it's up to you to decide which ones you want to use. So that's very easy. Um, you can just if you just hover over this, you can see, like if I do the selection tool here, Um, now, as you can see, it's showing me, but in and ah, this is again a bad to see a bootstrap classes. The CSS class were styling very fragile. We don't want that. So what we want to do is we want to go back to our code and actually add the data. Sigh, um, to this. Ah, but in the So let's go to back to our code. We want to go back to the ah logging dot html and I Okay, here we go. This is our but in here. So after the class, we can just add, um, data sigh And then let's just call this law GLBT in, So log out. Ah, dash B TN So that's a good class name. So let's go in and save that, um, you want to save everything and then we want to go back to Cyprus rerun tests and you see how fast those tests are running. That's amazing. So if you just select the selector tool and you hover over that, you can see now that that's changed. So let's go ahead and copy that. Go back to our code on our test and ah, okay, here we go. Now we can actually make some assertions. So the first thing we can say is again, um, as ah mentioned, we can say, um, the body and should be visible so the way we right, that is, we can just go, say dot should and then very easy. We just put, um, the verbs here so be dot visible, and that's it. That actually verifies that. So if you save that, watch that that's run. That should pass because the body should be visible and there you have it. If you quick on this, you can see the assertion here. So expected the button with all these classes on it to be visible. And it is so there's certain passes and it's green now. Another decision weekend assertion we can do is you can check for if you look here, it says this button has all these classes BT NPT N SM BT and I secondary BT and block. So, um, one thing you can do is you can actually check for those and make sure the button contains those glasses. If you cared about CSS and you want to make sure the styling contract doesn't break, so that's one of the things we can actually assert. So let's go ahead, and I'm just going to copy this assertion and then ah, instead of ah be visible. We just say should have that class and then we'll have toe decide them because there's too many. There was a lot of classes applied than this, but I'm just going to pick one and that's going to be beating Dash small Bt and that small . And then just before we save this and run it and before I show you guys is, um and anything we can do is you can check that the certain ah, the button does not have a certain class. So if that's another thing, you can check. So let's go ahead and Ah, pace that again and then say Actually, let me just copy this because it's let's typing. So now, instead of saying should have class, we just added Not in here. So it's a not thought, have class, and then we can put some garbage here because we know exactly which, um, classes we have here. So let's just some type in some garbage. Random key presses here, and then if you had saved now, let's watch the test. So we're saying the button should be visible. It should have a certain class and it should not have a certain class. And as you can see the test passing and these are desserts. So it will give us the DTN small here. This is one of classes on the left hand side, BT and I small. That's one of the classes. And it does have that. And it does not have this class that we just type some random key strokes on the keyboard. So, as you can see, that's another way, um, you can, ah assert on your elements on the dog. 18. Tests and Assertions Part 3: now for our next test. I want to show you guys thea assertion types for, um ah has value or does not have value. And ah, it's very easy to do that. So let's go ahead and write a test for that. Um, just different type of assertions that you can use in your test. So let's go ahead and copy this. Ah, it block here and then Ah, what we want to do is let's just call this test, um, where you going to call everyone say should contain obtain correct input field values. So how we can ah make this assertion is we can actually use our input fields on the log in page, um, and type in them and then make sure whatever be typed is actually the correct value. Now. It's not a very useful test if you think about it, because if the test or the user is actually typing into an input field, they know what they're typing. No need to verify it. So it's the test itself is a little bit, ah, provides no value, and it's a little bit useless. But the purpose of this Tess is I want to show you guys that have value and not have value assertion type, so you can use it on your own test. So first is Ah, let's navigate to our website the first line we need. So, um, for the, um, let's say we can do email and we can do password, so that's easy. Let's do email first. So we input the Let's say we'll just change it up a bed. We say smith at hotmail dot com. That's what the test will type in the 1st 1 And then let's say we want to make the assertion right away. So let me just, um, bring this down a bit, so it's cleaner and easier for you guys to see. So let's go ahead and make the assertion right now. So the way you do that is, let's just get the element first and then we want to say should. And then the assertion for that is have value as mentioned before. So we say should have dot value and then the value were actually are expected. Value are what we're expecting to see, and that's going to be exactly this. Smith at hotmail dot com. So let's go ahead and ah do that. So now we This assertion should make sure that whatever every type is matching this string here, whatever be talking to the email input field is matching that. And then we can do the exact same thing for passwords. So very easy. Just copy paste this every doing the assertion right after typing into the input field. So now we want to do password. Sorry does. I'm just gonna get rid of all this garbage here for this test. So now we say, um, typing to the past for them, for the password, we are going to say 123456 And then we want to get the password and then say should have value 123456 So let's save and the test will rerun. This is one of the nice things about I like about Cyprus as soon as you save it reruns. So now the test has passed, and if you click on the last test it has our title in there should contain correct input field values. And as you can see, it's expecting to have value Smith at all May law com, which it does and then password. 123456123456 Which is what? We ain't put it here. Now just to show you guys that this is actually working, let's go ahead and change this, um, password, um, or email instead of Smith. Let's just say, um John, and let's save that. Let the test run so already you can see that there's some delay here and then assert fails . And if you like, there's This is really easy to troubleshoot guys. For Cyprus, this is very easy. As you can see, it says Time that retrying. So it did even retry. And it says, Ah, the input field to have it's expected that that input field email to have value Jon at Hotmail. But the value was smith at hotmail dot com, so you can see the cypresses. Actually, this test is actually correct, and it's catching the bugs if there were bugs in there. So let's go ahead and ah, change that back to Smith. Save. Watch our test always. Whenever you make changes, run the test, so make sure your, um, tests are working correctly. Um, don't just write a lot of code and Ah, not save and just run all the tests because it makes troubleshooting really hard when multiple things fail. One more thing I want to mention here with the have the value is you can actually just like , um, up here. We did have class and not have class again. Do not have value. So it's easy to add that a surgeon here, So if you want to check something, does not have muscle. We can just make a quick assertion here on the past war. Just as an example, um, and then say cider get password should have value. So then we're just going to say should, um not have value. So let's go ahead and change that. Not then we can just type in. Ah, some are very so that's a blah, blah. And then if he saved that, watch the test run again, and it does passes. So if you quick on here the last dessert, we just added, it's the Pasfield. Not have value blah blah, which is 56 So it is working correctly 19. Tests and Assertions Part 4: Okay, so now for the next test, Um Ah. What I wanna teach you guys is the next assertion type, which is a very commonly used one. Ah, called contain. So now, because this is an end to when walking, stepping from work flows of our application. And we can say that we can have the ah test navigate work for which is the log out paid so friggin page They enter user name and password, your email and password there now logged. And then they click log out, and now they should be directed to the log out patient. I think we call the other is Schimmel, so we can make our assertions on elements on that that exist on the log out the HTML and we can use container. And basically, what contained us is checks for elements that contains certain texts. So let's go ahead and write the, um, test. So what we want to do is, um let's go ahead and copy this it block here. Pace that. And then for this one that's called the test should log out successfully. And then we want to go to our ah log in page. We want to type and use their name. We want to get rid of this. Um, actually, let me just grab it from, uh, the one that this has Ah, valid Critz because that one does the user name and password on test. This one, the last one. It's not gonna actually go ahead and cleanse the fastest way to do this. Run the save this run ist. So go out. They inspect element to click board. So you wanna click this sign out, But enough if you click it, um, what's gonna happen is let me come out of the ah, inspector more so if I click it, it takes us to this. You're now logged out, so we'll be actually checking for is in order to wear. If I were on this long out page after clicking log out is we can select that. Whatever element, I can't remember if this was a day of or etch one or spend whatever this was contains this text. And if that does, then that means the ah test assertion passes and the application is functioning correctly. So let's go ahead and do that. Um, we copied the ah, but in here for the log out. So let's go ahead and click. So now we have we're locating the longer but and then go and let's go ahead and click that . So now we should be After this point, we should be on the log out page, So should be on the log out page. And now we want to run our assertions. So But if you if you go back here, guys, um if you grab, inspect element and you hover over this, you see it just as Etch One, it's not. This is an element is not Ah is like is a really bad way of selecting and elements of what we want to do is we actually want to go ahead and add the data sides like the unique ones, just like we did for all the other elements throughout the course. So let's go ahead and add that that's inside are gonna be inside our log out dot html. Let's find that text that's here. So let's go ahead and give that data sigh. Ah, they'd ah Sai And then we'll call it log out text stop. Something unique saved that. Come back here, run all the tests and then if you come back, you can see that this change. So let's go ahead and use that. Ah, backing onto to our test. So let's go ahead and get that elements. So, um, this is what we need. I'm going to copy paste this code here. And then we just changed this to actually log out text, so that should grab the element. And now we can actually use the contain assertion we're talking about. So what we can say is a couple things here, so we can say dot Ah, and then should And then we want to use contains. So we want to say contained that text we saw in the page earlier. So we can say dot contain and then come on the text and the text is actually coming from law gallery HTM also begin. Grab that you're now logged out. So let's copy that back into our test. Let's pace that there. And as at the semi call in there and save and let the test run. So this assertion should now pass if the application is working correctly and it does so if you click on that, you can see it's asserting on that and the text matches what the expert actual matches expected text and ah, yeah, So again, with contain just like ah, the previous one has value and not has value are have value. You can do the same thing so you can do, um, contain and not contained. So let's go ahead and grab that. And let's base that and then we can just say should not dot contained so shouldn't contain this text. Oh, so let's go ahead and say blah blah and save that and lead the test run and then it passes . But ah, what I can do is if I actually, um, take this text here, which is actually what the text contains and then assert or not contained. So if I say does not contain this, but it actually does. This test should fail. So let's go ahead and save that. And now this assertion should fail. And there you go. It does failed so exactly works exactly as we expected. So let's go ahead and change that back to blow blows or test passes. Save Watch the test. So, as you can see, our test is also building up, and our test suite is actually building up with test cases, and they go that has passed the soul. It is functioning as expected. There is, Ah, one more. Ah, assertion. Ah. Which is very commonly used that I wanna show you guys. Um and then that should cover pretty much all the commonly used assertions that you can Ah , that'll help you get started with writing your you and then 20 us. And that one is actually exist. So it's just taking if the element exist or does not exist. So that one is very simple. I'm just gonna do a very simple example here. So what we'll do is we'll just, um um let's go ahead and, uh, just copy this it. But we'll make it a very simple test because I just want to demonstrate to you guys. So let's change the ah title to shoot. Um, let's just say should sorry should Let's call it have, um, existing components, for example, or elements. And Ah, so Okay, first thing we want to do is you want to go to our, um we want to go to our ah ah. Application local was 3000. And then let's find the element we can just use the log in text on the main page on the logging up. So let's go ahead. I think I was called logging text. If I'm not mistaking, Wie asserted on that earlier. Ah, this one here. Okay, this one actually will grab this Should people come all the way down here so we'll get rid of all this. So this test, always doing is it's checking for an element on the dome that exists. So if you go to our main log in page and you see that each one element with the text containing log in, um, what we want to do is we just want to see if that exists. Um and that's on the That assertion actually works. So let's go ahead and say the log in text should. And it's very easy. All you do is you just say exist, and that's all there is to it. So let's save the code, and the test will rerun automatically, as you can see, and you can see how fast that this are running on their ego. So all the test is doing is saying this actually exists. This element exists, which it does on the dog because we can clearly see it. So again, same thing with this. Another thing into It does not exist on the way you write. That is, um so let's say you are on this page. So what we can do is we can say the element, um, that we were just working on with on the previous desk that says That was the log out text that says you are now logged out. That text should not exist on this page, so we can make an assertion on that. So let's go back into the code. And, um, I think we call it It's over here. So what we want to say is, let's grab that and then say should and the syntax for that is not dot exist, as you can see. And then let's put the semicolon safe. Let the code run, let the test run, and there you have a guy's. So now if you just click on this, you can see the two assertions we wrote, and you can mess around with this yourself. You can change these values, make them fail on purpose to make sure the test are actually, um, it's always a good idea to make the tests fail before you check in any court on your local host. Because sometimes there's many times like in my career, I've got in many times where, um, the test actually give you. Ah, false positive results. So you always want to make sure the test failed when they should. And you can easily do that by changing these values. O r. Assertions Raisi to test out, um, the assertions air working properly and they're doing what they should. But in terms of assertions, we've gone through all the common ones, and I'm pretty happy so far with what I've shown you guys, Um, now you should have all the tools you need and the skill set to actually go ahead and get started on, right? Your tests. Ah, with Thea assertions. And I'm pretty sure with the assertions we went through today you can start writing your test and get a lot of coverage in your court. 20. Test setup and Teardown: before moving on to the next section. Ah, like to cover one thing, Um, and that's test set up on tests tear down. We didn't really cover it here in this course, but, um, whenever you see code duplication or something that you can re factor, um, you should actually look into ah, using test syrup and test tear down. Or if it's something that your tests require, Um, and the way you do that is very easy. So for this example, what I want to highlight here, one thing we can do is, for example, if you look at all of our tests the first line, it starts with side of visit http local those 3000. So if you look at that that this versus has that second, that's as that thirties has it all of our test has. So what does this mean? Because each test has it. We can use the test set up to put those in there and just remove it from all the individual test on the way Do you do that is the syntax is very simple. So, um, it's just called before each. So let's go ahead and actually create that so before, and it's actually auto completing it for you. So go ahead and select that. And then all you have to do is create a narrow function here. And then all we want to do is put that one line. So what? This actually says, Let's copy that in here. So what this says is that before each test run this line, as you can see, this is the first line of each test. So it makes sense for us to do that and remove redundant code here. So now that we have that, we can actually go ahead and remove all of these runs. So anywhere you see side of is it began, just remove it. So let's go ahead and remove that at school. Had any of this one next test remove you move, remove, remove and delete the last one. So now have you got in rid of all that? We only have this small block, a code that should just do the same thing as we have previously, so let's go ahead and save. Let's watch the test rerun and there you have it. As expected, everything passes, and whenever you have stuff that you need to set up before the test or you have common used amongst the test to, um that actually does common things or sets up things. Go ahead and use the test set up and test stare down for the tear down is very similar is just called after each. So then you would do your things in that code block, but we don't really have anything. Ah, in this course, I just wanted to show you guys that those air there for you to use so very handy things always try to use them when you're if you need to, or if you need to re factor your coat because it makes think it also makes things cleaner and easier to read. 21. Running a Singal Test File using Cypress Commands: Now that you have written our tests and covered the basic assertions in this section, I like Teoh go through running the tests. Now there are two main ways we can Ah, run the tests in Cyprus or at least two ways I used to run my tests on the 1st 1 is Cyprus Open, which what we've been using, um, s so far up to this point. And the second way is Cyprus run. So I'm going to cover Do those two Ah, in this section. So for the 1st 1 we've already done this set up for this, um and that's what we've been using. So if you go over to package that Jason, um, you can see that we've added the command here on their scripts. We've added Cyprus cool and open. So every time you run NPM run Cyprus cool and open L Ron Cyprus open. Um, alternatively, you can just run Cyprus open in the command from up to you. Um, so if you go back to our test, make sure. Let's cover that. So make sure, um, your servers running so navigate to the your coat full around NTM run Dev aan den make sure your servers started on your app is running on then in the command prompt. Here in the visual studio code. I'm just going to make this a little bit bigger. Ah, we're going to run, um, and PM run. So here you can run cyp Cyprus Open. Or you can just run what we set up in package of Jason. So NPM runs, I press open, and this is basically running Cyprus open. So, um, in Cyprus, this is what they call interactive mode. So this is where when you're writing your tests, um, locally and or trying to troubleshoot test locally when things fail? Um, this is what Cyprus calls interactive mode. So you get this window in front of you now we're using the free account. If you had a paid account with Cyprus Ah, which is something um, enterprise companies might actually go for. You can actually log in, and then you'll have your dashboard of all the tests and their failures and their runs and all the information and details regarding those, But for this course, we're just using the free version of Cyprus, so we're not gonna have an account. So when this Ah, initially run Cyprus Open to get this thing open, this dialogue open and then, as you can see, they are automatically picks up all the test you have written in your Cyprus folder. Ah, specifically the one if you look on the left hand side in your visual studio code or editor is specifically the one that's under the folder Cyprus and then integration. So in there we have a folder called Examples, which you see here, which contains all the example and then you have logging up that specter Js, which is the file recreated for our own tests and again, very easy. Um, there's really no much to this. All you have to do is, um, for example, if you want, if you just finished writing a new test or finish changing an existing test, you just save and then, um, make sure it's running in the console, and then if you just hit quick on the ah, that speck file or the test file, it should just automatically run the test. The water. Um, I'll start running the test and I'll give you back the results, so ah, very, very straightforward on this is, um, one way Ah, to mention this is what they call interactive mode. This is if you want to see results or if you just want to test things out locally. And, um, I'm just going to ah, emphasize on the second, um, begin, Let the actual test run here, so we just do a quick recap here. So on the right hand side is where the test are running on the left hand side or your tests . If you click on them, you can see the specific steps that the test takes. Um, and if you call economy will highlight that portion of the Dom um on the right hand side, over here on the top, left on the top toolbar. Here we have the number of tests that passed. You have the number of tests that failed. This is the time. I don't know if you cover this, but this is the time it will take for the entire test suite to run. And then this is the ah, it looks like every fresh button. If you just click on it, it will re run all the tests. And this is the This is what they called the selector playground. I just call this stain spec toe and ah, we've covered all of this. So nothing new here. So this is it for Cyprus open and attractive. So what I'd like to do is now close this and Ah, stop. Basically, it's stop. And as soon as you, um, close this window, um, it will kill your session here on the console. I'm going to make this a little bit bigger. And Ah, so now I want to cover the second way, which is, um, Cyprus run. And, ah, if you have continuous which most most companies on developers do if you have continuous delivery set up and you have pipelines or you have agents running specific tasks when you check in court Ah, which one being running the tests you want to use and ah, you want to use Cyprus run And it's very easy. The way it works is that it just runs Thea test using headless browser, and we'll just cover that right now. So first thing you want to do is you want to go into your, um the command is Cyprus run just like Cyprus Open. It's just called Cyprus run. But you wanted to specify which files you want Cyprus to actually execute. So if you go to package that Jason here on the left, left hand side. Let me bring this down here. So we initially have cyber so open. So now let's add an additional one and we'll call this one Cyprus run. And what we want to do is we want to give it s so we'll start by the command cypress run and then we want to tell Let's specs. So these are the spec files. They'll run, and then we want ah ah pointed to where our tests are, So you can do, um there under Cyprus integration on the name of our file is called Logging Up Does spec God Js Now go ahead and save this. Now what happens is that I'm going to Ah, try to maximize this command prompt again. I'm going to clear everything and then I'm going to run npm Cyprus. Ah, sorry, MP Emma, Run, Cypress, run! And what's gonna happen is that when we run, this is actually going to, um, launch a browser called Electron Electron Is just You don't need to know much about it. Is just a headless browser I'll show you the version. And, ah, if you have ah, every used or heard of Phantom Js ah, which is no longer supported, I believe or have less chrome. This is essentially what it's doing is running the test headless, so there will be no browser launched or you won't see anything is just running all the test using a headless browser. So let's go ahead and run that. So this is the command you would ah, basically reporting in your pipelines. So when you have if, for example, if you have a built pipeline and you check in court and it's running the unit tests and the next stage is running the you I test this is a commander would actually executing your pipeline in the Cyprus run, and that would run your tests. And then, as you can see here, let's fall along. It says Cyprus 3.3 point one electron, 61 specs, one found. And this is the This is where it is. And now if you look on the bottom is running the test, so you eye tests, you can just follow along. So now it's running our test and is telling us the status. So, so far, everything has passed. Perfect. So now that's to Ah, overview. Um, here it is. Throwing our This is our test suite, which was in the describe log. These are are test cases which were in the eight blocks and then on the right hand side in the red bracket text. It tells us how long it took to run those tests. So 1.4 seconds, almost a 2nd 700 milliseconds and so on. And then the green shirt box tells you all of those have passed. And here it tells you seven passing and then 11 seconds for the overall execution of the test suite. Here, you get a nice low overview. Dashboard tells you the number of test, how many of them passed failed skip and so on and the file that it actually executed. And then, um, the other thing is that, um, here it actually tells you, um, if there were any videos or screenshots will point you to those and ah, here it just it wraps up by saying run, finished. And then again, another little cool table that gives you, um, just an overview up number of tests passing and so on. So this is Ah, what you want to use. If you actually have a continuous delivery model, you want to run the test this way. And if the test ever failed and you wanted to do ah more thorough investigation or troubleshooting and debugging, you would just, um, check that version of the code out and then you would run Cyprus open toe, open the interactive more than then you can inspect Thea all the steps or the Dom elements through the time machine on the left hand side has recovered before. So I hope that helps and see you guys in the next section. 22. Running Multiple Tests Files: one other thing I would like to cover is what if you have multiple test files, so you have multiple tests, falls right now. We just got we only have one, and we ran the one. So one thing, I'd like to show you guys how to run multiple tests files, and that's very easy, but minimal coaching. So if you go back to your package that Jason opened that up, I'm going to minimize this. Um, so if you look here, we just said Cyprus run spec, and then ah, pointing to this directory and this specific file now, it's very easy. If you had mawr tests under your, um right now, the only under the integration Fuller, we only have, um, just that one speck file, which is our task. A test file. Ah, and includes are test cases if you have multiple of these, so say you have three or four of these. But, um, you just wanted to run all of them. When you run Cyprus run, all you have to do is just use the store, which means run everything in that folder. So all you have to do is instead of ah, log in if you falling my cursor here instead of saying logging app dot spec All you have to do is replace that with Star and that basically says everything under the folder cypress slash integration run everything that starts with some file name dot specter Js So I'm going to save this now. Ah, bring back the command prom. Maximize that. I'm going to clear everything and going to run the command again. And as we can see, it's running. Start that Specter Js instead of the very specific, uh, file name and you can just just see that Cyprus automatically detects that it needs to run all the files. Now, in this case is just going to run the exact same file Over here It says running log in app and then the right on the right hands up side. It's as one off one. If there were more files, it would say something like one off two or one of three. And now it's running all over tests again, just just the way that previously. Great. So that's all I have on ah, running the test. I hope this was ah useful and see you guys in the next section. 23. Delays, Waits, and Sleeps: since we finished our tests. I just want to do a quick recap, an overview of weights. Oh, and sleeps in Cyprus because we didn't touch really touch up on that. But, um, I just want toe quickly show you guys how ah, nicely Cyprus handles this and the way we can do that is we actually not going to change anything in our tests? So we'll leave everything in the test. Scores are log in that respect dot Js everything the same. We're not gonna introduce any court or any delays. What I'm going to do is on the left hand side here, let's go to our index dot Js, which is our server. And what we're going to do here is is that we actually going to introduce, um delay from the back inside and see how the U I test actually handle that. So let's go ahead. And, um, this is how we're going to add Ah, delay. So app that use and then we'll do a function and then in our function, will say request result, and next and then. So this should be down here. And now, um, let's say we're just going to use the set time out here. So said, Ah, time out. This one here and they will say next. And then let's give it Ah, delay of three, um, seconds. So there will be 3000 milliseconds. Let's save that now. If you don't understand this block of court, that's fine. You don't really have to. All it's saying is that introduced a three second delay to all the requests. So when you're navigating from page to page will just be a will be delayed by three seconds . So we're actually introducing this delay ourselves. And now we're going to see how Cyprus actually handles that in. Are you? I test. So once you save that, make sure you save this file after the change. And let's go ahead and start our server. So in PM Ron Dev alternatively, you can run on note index dot Js So now our servers started. Now let's go back here and then let's, um, run Cyprus. So NPM run Cyprus open and this should open the interactive more dialogue. Okay, great. So now let's go to our test again. Remember, we did not add anything toe handle the extra way to Are you rightists Let's go ahead and click on that so you start running the test. Sonar tests are running. So now, as you can tell, the test are a lot slower because for each requests were waiting an additional three second and you can tell from the left hand side here it's actually doing taking three seconds first and then performing the operations. But as you can see, Cyprus is actually handing this very nicely, and it's doing the wait for you so you don't actually have to add any court to handle the weight yourself, just like you do in selenium. This is actually doing it for you, which is really nice. So it takes that complexity away from you so that you can actually focus on writing better tests and not have to worry about, um, doing things like, Should I wait? Should I doing in police implicit way to They do an explicit weight before I locate my elements were before a quick about, and you don't have to do any of that. So, as you can see now, all of the tests have passed with that additional three seconds, our overall execution time has increased from I think it was 10 or 11 seconds to 41 seconds , which is fine, but the only point I'm trying to highlight years that we didn't actually have to change anything on our Cyprus or automatically handled all the waits for us. So when we if you go back here to our test coat, we did not have to wait for anything, it just This is the same court we wrote in the previous sections, and it just worked. That's that's the amazing thing about Cyprus. Now, if there if there are special cases off, or if there are cases that you actually have to use away, well, that's really simple. And I'll show you guys in your desk. Or if you, if you know something, is going to take a super long time to load based on your application or maybe it deployment startup time or something like that, I'll just show you this in tax, and then you can decide if you want to use it. But it's very easy, and all you do is you just go side dot wait and then, um, in the brackets, you just put the number of milliseconds. So if you wanted this to wait a second before performing the next operation, you would just go 1000. So 1000 mothers second is one second. Or maybe you want to do five seconds 5000 milliseconds. So then he would put this in, and then you would This would actually do asleep for five seconds inside your coat, and then your next line would be something like locate the element and then click the button stuff like that. So I'm just gonna remove this, But this in taxes side that weight and the number of, ah, milliseconds inside the bracket. And it's that easy. So I just wanted to show you this Ah, this to you guys. But I'm just going to comment this out. I'll leave it in there in case you need some reference. But I'll just comment that out. So we're not actually executing this code. And also, let's go back to our let's save this file first. And then now let's go back to our package. That sorry, not package index, that Jason and I'm also going Teoh comment this out. I'll leave it in here because later on, I'm going to put the finished I'm going to zip up the finished code base. Um, put it in the ah, attach it to the court. So you guys have a reference to follow along with, but I'm just going to comment. This also were not actually waiting an extra three seconds every time you wanna do things in our next in the next sections. So let's go ahead and save that. Now we need to restart our server. So let's kill the server with you can do it with control, See? And then press. Yes. And then let's clear things up on Iran. NPM run, Dev. And that starts our server without that three second delay. So that's all I had on Ah, waits. Um, so let's move on to the next section. 24. Videos and Screenshots: one of the other nice features I'd like to share with you, um in Cyprus is Thea Bility, um, to take screenshots and videos. And ah, it's actually very nice because Cyprus does it for you on test failures. Now, if you're familiar with other test frameworks such a selenium. If you want to take screenshots on test failures, for example, let's say in your test tear down or within the test itself, it's Ah, you would have to do some extra work so you would actually have to maybe write your own module to take a screenshot or use someone else's third party library and use that consume that to take screenshots. So regardless you have to do extra work. But with Cyprus, you actually get that for free, which is really nice. Another great feature. I love about Cyprus, so I'd like to show you guys how that works. And really, um, let's just write a test right now, all the test in our test suite past, So let's just go ahead and write a test that, um, actually failed. So we'll write a test that fails on purpose. So let's go ahead and creating new test here and I'm going to say should fail and create video and screenshots. Okay, So what we want to say is, let's just take away all this stuff here. I will just leave one line. And what that line says is we want to make things fail. So we'll just say that, um, sided get data sigh. So for the value of this gate, Asai attributes will just give it some garbage or something. Nonsense. So it goes that says that. Is that so? Now it says this, um, Cyprus is going to try to locate this element with the value um, that zed and issued exist on the dog. Obviously, it's not going to exist, which means the test is, um, going to fail. And now that since we learned how to run test ah, using headless, a browser electron Let's just go ahead and use the cypress run command. So npm let's actually save this first. Now that school NPM runs Cyprus run. This is what we set up in the previous section. So let's go ahead and run the tests now. Obviously, all of our test you passed, except the very last one that we just wrote so Let's wait for the ah test to start. I'm going to actually maximize the command prompt here within the visual studio code so we can see more of what's happening. Okay, so now this just are starting to run. Great. So as you can see exactly what we expect is happening One of the testes failing. So this is just saying the execution Cyprus run failed. Now, if you go scroll back to the top here, toe our test summary. It's as you It has tested everything past except the states. That's a shrewd fail and create video on screen shot. Here. You get your, um um yeah, your summary. Seven passing one failing. It tells you which test actually failed. Gives you some, gives us some information here, but not gonna We're not gonna We don't really care about this, but from what we are actually focusing on right now, what we hear it tells you test a past. So sorry. Total of a test seven past one failed. Um, and then I want to bring your attention to here. So here it says screenshots and then video. So it's saying it's actually created a screenshot in the full there. So this is actually our folder. Ah, that we have our code in on our test files and the video is actually in the same one. So what I like to show you is I'm going to open that folder here that we have our code in. So this is our main root directory here, which we have all over files and project files if you click on Cyprus. So this was the integration full there on our test is within here. So let's go one back. Let's go back to the root again, actually. And then if you click on Cyprus, this is our, ah main root directory for the project. So quick on Cyprus now, you might not have seen this before because all of our tests were passing, so you might not have seen the full. They're called Screenshots and then a folder called videos. But if you go ahead and click videos, Cyprus actually again, another great thing about Cyprus abstracts that's complexity away from you. So you don't have to worry about these things in your test set up or test um turned down or test the test itself in general. So it just took the video for you from the test, so it captured the test that was running. It captured everything within that test. So let's go ahead and run that. So now you'll see. Ah, what's happening within that test? So this is just capturing the video of the Ah browser Chrome browser that was used to run all the tests. And this is the last test that's currently running and filled, and that's it for the video. And then if you go back one and we'll go to screenshot and let's open this up. And as you can see here, it took a screenshot on the step that actually failed. So it ran all the tests, and then it was here. It's we was running the chute, fail and create video. And then it says, assert expected data dash size that that that it couldn't find that. So the test fails and a screenshot is taken so that screenshot that the video captures the entire test run. But the screenshot is only from the step that the last step where the actual test execution failed. So if you just wanted to quickly don't look it code and just see hey What's going on? Um, you come in the morning. You look at the test, you look at the screen shot. Hey, what's going on without even having to look at the solution? You can actually tell that, um, this is failed. So by just looking at this, you might think, OK, there's probably something wrong with this, um, Heidi or elemental class name or whatever you're using to detect that. And then you can jump in cordons going to navigate to that section of the coat and then figure out, go from there and figure out what's wrong. But this is an actual the screenshot helps you. Ah, as ah, let's say like a starting point or where you would start to actually start the troubleshooting process. So I hope that was very useful. This is the future. I use myself. It's very nice. You don't have to do anything. You get this for free. And I just showed you guys how to use it. So I hope you can actually leverage this within your you eye tests for the purpose of the score. So I'm just going to, um, go ahead and actually, um, common this line accord out So let's go ahead. I'm going to come that also you guys can see. But just though that I wanna later on, clean up this cold and zip it up and attach it to the section for you guys to see the finished product. I'm just going to comment that out, so let's go ahead. Ah, and then I'll just comment is, um, failing test out. So when you actually run the test suite, they should pass. And then you can just uncommon this. If you want to play around with the screenshot on the video or ah, if you just want to, you can just remove it and then also add your own Ah, failing tests to see what kind of screen show them videos it produces. But ah, yeah, There you have it. And, um, I hope this was useful to you guys and ah, see you in the next section. 25. Commonly used DOM operations: so far up to this point. Review some basic dom operations, such as clicking on buttons and typing into text fields. Um, to write our you i Cyprus tests. Now in this section, I like to cover some of the more commonly used, um, Dom operations so that they can help you interacting with Web elements while writing your you eye tests in Cyprus. Things such as, um, checking in on checking check boxes, double quaking, clearing text fields, selecting drop down menus and so on. Now moving forward in this section. I'm not going to, ah, change the court for application because I like to just write less cold and just focus more the concept of learning. Ah, more of the Dhamar visions about Cyprus is supposed to learning on now to write a you I test. So there are tons of other websites out there that you can use for practicing when you're writing your Cyprus and ah, the one I'm going to choose. Moving forward in this section is this website here. So it's https example that Cyprus that i o slash commands slash actions. If you like, you can pause the video for a sec type that into your browser and then, um, navigate to this website. Now there are two reasons that I want to use this website number one. All these elements that you see and hear are most likely static, and they won't change in the future if they do change well, by watching this video, you get the concept so you can basically practice those on any websites that you see out there on the Internet. Or you can just make your own and write tests against your own applications. And the number two reason is for each of these elements that you see on the right, you see a sample code for a different type of action on the left hand side, which makes your our lives very easy because we can just look at the examples and write our test and assertions. Thes examples cover both the actual action and the actual assertions, which could, which is very helpful. Um, for a lot of you out there if you're getting started with Cyprus, so going forward in this section, I'm going to use this website for writing our tests and ah, let's take a look at some of the dome operations 26. Clearing input fields: Let's go ahead and create a new test file here. Um, so we're not changing the existing test file. I'm going to copy the logging up that Specter Js. So go ahead and right click and copy. And then if you right click on the integration folder where this fall is in, you see the paste options or go ahead and pay, stud. And then let's go ahead and rename this file here. So, um, for this one Religious call it dumb dom ops dot Specter Js great. Now, um, let's go ahead. We don't need this stuff is clean up this fall. We don't need anything. Just leave that before each in here. Let's get rid of all these tests. I'll just leave one of the blocks here so that you don't have to type it. And ah, we wanted before each because we're going to navigate to that website I showed you in the previous lecture. Um, which is the, um, cypresses static Actions website. So what we want to do is we want to change this side visit before each test, so that before each test, if you're actually navigating to that website, so let's go ahead copy that. Okay, great. And ah. So for our first guest, let's Ah, what we want to cover is clearing the, um input. Ah, text fields. So imagine someone types something into Ah ah, input text field. And now we want to clear it, and then check that it's been clear. So if you go back to this website, you can see we can just use this email address. That's an input field. So we can just go ahead and use that. And now this website, since its examples, it has some pre typed quote for us. Um, so this makes our lives a lot easier. And we can just reuse all of this. So in here, let's go ahead and, um, change the ah test name. So let's say this test should clear the input text field, and this is world will see the clear action. So if you go back to the ah site here, So let's just go ahead and grab that, because this, um, input web element has this I d. Because anything you see on the right is the actual element. And anything you see on the left is the corresponding court for that web elements of the ideas are actually matching. So let's go ahead and grab this back to our code. Okay, so this one's aside that get the email Web element, and then it's going to type fake at email dot com and then should have value. Um ah, fake at so whatever the value is asserting and whatever value the user inputs or the test imports should match this. So what we want to do is actually ah, we don't need the assertion part. So let's actually I'm just going to call p this because we'll need it later, So let's leave that down here. What we want to do is we just want to type into the text field. So let's go ahead. It doesn't really matter what we're going to type, so let's type anything. So, um, you can just grab this fake here, Okay, So now and this is the end of our ah, first action. So we're going to type this into that field, and now we Ah, what's gonna happen is that input field is going to contain this tax. So now what we want to do is we actually want to clear that text so the way we do that, is it still the same one? So we need side that get action email. So let's go ahead. And the command for that is simply clear with brackets. And now we actually clear the input field. And now we want asserts so that we verified that the input field has been cleared. So the way we checked out is very simple. We get the element on, then we can just use this assertion here on we can get rid of this again. As you can see, I'm not typing any code. This is, like minimal because we can reuse all of this court. Um, that's provided to us by the example Space. So now the assertion is saying that get developed Web element and then when we inspecting it, it should have value. And since we've cleared it actually shouldn't have any value. So let's go ahead and delete that, and it should just be an empty string because we haven't done anything. So let's go ahead and save this. Now make sure just to double check, make sure that your servers running by running NPM run deaf or Note index R. J s make sure. Your servers running and then in here in your terminal, Within visual studio code. Go ahead and run NPM run Cyprus Open. And that should open Cypress Interactive mode. Okay, great. Let's collapse this examples. Fuller it. Ah, actually, yeah. There you go. Demo upstarts pecked a Dom upstart Specter Js So it picked up that file now. So if you go ahead and click on that, did you launch the browser and start running our test? I'm just going to close this, and there you go. So it navigated to that actions website. It type into the input field it clear that, and then it verified that the field is clear. Now, this happens really fast, so it's really hard to see. So I'm going to run this again so quick on that. And then if you guys watch here, you can see that it's actually running. That tests on typing very quickly and clearing very quickly. One more time. There you have it. So this is for clearing input fields 27. Double click action: in this lecture, we're going to cover the double click Dom operation, which is very easy, is just like click, but it's just double clicking. So if you go to the action's website here, and if you, um, scroll down Ah, one of these elements here, this one the one that says double quick. As you can see, that's the action. So if you can see if if I double quick here, this box is currently not creditable. So as soon as I double click, this is going to become creditable, and then you can type in your text. So really, the ah, the purpose of this lecture is really to learn about double quick here so we can use this one on. That should be easy. And I'm going to, um, go ahead and use this. Um, actually, first, let's go back into our court. Let's copy this block, and then let's get rid of these factions and then so should clear the import we're going to rename this. Tests should double click be element. Okay, Now back into our browser, you can actually grab this thing here the first line because this dot action National is the idea of this, um elements. Or let's go ahead and use that again. This is really ah more Taylor tour learning. The concepts are not really typing because we already covered most of these in the previous sections. So what do you want to do? Is, um this is what's provided by the example code, so it's going to get that element. It's going to double quick. So this is really the action we want to cover in this lecture. So it's dot de bl quick with rockets. And then here's the assertion. So in the assertion the default one they provide for us, it says it shouldn't be visible. Um, you can also go further and check one more thing because actually, when you double click if you go back to the website if you double click, there's no texting here. So that's another assertion we can do. And one thing, um, if you have a North authority with Cyprus and assertions is that you can change the assertions together so you can check for multiple things in just one line. So here we double clicking the element, and then it shouldn't be visible. And also now, let's go ahead and add hours, so we can just say dot should. And so since we know it's not going to contain any tax, we can just say have value and then that should be an empty strength. So just like the one we did here, Ah, on the top, so on, that's all there is to it. So let's go ahead and save, and then this is going to rerun the tests. And as you can see that this is added and it's double click. This is our chrome in running inside Cyprus interactive mode. As you can see, it's double clicked it and then it's also checked that it's not visible. And then ana also that, um, it doesn't contain any text because we haven't typed anything. It So this is it for a double quick 28. Checking and un-checking checkbox elements: in this lecture will cover checking in on checking the check box Web element. So let's go ahead to the action's website here. And if you scroll down, you should see a set of, ah web elements already created for us. So these ones here. So what I'm gonna do is I'm just If you hover over this and write quake, I'm using the chrome browser. And if you select, um, inspect, you can see that, um, school don't You can see that. Um, first of all, there's a div with the class name action dash check boxes, which wraps the 1st 3 check boxes here on the left hand side. So if I hover over that, you can see that the highlights that in left outside if I go down one that's the day for the very first check box, this one over here. And then you'll see that. And then if you expand this label here, you can see that the first check box is an input of type check box, and the value is check box one. So let's go ahead and say that for our tests. We want to go ahead and check this check box the very first check box, and then we'll look at the checking multiple check boxes here. So I'm going to cause the inspect tool now. And ah, right beside we have some example code. So, as you can see, this was the class name we just looked at in the div. That wraps the 1st 3 Um, so, first of all, let's go back in our cold. Let's create a new test. Skopje, the last it block on making you test here. So I'll call this, um, should check the first check box. Let's get rather the court are quote inside the tests block here. Let's go back. So what we want to do is let's go ahead and grab this up to this point here because we don't need the rest for now. And then Ah, back into our code. You wanna pace that? And Ah, what we want to do is because, um, this Dave here contains multiple check boxes. We wanna use the value which was check box one. As you saw in the Inspector to actually tell Cyprus which one of the three to actually select. So we want the 1st 1 And if you go back to the website here. You can see that, um, the actual the operation is called dot check brackets. So what we can do is over here. We're going to go use the verb dot check, and then we can actually use the value. Which waas check box one. I believe that was the value. We can go back and double check here. So again, if you right, click that if you go inspect and if he go down here. Yeah, check box one. So, actually, let's go ahead and copy that Back into our cord. And there you go. So now, actually, before we do any assertions, let me go ahead and run this tests or save the file. The test should rerun. And there you go. If you can see inside the chrome inside Cyprus, you can actually see the 1st 1 is checked and not the 2nd 1 or the 3rd 1 but the one that has the value. Even the text even says check box one has value check box one. The 3rd 1 has three. So now that we check that and now we want to verify that it is checked. So how do we do. That assertion is very easy. And we can just change assertion to this, so we can just say dot Should and then be dark checked. It's that simple. So let's go ahead and save that run the test. And there you are. Test passes are check boxes, um, checked and that the Cyprus verified the assertion in the assertion that it is checked. Now, if you want it, if you wanna go ahead and ah, let's say you want to check the 1st 1 and the 2nd 1 within your test. So you're actually doing multiple check boxes within one in one goal? What you can do is, um, you can just put the values here so you can just see simply do that. If you go back into the website here, you can see that in here they have a multiple check box action, and then they just It's a comma separated list, so you can just add the any check box you want to check. You can just add it to this array as long as it is within that div. And then you can just add keep a pending the check boxes you want to check in one go. So in our case, what we can do is we can just go ahead and, um, I can just add a comma here and then go check box three. So now, if I just save this, you can see that the test are running. And if you if you scroll up to the Czech section here, you can see that the 1st 1 and the 3rd 1 are actually checked, which is correct on checking a check box is very similar to, um, checking a check box. So let's go ahead and ready. Test for that. Back into our code. Let's go ahead and copy the check. Ah, it test block here and then we'll say should uncheck the first check box. Now, if you go back into our page here, first of all, this one isn't really, um, checked. So one thing we can do is if you scroll down. But there's uncheck section so you can just go ahead and, um, go ahead and grab the I d. For this element like we did for the inspector will and then go and ah, just to ah uncheck in there. Or you can just use the same check box here in the Czech section. You can check it and then on check it and then assert that it is on track. So either way works. Whichever you're more comfortable with. Come in on the in the Czech second, we have a check box that is not checked to begin with an Indian check section. We have a check box that's checked, um, initially to begin with. So whichever you're like, go ahead and use that. I'm going to check this and then on check it and then doing assert so back into our cord, I should uncheck the first check box. So we still need ah ah et for grabbing the first check box element here. So we're going to check it. Um, every I don't really need this. Um, Well, actually, what we can do is we can leave that, and then we can just say dot check. And then, ah, it asserts that issue retract. And then next thing we can do is, um go ahead. And you are so in the first in the in the first Ah, action here in the States where we're going to do is we're going to check the check box and then assert that were verified. That is checked. Then what we're going to do is we're going to uncheck it and verify that it's uncheck so same thing, Except the only difference here, um, is, instead of using the check function, we're going to use uncheck function, so it works the same way. I'm just going to remove this, um, three here because we're only dealing with Chuck Box one. And then for assertion, we're just going to say should and then instead of be checked, we're going to say should not dot be checked. So go ahead and save that and then let the test run. And there you go. So as you can see that, that's passed through. Don't check the first check box initially checked it, then it unchecked it. And then it verified that its on check I can rerun the test again, but it's happened so quickly that it's really hard to see here. So, as you can see, this is the check box that we're dealing with. So that's, uh, we've now covered checking in on checking check boxes 29. Radio button selection: in this lecture will cover selecting the radio button element, which is very similar to checking attract box. So let's go ahead and write a test for it. So I'm just going to reuse this eight block here. Um, I don't need any others, so let's get rid of that. Start with an empty test on. Let's change the name to something proper. Um, actually, before we do that, let's go back to the ah page here. So, as you can see, um, under the check section in our actions page Ah, for Cyprus examples, where you can see is on the bottom. Here you have an array of three radio buttons and just like the check boxes, let's just go ahead. And for the sake of this test, saying we want to go ahead and select the first radio button. And so just like the check box has Valley Check box one. The radio has a value of Radio one and ah, so let's go back into our test so should select the first radio. But in Onda, if you go back to the page, um, you can actually reuse this cold here, which says, um, there's a common here saying Accepts value argument. So if you just go ahead and, um grab this example piece of code here and put it in our tests. So if you look at this is now is trying to grab the action radio. So again, just like we inspected the check box in the previous lecture. If you go ahead in our website in the in this website example actions website by Cyprus, if you inspect this element, you can see that it is, um, wrapped in a div with a class name action radios. And then we're looking for the web element of type radio. And then we want to select the one That's, um, has the value radio one. So note that one thing I'd like to highlight here note that for selecting radios were using the same the same function dot check which we used over here for check boxes. So that's that. And then, um, the only thing really different is the type here is radio. So what we're doing here is really grabbing the ah first radio button. Ah, in the list of three here on we actually checking it using this dot Check on. Then we're asserting that it should be checked. So this is just verifying that it is properly checked. So let's go ahead. Let's save this, that we run the tests and there you go. If you scroll up here, you can see that this radio one has value. Radio one. Ah, element is selected. So this is how easy it is to select a radio button. 30. Dropdown menu selection: in this lecture will cover selecting an option from a drop down. So if you go back to our actions example website. If you scroll down, you should see this example. Drop down menu element here. So, um, as you can see, it's just a drop down with three options here, which are the different kind of fruits. So let's great quake in this area here and go inspect. And then, as you can see here, there is, um, the actual class that it's it's wrapped in a form. And then it's called. There's another class of scientific called action that select. So if you actually go ahead and expand that you can see it's a select element with three option, um, elements here. So, as you can see, each option has a value f r dash apple, and then the text, the actual text or label apples and then therefore oranges. Oranges at four bananas. Bananas. But, um, one cool thing about selecting him is you can either choose to select them by the value, or you can select them by text over example On the left hand side here. If you, um, let me just scroll to the um, which one is for dropped down? There we go. So this one here, if he Ah, look at this one and you can see that the first example called here it's actually selecting it by the tax year, which is Ah, this guy over here. And then you can also choose to multi select multiple by tax. Or you can also select the options from the select element using the value. So here is no using a Texas using the value fr dash, whatever the fruit is, which is this one over here. So you can do either, whichever you like in your tests. So for us, let's just go ahead and do this 1st 1 here. So we're going to select Apple from this drop down menu here. So let's go ahead. I'm going to cause the inspector will. Now, um, let's go ahead and grab the first plot first line here. So back into our test, actually, let me go It First of all, let me go ahead and create a new test. So let's copy the last one. Get rid of these so we'll name this properly should select the first option from the drop down Okay, now back into this, we can actually select this, um, first example. Quote back into our code. Here. There you go. So now, if you actually select this, um, let's go ahead. I'm just gonna Are we not going to do any assertions yet? Let's just save this and run the test, See what happens. Okay. As you can see, this was previously select an option. But now it's said to Apple, So it was selected fruit, but now it's apples is actually selected, so the actual dom operation is done correctly. So now all we have to do, really is, um, doing assertion to verify that the test is actually passing on checking for the right thing in our test. So one way we can do this is very easy. So we can just say dot this element here that we just, um, selected for Apple. We can just say should and then ah, here we can just say contain and then the text apple. There we go. That's all we really need. So let's go ahead and save this on the test should rerun. And there you go. So the test is added. It's passing apples. Selected and verified that this actually verified that apple text is now in here or it contains this text. Um, just ah, no much else here on, um, select menu. The only thing I just wanted to highlight again is you can select by text, which is this What this example doing or you can select by value, which is what this example do it also want. Everything I want to highlight is you can also we will write a test for it. But you can, ah select multiple things here from the drop down by using the actions like multiple and in selecting different ones. And just it's just ah comma separated array here. Same thing. You can do the exact same thing selecting multiple using values. But it's just coma, separated, array of the things you want to select. And ah, that's all I have for selecting options from the drop down hope that was helpful 31. Uploading files and attachments: I just wanted to take a couple of minutes and talk about, um, how to upload files or attachments using Cyprus within the U. I test. Ah, because I got this question as from a few students in the course, and unfortunately, there isn't any easy way off uploading files or attachments using Cyprus at this time. Cyprus does not have this capability at the moment, so ah, one way that I can think of that you can actually accomplish this is using ah, ap I call. So use an A P. I call. Ah, I there from you know, in your test set up or within ah in the middle of your tests to actually make the call and upload an image or an attachment before ah doing other dom operations or assertions. So that's one way using an A P I call to upload your attachments. And the second way is if you actually Google's Cypress Road map and they'll be the first link here in the Cyprus documentation. Um, this is something that Cyprus is aware of, and it sounds like they're currently working on this feature at the moment, although it's not available yet. I few scroll down here under the ah test runner. It's called native events. So this one is a Z can see the status is work in progress and it hasn't been finished. But once this finishes, you can go ahead and use one of these native events. You can actually go ahead and use that to upload files and documents within your Cyprus You I test. But until then, um, there's no much you can really do other than using a P eyes. But I would just monitor this page and with the hopefully with ah within the near future Cyprus ah, finishes implementing this, um functionality so that you can actually use that. And although it might not be, including the scores in the future is very easy. All you have to do is once the features finished, Cyprus will definitely include examples, um, on how to use that native event to upload files and attachments, or you can just google it and looking for examples online. Thank you 32. Elements with no IDs or Classes: in this lecture, I like to cover interacting with Web elements that don't have any ideas or classes assigned to them. Now, um, any of you y framework, such a Cyprus or selenium? They highly recommend that you work with elements that are very unique ideas because thes make your tests less flaky on. The reason behind that is that sometimes Thea, if you just have regular ideas or no ideas assigned to your Web elements as the implementation change, um, the your test your you I test will break. And the reason for that is it won't be able to locate that element anymore because something has changed, even though the functionality of your, um, ah component or application or the workflow and toe on work for within your Web application hasn't really changed and everything is the same. It's a very minor change into implementation can easily break your your eye test, which is what you don't want. You want your your eye test to be as less flaky as possible. However, sometimes you don't have control over, um, the, um source code or, ah, you're not able to ask the developers to actually add in the I D and in that case ah, what I recommend There's really two options. If you still want to go ahead and write you, I test for those cases that have elements with no I d s or any identifies that he can uniquely ah, find those on the DOB. Really? What you can do is you can try to, ah, drill down into the dumb and find those elements yourself. Or as we covered earlier in the previous sections, you can use the Cyprus inspect tool to actually see what it can actually generate for you in terms off locator. So in this lecture, I like to me Ah, actually go through this concept very quickly by doing a very quick demo for you guys. So let's go ahead. And, um, what I want to do is, um let's go ahead and ah in the public folder here. Ah, we're going to create a new file. So let's go ahead and just copy the log out html and then right, quick public paste. So now we actually have Ah, whatever that was inside La Galleria. Shamel is inside this new file. So let's rename this to know I ds thought HTM. Oh, and ah, let's just, um, delete everything from here because we don't need ah, anything we want a very bare born html Um, webpage here. So the title logged out love. I am just gonna changes to know I ds we don't even need that. But let's just keep it and then, ah, let's just get rid off this Ah, class and the Dev. And then let's get rid of this Etch one here. So let's save this. As you can see, it's a very, very bare Boenisch GMO webpage. Now, um, let's go ahead if you Google, um, check box HTM Oh, let's go ahead and ah, the 1st 1 is from W three schools. So let's go ahead and select that And over here, click on, try it yourself. Let's grab this court here. Ah, this is just for demonstration purposes only. So I just wanna go ahead and take out everything here. We don't need the actual form. We just want three check boxes into our HTML so we don't need to submit. So for each input for each check box, we have three so we can keep the type we definitely want to remove the name. We want to remove the value. And this is just the label. So we can just have the ah label here. So something for the 2nd 1 and 3rd 1 Okay, great. So we have Ah, three. Ah, you have a div that contains three check boxes and they don't have. As you can see, it only has the type check box and the label so they don't have any classes or I ds assigned to them. So now let's go into our server index dot Js. Actually, let's go ahead and stop our server here. Let's going to ah, back into the cold index dot Js Let's grab the first get here, which has the default path. What we want to do is go here and for the route. You want to say No. I ds and then we want to return instead of Index Oshima. We want to return no ideas dot html. So now let's go ahead and start our server backup and PM run deaf Great service running eso back in the browser. Let's navigate to that side local those 3000 and then slash No id's perfect. So this is what I want to use to actually demonstrate Thea whole interaction with the noi these to you guys. So, as you can see, we have HTM a very simple Ishimoto page with three check boxes that you can just go ahead and check or uncheck these and let's Now, um, actually go ahead on ah, in Cyprus will see if you can actually write a test that is able to check in on check these checked boxes. So back into the court, Um, now, I would like to create Leave everything the same and, ah, so in the integration folder here, Um, actually, let's go ahead and copy the Dom Ops file test file here. So copy. Right. Click the integration folder paste. And then, um, let's go with that. Rename this file. So I'm going to say no, I ds that spect r j s perfect. And then, really, we don't really need any of this. Um, I just I'm going to delete more studies. Great. And, um, actually, so let me keep one of the it's blocks so that we can work with that. So just undoing and removing that. Okay, great. So now we have a it block and I'm going to put this, um, side of visit here and then we don't need before each great. So we have a very simple, um, page here. Now we want to change the URL in our test to actually let me bring this stone so it's easier for you guys. See? So you want to change this to the U R L? We have ah, for our new page. So that's http golden slice slash local host Colon 3000 full and no ID's. So let's go ahead and save this. And ah, cyber should run the test. Ah, let's see what happens. Okay, great. So its able to navigate to our ah webpage with three check boxes now, because thes don't have any check boxes. Ah, one thing you can use, um, as recovering in the previous lecture is the Cyprus inspector too. So what you can do is if you hover over this, you can see that it gives you the body. Ah, which wraps this whole thing here or if you just hover over individual, um, check box says it'll try. Sufferers will try and drill down the dome and give you whatever it can so that you can actually interact with that element on the dock. So if I select the 1st 1 here, as you can see, this will change. So if I select the first check box, it changed to this which is and child one. So this is what Cyprus can try and see if you can actually find this element on the dumb. So let's go ahead and copy that. So in our tests, let's say we want to select that first check box. So all you have to do is just paste that and then go dark, check and then let's go ahead and save this and see if Cypress is able to check it. And yes, as you can see, Cyprus was able to find this element, and ah was able to check it. We can do the same thing for second and third. So, like if he hover over the 2nd 1 of the click, it's as inthe child three. Ah, and the This one is the 3rd 1 is end child five. So let's say we want to select or check the ah third check box. So what we can do is we can just copy that back into the court. Same thing it can just paste and then do dot check and save that Run the test again. And as you can see, that have been really fast. Let me real in the test again. And then, as you can see, the 1st 1 on the 3rd 1 is actually checked. So it is doing what we're expecting. However, as you can see, these ideas are very, very tedious here, um, to work with And this is something you either have to be able to do yourself and type this and by drilling down the dom, or you can have Cyprus do it. But then again, um, coming back to the earlier point, this is against best practices and they'll make your test flaky because if any of these change, or if you had more dom elements to the page, it could actually, um, rendered these ideas useless. Onda will make your test flaky, so I hope that was helpful 33. Limitations and Tradeoffs: now that you're nearing the end of the course, just wanted to go through some of the, um, cypress trade offs and limitations. Now Cyprus overall is a great tool, and I use it myself within my projects. And I highly recommend it to other people to, um, try to integrate that if it meets your needs, because it's a great tool for writing and when Ah, you I test for your application. However, just like any other tool or framework, there are this advantages or limitations on what he can do. And let's just go through some of them now, the slide you're seeing in front of you. This is taken straight from the official Cyprus websites where you can find this there as well. So I'd like to cover these quickly and the first ones that Cyprus is not a general purpose automation tool. So what this means is that the people behind Cyprus, they really focused on just doing one thing well and that one thing being writing and twin test or writing and when you I test so Cyprus is really great at that, and you saw that throughout this course, so doing in terms of doing that. It's doing a great job. But however, let's say if you wanted to use a framework or you wanted to write performance tests, Cyprus is not a tool for that. So that's all they're saying there now for the 2nd 1 it says Cyprus commands run inside of a browser. Ah, what this really means is that if you can ah, if you can imagine, your ah test code is actually being evaluated. Ah, at runtime inside the browser. And ah, so you do have access to all These are dom elements. But what This means that the people who have created Cyprus will always just Onley support JavaScript in terms of supporter languages and ah, the 3rd 1 It says there will never be support for multiple browser taps, so that's Ah, easy one. So if you have one browser, if you launch a browser and you running your test and you want to check things or perform actions on different browser tabs within the same browser, Cyprus doesn't let you do that. And then the 4th 1 here, it says you cannot use Cyprus to drive two browsers at the same time, so I actually don't like this myself. Um I mean, I'm OK with Cyprus not having that, because I don't like multiple browsers running at the same time while running you. I test in selenium. You have this, Ah, thing called selenium grid, which does exactly that. So, for example, you can run. Um, it's mainly used for paralyzing tests. And you can, for example, have five browsers launch at the same time at each running a different test. This speeds up your execution time. However, I noticed that they could You could get into really weird, flaky situations where, for example, from my experience, I've experienced things like we erased conditions where two browsers are trying to race for gaining focus, to type into an input field at the same time for two different tests. So I don't actually mind this, but just to let you guys know, Cyprus doesn't let you, um, Dr to browsers at the same time on DA, each test is bound to a single origen. So this one is easy. For example, Um, if in your one of your tests K says you start by saying side that visit www dot google dot com within that same test later on in the court. You can't do something like side that. Visit www dot amazon dot com Cyprus One day you do that. So these are the permanent trade offs that are mentioned on the Cyprus website on their official website, which you can find their. And this one. These trade offs are just based on my personal experience using Cyprus. So the 1st 1 is, um, installing and set up time in the continuous delivery pipeline. So if you actually have that, um, you have that continues delivery model where you have multiple pipelines and you check in court and it builds and it runs tests. Now imagine what if if the pipeline that actually is running the, um your ah, you i n toe and test is after each test, it just tears down and then comes back up again. So it's just completely wiped clean, and the environment is toward down. And then for the next test run is brought back up again. So in that case, what you have to do is you actually have to run the command and PM run. Um, if you're completely turning down the environment, you have to run the command. NPM installed Cyprus and NPM. Ah, Cyprus. Um, open and all of those actually take time. So for the first time, if you're doing this every time on every court check in this could sort of delay your execution. Ah, by a lot. So that's one thing to keep in wine. And the second thing I notice is that doesn't work with Paige object models. So if you're familiar with that concept, that's fine. You can't really use that where you have different classes, and then you can change them to create a test with Cyprus. You can't really do that. So if you are looking for something like that, this might not be the best tool for you, But other than that, as mentioned, Cyprus is a great tool. I highly would recommend that myself to everyone, um, to try and integrated within your projects if you need to write and toe and test and you eye tests and um, it is free. So that's the ah, that's one of the great advantages. They also have paid ah, versions where you can actually log in and check out dashboard. And there's this step pricing and the pricing model is on their website, so you can check that out. And I hope this sort of helps you, um, with the decision making or whether you'd like to integrate it into your projects or not. Thanks for watching. 34. Recap of the Course: we are now at the end of the course. I would like to say Ah, thank you so much, guys, for taking the course and following up to this point before we finish off. I like to do a quick recap of what we learned and what we covered. So first off we talked about what It's Cyprus and what it's good for then, Ah, before we actually went ahead. Then ah installed and set up Cyprus. And before writing our tests, we created a low many application. Um, that had, ah, front end and back end. Ah, we created this application with customized I DS on the dom elements so that ciphers can actually use this when, while running the tests. And we talked about how to run this application Ah, so that the test can actually consume it when the test are running, then recovered Cyprus installation and set up. Then we started writing some test and I walked you guys through some basic ah assertions. We went over the most commonly used one. So I'm sure that's good enough for you guys to go ahead and get started on your projects. And then whenever you need mawr or if you need more info, you can always shake the documentation on the official Cyprus website and ah, then we could do with a little bit of coverage on waits and delays, how Cyprus handles them. And if you wanted to put in a wait, what the syntax for that is, then recovered the two different ways of running the test. If you're implementing test for the first time writing new test on your local or if you're troubleshooting test on your local, you would write Run. You would use Cyprus open. And if you're just running your test Headless Lee in the, um, in your pipelines or in the continuous delivery model, then he would just use and ah, Cyprus run, come in. We covered both, um, in the previous sections, and then we finished off by covering some of the trade offs and limitations off Cyprus. Now, just to summarize, Cyprus is a great tool for your for your ah applications. If you wanna integrate you i n 20 tests. So I highly suggest I use it myself in my projects if you ah, I highly recommend you guys use it. If you do need to write you. I test, Remember, if you do need to. If not, then there's no need to integrate in your projects on the the community behind it is great . It is free, which is one of the huge advantages. And there's also a paid version. But you can just refer to Cyprus official, um, website to see what things you get with, um with the paid version. Um, and then that will help you. There should be enough information there to help you decide which version. Ah, better suits your needs and Ah, yeah, again. Thank you so much, guys, For, um, taking the course. What I'm going to do is just like I did in the middle of the course after we finish writing are Ah, um any application for Ah, you eye tests. I'm going to clean up and zip up the ah ah. Finalized cold. I'm going to call it called Dash Finished. Just like we did called dash before For the involved during the progress of the ah, in the middle of the course. So I'm gonna zip that up attached to you than me. So go ahead and look for that. If you want to look at the finish coat. And Ah, please check out my other courses on you, Demi. And I hope you guys, um, learn something today and hoping to see you guys on my next course. Thank you. And have a great day.