🎞️ Videos → Modern JavaScript Testing with Cypress: Beyond the Basics

Introduction and Speaker Background0:00

Hello guys.

I hope this is translated correctly. สวัสดีค่ะ My name is Louis Yoong. I'm from Malaysia, Penang. I'm not sure if you all heard about Penang before.

I'm a software developer from the RPS Group. I'm also the Cypress Ambassador in the group. Previously, I was also the Google Developer Group Georgetown leader. This is a little introduction about myself. Today we will learn about modern JavaScript testing with Cypress, beyond the basics. This talk is very suitable for juniors, or if you never heard about Cypress before and want to learn about test cases. Let me introduce my background as a software developer.

My company is a US company. We normally use custom floating LiDar to protect species around the world. The species we protect include dolphins, whales,

and turtles in the Indian, Pacific, and Atlantic Oceans. We also use new technology like AI to protect

species observations. We're not just using vessels for tracking, but also using drones. You can imagine that we need to handle a lot of data daily. We need to ensure the data is correct for users

and clients to reduce bugs. That's why we need Cypress.

Cypress: End-to-End Testing with JavaScript1:54

Cypress is for test cases and front-end testing

using JavaScript. We can use JavaScript to write, run, and debug. As I mentioned, we have Cypress end-to-end testing tools and component testing tools. Today we'll focus more on end-to-end testing. End-to-end testing is more basic and easier for you to understand. We can easily preview in the browser after installation, with no complicated setup. It's very user-friendly and easy to start immediately after installation. It's also easy to integrate with CI/CD pipelines. It automates test executions tools like Azure, GitHub,

GitLab, and AWS.

Installing and Setting Up Cypress2:49

Before you install, make sure your Node version is 16+ and NPM version is 9+.

After that, just run these two commands: `𝚗𝚙𝚖 𝚒𝚗𝚜𝚝𝚊𝚕𝚕 𝚌𝚢𝚙𝚛𝚎𝚜𝚜` in your existing project, and `𝚗𝚙𝚡 𝚌𝚢𝚙𝚛𝚎𝚜𝚜 𝚘𝚙𝚎𝚗`.

Cypress UI Demo and Example Specs3:12

Actually, there's a video.

Okay, is something like that. This is the video previously I record. After you open, you will show some UI something like this. They will pop up the modal. They have something like a scaffold example spec and create a new spec. Because now I want you all more understanding what is the test case first, what is Cypress first, so we can just select the scaffold example. Cypress will give you a list of examples how we can write the test case even you don't have any experience. Okay, so something like that, you just tick all the configuration files, then click continue. And this one they will detect by your laptop. My laptop just has Google Chrome.

So if you have Firefox, they will show Firefox.

So it depends on what kind of environment and browser you need to test. But now I'm just using Google Chrome, then I just click Google Chrome and click start E2E testing in Google Chrome.

Understanding the Cypress Dashboard4:17

E2E means end-to-end, okay?

So you will see that they will pop up something over here. Is showing another browser in your dock. After that, you will see they show you a list of example files. Then you just click this. Okay, so this is some record video previously I record before. So they will show you how we can start. This is the to-do. And how Cypress will automatically read the test case.

This is a list of examples how we can write very simple common test cases like using 𝚝𝚢𝚙𝚎, 𝚏𝚘𝚌𝚞𝚜, 𝚌𝚕𝚒𝚌𝚔, how we can check box, how we can select things, how we can trigger, and how we can scroll to. So this is one of the examples. Later our hands-on will show you the basics how we can start that. Before we start, let me try to explain to you

this is the Cypress dashboard when you install, you will see that. So this is the test status menu and this is the URL. It depends on your local machines. And we have the viewport sizing also. We can test a specified viewport. Like sometimes we need to test the responsive or maybe we test the bigger screen or like 1440, something like that.

So it depends on you. And so this is your app view and this one is your command log.

Basic Cypress Syntax and Test Case Structure5:52

So are you ready?

Okay, yeah, I quite like that. Moo Deng is very famous in Thailand right now. Yeah, I hope I can visit that. So this is the very simple Cypress syntax. I think you all need to know and very easy because it's English like 𝚌𝚢.𝚟𝚒𝚜𝚒𝚝 is visit the URL. 𝚌𝚢.𝚝𝚢𝚙𝚎 is typing something. Like 𝚍𝚋𝚕𝚌𝚕𝚒𝚌𝚔 is double click the thing, like 𝚙𝚊𝚞𝚜𝚎, like 𝚐𝚎𝚝, like 𝚌𝚘𝚗𝚝𝚊𝚒𝚗𝚜, 𝚎𝚊𝚌𝚑. I think if you all have background about programming language, this is very easy for you all to start it. So this is one of the examples how we write the test case.

So we need to describe. This is the definitions of Cypress. And also this is the test case scenario. What kind of scenario? We can create a list of scenarios. It depends what kind of situations. And also, the syntax is we need to visit this URL.

Because normally we will run on a local machine. So this is one of the examples. So now, let's follow me.

Demo: Building a Login Page Test7:01

We try to do the login page. So give me a second. I try to show you the code.

Okay, too small. Let me zoom a little bit.

So this is very simple and because I try to hard code everything. So it's very simple React Next.js. So Cypress is not just used for React or Angular or you can just use pure HTML also, but I try using React and Next.js because my daily is using this. So after you install, you will go to your local file.

So my login file is my login and my correct password's name is what? Because this is just the UI. I want you all to know that. So as usual, because we have the username, we have the input, and we have the password. So in Cypress how we gonna do is you will see here

have the Cypress file. I hope you all are seeing clear. Then after E2E, you can create a new folder. It depends on you. Because my habit is I try to do something the folder is called demo, then I just show in demo. Then you just create a new file called login.cy.js. Then after that, we can do some scenario over here. So let me try to hide my code first.

Running Cypress Tests and Analyzing Results8:32

Okay, so let's see this test case scenario one. So we have two cases here. My first scenario is I want to test incorrect credentials. Like imagine sometimes the user type is not correct email and also the password is not correct. So what kind of error messages I expect to show up? So let's see. Like what I mentioned that, okay, let me try to

Okay, give me a second.

Normally, you all just try to ignore others first, okay? So, yeah, just this one. Then we npm Cypress open, then will pop up something like this. Then just click E2E Testing. So, they will pop up another Chrome. This is previous. Try to ignore that, okay? So, they will show us something like that. So, this is the UI, the overall is in the Cypress.

So, just now, our folder is called 𝚕𝚘𝚐𝚒𝚗.𝚌𝚢.𝚓𝚜, right? So, we can just click over here. You can see the scenario is running now. So, means this test case is correct. You will see the green tick over here. Okay, I hope you all seeing clear, okay? So, you will see that the username is wrong.

The password is wrong. That's why this credential, this scenario and incorrect credential is this is what we expect. So, the test case is correct. So, how about another second test case?

Okay. So, imagine the second one is the user just direct click the submit button. So, the type, you can see, okay, I try to explain

to you all. The 𝚌𝚢.𝚐𝚎𝚝, they will get the input ID. So, what kind of the input ID? The input ID is we can set over here. So, this is the input ID. This is one of the way we can detect the input. So, we can detect the input over here. So, we can just like this. Then type the incorrect password.

So, you can see the incorrect password. And also, they will find the submit button. So, this is the submit button. So, they will find the submit button. And this is what we expect the result. And they will still continue stay on the login page because this is what we expect, right?

Best Practices for Element Selectors: data-cy and data-testId10:54

So, the second scenario, you can see the second scenario is we should show the required input

because the user didn't do any actions. Let's see the second ones. We can refresh again. So, you can see, yep. This test case is correct also because we expect is we need both the required is showing out.

So, how about the last one?

The last one, test case three is should successful

and with the correct credentials. So, they will go to the base URL. Okay, so this is one of the example. It's run very fast, okay? So, yeah, every time you just save on your code, they will run very fast. So, you can see, yeah, this is the correct credentials. We can check that. Okay, yeah, the type, you can see they type the username is over here, and they type the password,

then they will click the submit button and everything is correct. So, yeah, this is what we expected. So, this is the test case.

Is very simple, right? Yeah. So, let's go to the slide.

Okay. So, like what I mentioned that we have two type of the test case we can doing. One is the E2E and another one is component testing. Component testing, we can doing is more like the component button or the component modal. You all can test about that. Like make sure the modal was showing out or not. So, but now, we just focus on the E2E testing first. So, like what I mentioned, right? The best practice for the element selector is like just now we are using we are detect by the input ID, we are detect by the input type. So, sometimes the input ID, we will change it, and sometimes the class name, we will change it. So, what is the best practice is we try to use

the data-cy and this one, you can rename by yourself

or data-testId. These two is I recommend you all because also,

we impossible we will change the data-cy or data-testId. But sometimes if you do the but I think less people doing pure HTML right now. But if you do a pure HTML, sometimes you will change the ID also. So, this one is impossible you will change because you write the test case already. But I will show you later on why we were doing that, but try to remember data-cy and data-testId, okay?

So, this is another example. So, how we can add over here, but this is the login just now we testing one, right? So, this is another one. So, you can see just now we are okay.

So, just now, we are 𝚌𝚢.𝚐𝚎𝚝 the input ID, right?

But the best practice is we can just direct like this. data-testId, the user input. So, how we can just add this the data-testId? So, actually, data-testId and data-cy is both is working also. It depends on your habit, but my habit is I know this test ID, okay? I know this page have test case already, okay? So, we just add on over here. If you change anything over here, is not conflict with the ID or your class name. So, is more your code is more clean. Okay, so this is what I suggest it. So, after that, you can see we can check this test

case over here, the login with the data-testId. Everything is look same, but I try to show to you

why we need to use that. Okay. If you click this selector, you click this selector here, you are very easy to detect that. Oh, yeah, this is the input username data-testId and this is the username password. And this one is the submit button. Okay, so is more easy to recognize that, oh, yeah, this button is what, another button is what. Okay, this input is what, okay? So, this is the best way. And also later, I will show you that the most useful way why we need to use that, but this I will put on the behind.

Handling Data in Cypress Tests: Mapbox Example15:25

So, let's go through back the slide first.

Okay. So, now, because my daily job is I need to handle a lot of the data. You imagine, I always need to see the map and need see little the species over here. So, now, we try to check is more other way part.

So, okay. So, this is how we can check a list of the data. Is check the data is written correct or not. Okay, I hope you all see the thing clear. So, normally, I was using the Mapbox, okay?

And also Deck.gl. So, I just remain that same. So, like now, because I want you all more clear about what is the returning data, so I didn't use the API yet. So, this is how I hardcoded the data for you all temporary know first. So, like now, we have the few observation data. So, we have the turtles, we have the dolphins, and we have the whales. So, each observations written different color. So, that's why you will see in the UI here.

Okay. So you will see in the UI here, we have different color.

Different color and when you hold the tooltip, it's showing different things.

Then this is I think you all are quite familiar with, it's just a record and how we can load the data out.

Writing Test Cases for Data Validation17:09

So when we write the test case,

we need to do something like that. Let me try hide this first.

So this is the example because I need to check the unit ID and also the latitude, longitude. And because now I need to let you all be more clear what happened right now, so I hardcoded the data out first. Actually, if you have the API, it's very easy, just put the API over there. Like normal how we fetch the API data and return it. So as usual, because I need to force them to log in first. Then you can see here, the scenario is we force the user to visit the login URL first.

Then after that, they log in, they find the button to submit, but now I didn't use the data test ID, but this is one example I can show you. Then after login successful, they should go to this URL. So you can see the syntax over here is

𝚌𝚢.𝚞𝚛𝚕().𝚜𝚑𝚘𝚞𝚕𝚍('𝚎𝚚', 𝚝𝚑𝚒𝚜𝚄𝚁𝙻). It's very easy and very clear. Then after that, they will load the map out. And they will check all the tooltip is showing out or not. So let's see and after that, they will check all the expected observation data is returned correctly or not. So you can see, they will log in,

after login, they will directly go to these pages.

So we can see all the data they expect, okay, this wheel, the latitude and longitude is from where, what kind of species. So this is not just for my project, actually can be for all projects. Like sometimes you have a list of data, you can check if the user is in this group or not, or is in another group. Sometimes mistake on the front end, we mapping wrong, or sometimes the backend returning wrong data, or sometimes maybe the user filter is wrong. So we can make sure everything we write, that's why we need to write the test case. We need to make sure things and also prove yourself and reduce more bugs. So this is one very good example.

Let me try zoom.

Testing for Incorrect Data and Error Handling19:42

How about another scenario? Incorrect data and also like example,

if you see the expectation data is actually turtle, right? You can see over here. Our expectation data is this, the species is turtle, but I change it to fish.

So then, but I need to show the example, but if we have the API, it's easier. But now I'm hardcoding, let you all know first how we can do that.

Then after that, we log in, we should fetch the incorrect data. So we can compare the correct data.

The ID, if it's not correct, the species is not correct, they will show the error message. What is the expected species? And what's the data ID over here? So they will show the error message. It's very easy for you all to know what error you are facing right now. So you will see they will load. If the data is not correct, you will see they have the error over here. And they will show you that actually expected fish to equal turtle. It's actually the correct data is turtle, not fish. And they will show you on the visual line. The expected data over here, so you can very easily debug over here.

So the line over here. So you will know that okay, this logic has something wrong. So for me, it's very useful, especially if you are the front end, you need to check all the data.

Integrating Cypress with CI/CD and Cypress Cloud21:25

Let's back to the slide.

Okay, so another one like what I mentioned, we can connect to AWS, Azure,

but other than that we can also directly use Cypress Cloud. Imagine we have a little team or big team, it depends on you. So if you are the leader, you can very easily check if your junior's work is correct, have bug or not, because everything we have the proof, they have the test case, they were running the test case. So if you are the manager level, it's easier for you to assess, and also very easy to let the client know that our data is correct.

So have something, have proof. So how to connect to Cypress Cloud? You can just click this button when you first time, after you install existing project, you test run on your site, you just click to connect your project. Then they will show you, of course you need to register your organization, it's very easy, like just register the email. Then you just click the create new. So you can select your project name is public or private, it depends on you. After that you create a project, then you get the record key. You just copy the record key, and you try to run like this on your local,

then after finish run they will show something.

So after you run, they will show something like the quick setup. The quick setup will automatic detect your frontend framework, like my one is Next.js, like some people is Angular, they will automatic detect already, then you just click the detected. So you just click continue, install all dependency. So you just run your Cypress Cloud.

If you want more detail, you can preview my YouTube. It's more detailed way how to connect your existing project to Cypress Cloud. I don't mind to get more subscriber, thank you so much.

So other than how to connect Cypress Cloud, I also teach you all how to write test cases.

Cypress Cloud Demo: Viewing Runs and Analytics23:52

Let me show you how to do Cypress Cloud first.

So after you finish install Cypress Cloud,

you will see the run here. They will view something, try to ignore the previous, I do some testing for myself because I want to give you the talk, so I try to do some testing. So we just click view runs in Cypress Cloud.

You will see a lot of data over here, like how you testing run. And they detect by different branches. Like sometimes you have another branch, I have another branch, before we do the test case, we only merge the branch to main branch or master branch, and push to live. So this is one example, but now I just have one active branch. And every test case run,

like some test case run have error, they will show the error. So you will see what kind of error over here.

You can see the overview, this is previously I try test something, the incorrect data. And we can click this, you can see the test replay.

They will show the video out.

They have the video showing out, something like that. We can very easily preview that. And you see the video bar over here. They will show you this part have error. So it's very easy for you to debug.

So okay, this is one example.

And also here, they will show you what kind of code has issues, so you need to fix it very easily. And other than that, you also can preview the screenshot too. But this one, because of the error, I will show you the good one. Okay. And you can see the previous run, and what kind of

environment, test code history, and who's pushing the code, something like that. And also, this is all the test result. And this is how the test result looks like,

different scenario. So you can see this scenario here, because I try testing run few times, so yeah, sometimes it's overlapping. Okay. So you can see the status over here, you can filter what kind of pass status or fail status. And also you can filter the date, what kind of specific file you can just preview. Okay. And also what kind of spec. And you will know that per test case is running how many seconds. So if it's over the seconds, it means that yeah, is it internet issue or is it code issue? So you can slowly debug all that. And also, just now what kind of error. Okay, so other this is other stuff already. So yeah, I think this is very useful, especially if you run small team or you run bigger team, okay? It's quite suitable for you all. So also the analytics, you can see the analytics like total run is how many, like what kind of pass run, fail run. We can see the statistic over here.

And the run durations, like what I mentioned, other than view in the latest run, we can preview over here with more details. And also the test suite size

and what kind of top failures, and also what is the slowest test. Yeah, this is very important. So yeah, you can check that, oh what is the slowest test, because maybe the slowest test is because they have a lot of data, so maybe they will take more time. Does this make sense? Yeah, so you need to ask back by yourself.

And also what is the most common error, because this is just now I'm doing the testing is the error one, so yeah they will show that, what is the common error over here.

Okay? It's very easy to use and easy to understand, trust me. Yeah.

Easy Test Case Creation: Cypress Chrome Recorder28:21

So another one is the most easy way

to writing the test case. If you are not front-end developer, or maybe you are a tester, but you need to try to write the test case, you can install this Cypress Chrome Recorder. So let me show you how to do that. Okay, let me log off first. After you install, you will see something like that. So we can just simply click the start recording. So I can click like this.

Then I normally log in.

So I just stop recording. You see that, I can just very simply copy this. Okay. That's why just now I mentioned that the best practice way is try to use the data-test-id or the data.cy to writing the test case, okay? Because you just very easy to copy, you don't have any duplicate class name, ID, yeah. Example, I can simply like this, then I can just paste over here. Yeah, it's very easy, especially for testers, because now slowly the testers try to learn this framework also. Okay. So other than that, okay, yup.

We can every time copy and we can just reset or you want to resume also can. So this is one of the extensions in Chrome that is very easy to use.

Using the Chrome DevTools Recorder for Cypress Tests30:01

The next one is similar to Chrome extensions,

but this happens on the control panel. In Chrome, you can right click, find More tools, and click Recorder.

Let me show you how to do that.

When you enter the page, it's something like that. Same, you just click Start recording. This depends on what kind of recording name you need. For me, I'll just randomly write this first. Start recording. I can click admin.

Click the login. I stop recording. You will see all the code is here.

You can just directly copy and paste over here.

It makes your life easier. But I still prefer your scenario to be more official.

Because it's impossible, your recording date is what.

This is one of the ways. You can also replay. But this is different from the Cypress code. Cypress code is already recorded, you can preview multiple times. But if you refresh this one, it's gone.

Other than that, you can download as what? Because we are using Cypress test, we can download. They have something like that.

Very easy to open that. This is one way to make your life easier. This is the important point.

Other than that, we can just delete.

So it's back to normal. This is one way for you to write Cypress more easily. No need to think what to write next. But I suggest using 𝚍𝚊𝚝𝚊-𝚝𝚎𝚜𝚝-𝚒𝚍 or 𝚍𝚊𝚝𝚊-𝚝𝚎𝚜𝚝 𝚍𝚊𝚝𝚊-𝚌𝚢.

It's easier to detect which input and button actions you are working on.

Survey, Q&A, and Closing Remarks32:44

Actually, I have an exciting gift for you all from Cypress, shipped from the US. You can scan this QR code. Help me do some survey here. We will select 5 to 10 winners. You will get swag from Cypress.

They promise me. It's an early Christmas gift.

I think my class is ending. If you have questions, you can ping me on LinkedIn or Twitter.

Or ask me later as I'm still around here. If you want code examples, you can search my GitHub or ping me directly.

I hope you enjoy the talk. I enjoy Bangkok also. Thank you so much. Thank you so much. Does anyone have any questions? I think they want to eat lunch already.

Thank you so much. Thank you, Louis. Okay ครับ ขอบคุณครับทุกคน มีคำถาม 1 ท่าน

Oh yeah, I see someone has questions. What is the event code for the survey? For the survey? Yeah. Do you have some example? I try to preview on your site.

In the form, they ask for event code. In the form? Event code? Oh, maybe just write JavaScript 2.0.

Okay, thank you. Yeah. Okay, thank you, Louis. You make difficult things become very easy.