A beginner’s guide to Cypress end-to-end testing

Muhammad: Awesome. Thank you so much. Yeah, as I said I’m GDE in Angular for the past three years, I've been in the software industry for about nine years now. I'm originally, or I'm more of a front end focused full stack engineer. Right now working as a software architect, on some design systems, some UX challenges. And it's really interesting for us to be able to be confident about our products whenever it comes to shipping to. We have a lot of customers and we have hundreds and thousands of users using the products every day. So it's really interesting to share what we think is essentially, you know, the way to go when we talk about confidence and robustness within that applications.

Muhammad: So without further ado, I'm actually going to start sharing my screen and we're going to get into the talk right now. So let's do it. Awesome. So I hope everyone is able to see my screen. I'm going to quickly open the chat as well. So I can see whenever someone types something, because I don't see everyone right now, but in any case let's get started.

Muhammad: And I hope you're seeing my slides. So just someone say yes, we see it. And then we're good to go. Great. So. This whole presentation is all about getting started with end-to-end testing, using Cyprus and Cyprus is an amazing tool. It is one of the few things that I have loved since the beginning of my career.

Muhammad: I mean, I have had many things like Jacob. After that angler, there have been multiple things that came into our world like Webpack, module Federation. There are a lot of things. Cyprus is one of those things that I was really excited about, especially when I started using it. And we're going to have a look into that pretty soon.

Muhammad: If you want to reach out to me. Just search the word code with essence and you will find me on almost every social platform. So feel free to connect. I usually reply within 24 hours, at least I try to. Great. So let's talk about what is Cyprus. You might know some stuff about that already, but I'm going to try to at least share something new today.

Muhammad: So Cypress is an open source test runner that you can use for testing your web applications, whether you're, whether you're testing your application locally, or you're testing your application remotely. For example, if they are deployed, even that doesn't matter, you can directly run tests against a deployed application as well.

Muhammad: Now, when we talk about Cyprus, but. It helps you with, is it helps you setting up the test? It gives you a complete framework for all the tooling to set up those things, because. Kind of comes up with Chrome or chromium engine as a bundle that you can run the test on. It's supposed multiple browser and we are going to see them as well.

Muhammad: But in general, it provides you the ease of configuration. As I said, you could rent us tests are across or against a local app also or on a deploy obligation. So it really depends. And then finally, it also gives you something to run the tests and visualize those things. It also helps you with recording test, which is amazing because imagine being a QA in a team and you see there are certain bugs coming.

Muhammad: All you need to do is that you need to now pick this recording against that failed test case and send it to your development team. And they should be able to see the video what happened and get a good idea of what is happening there. So it really makes it easy for the videos as well as it has also some it's not.

Muhammad: Testing or images that you can also share when running those tests, it's really easy to configure as well. And finally, for the developers, absolutely loving this debugging part, it makes it so easy to debug. All of your tests that you can easily find out the issues in whatever step was failing.

Muhammad: Imagine sending an API call, getting some reserves and trying to append the data into the UI. You could actually see where things went wrong. You could see what API call was done. What was the data that came back? And now, if anything was appended to the UI or not, you're going to see that in a bit. So what sets.

Muhammad: Apart from the other test runners. First of all, it has really good support. Now this image is a bit older, as you can see it shows this one is a new one, but you can go to cypress.io and you can see that it essentially supports the major modern browsers. Then you can run the tests against for your products.

Muhammad: Essentially. It also supports edge. As you can see also electronic. Now, if you talk about the big or major features about Cyprus, these would be the following ones. We have a time travel feature, which essentially builds in a way that when you run Cyprus, Along with running the test. Cyprus also takes snapshots of your tests as they go along.

Muhammad: So you can always go back to them, as I said, and see how each step looked. So you can see those, you can click on those steps and also see further information in something that we call command log or the console. So it shows you what data was retrieved from the API or what happened when this particular step was.

Muhammad: Then we're going to look into it in a bit. Excuse me. It also supports real-time reloads, which means that, sorry, which means that if you are. Changing your code. If you are working in developing right now and you need to change something on the go before a local, locally deployed app, of course it automatically reloads the test.

Muhammad: So you don't have to, you know, spin up everything again. And bill, obviously you would be running a hot reload or something, but you don't have to rerun Cypress from. It doesn't take a lot of time. As soon as you change something within the source code, it automatically runs the test against those things.

Muhammad: Now, when we talk about debugging lady, as I said, you can easily see in the time-travel debugger, how it works, but also we have further commands that you could use for debugging. For example, if you are familiar with web development, you might have seen this keyword called diva, where that you can put in your JavaScript and then the browser automatically stops there.

Muhammad: Similarly. Cyprus also provides such debugging tools. We are going to look into it. And also one of the coolest features of Cyprus is also to wait for a particular thing to happen. Now you could talk about waiting for a UI element to appear. Or you could also talk about waiting for an API call to finish.

Muhammad: We're going to look into it in a bit as well. Now, when we talk about time travel, this is how essentially it looks now, this is a test that we have in one of our, applications that I have created for the demo. But imagine that we have. A really simple application that we want to test. And the use cases that when we add a new item or when we add a new message to a chat, it should be added to the messages list.

Muhammad: Now this is a test. Now, when we run this test, Cyprus essentially allows us to go back into different steps. As you can see on the. We have this sort of command log or the steps that you could go mouseover or anything. And if relevant on the writer, you see what was the state at that time, in this whole test scenario, you could see how the UI looked before we added a new chat message.

Muhammad: And after when the item was added to the list, so you can see that on the right side. And this is pretty cool. Now, when we talk about debugging capabilities, As I mentioned that apart from just going through this time travel thing from the snapshot, you could add this debugger keyword into your code, and you're going to look at the code in a bit as well.

Muhammad: But imagine putting this debugger at the right places where you have a video thing, the issue might be and directly reaching that space without having to go through all of the steps. So it makes development so much easy. You can use the debugger keyword in that. And when you do, as you can see here, Cypress automatically stops at that debugger.

Muhammad: And then another way of doing this is using the debug method alongside these commands. So here, what you see right now is that, see why the title should. It is essentially taking this debug method and applying it to the very adjust in common, which is this should come on. And this is really handy because it sort of does the same thing.

Muhammad: But instead of just putting debug everywhere, this kind of binds itself to the command that you want to deeper. And in this case you would see something like this, it would still have this debugger being applied, but around the. But in this moment, if you use this debug method, it does something else. It essentially logs that particular thing onto the console.

Muhammad: So here you can see that what was the command? It was should, what was the command arguments? It was this that we are testing something to be equal to NG Cypress starter. And what is the current value of this? You can see that that is the value that we have right now. So this is how you would essentially develop.

Muhammad: With the debugger method and some other stuff as well. Now, another amazing debugging capability is that, as I said, you can quickly go to the left. Left steps and kind of click those steps and see the output of those things, not just the right side snapshot that you see, but also the output. For example, here, you can see that we can see which were the messages.

Muhammad: Now in this test case, what we have as a situation is that we are asserting that here. Initially there were for example, four messages as I can see. So we had four messages. In the chat before we added a new item and then they became five. So as we click through those steps, you can actually see that it tests, how many items were there.

Muhammad: You can see five items right now in this list. And it also shows you initially it was four. And when we typed that wire test cases into our input, you can see which of the keywords were fired in that place. So you can actually see, Hey, If I typed in the input correctly, I got into my assumption or what's.

Muhammad: It's really good in terms of deep availability. Now let's talk about something else. How do you get started with Cyprus? So you need to do is you need to NPM install this package within your project. If you are working with an angler project, it would be the same situation. If you are working on a web project, it would essentially be the same because Cypress is not bound to angular.

Muhammad: You can use it with. Vue JS or whatever. Essentially, what I try to do is I use these two packages to run the application and Cypress instance simultaneously at the same time. So once you do so you can quickly add these two commands into your packages for your. And then all you need to do is just run the Cypress test c'mon and it starts the application as well as the Cypress.

Muhammad: So you might have to do some magic right here in the Cypress test. C'mon to see how you start your application and how you run the Cyprus open. Now, once you are set up, you need to run the Cypress test c'mon as it runs, put of the things, the app, as well as the Cypress test. And then you will notice something.

Muhammad: And that is that you will see the Cyprus project or Cypress folder within your. And the Cypress Jason. Now, if you're working with Cypress for the first time, this is what it does. It essentially just adds a couple of examples for you. So you can see how to wait for an API call, how to write certain tests.

Muhammad: So you can see all of those really good example to maybe take an inspiration in the beginning. And then the Cypress Jason file is really interesting. This is what holds that when you run the test, What would be the viewport of the Cypress runner that we are trying to run. If we needed to ignore any files, you could mention it here, but more importantly, the base URL.

Muhammad: Now this becomes very handy. Here, you can specify that my app is running on local host 4,200, but you can easily change this into USC ICD, and then point to let's say your staging environment or your production environment. So you don't have to change anything in the Cypress code because these. Things can be used as an ENV variable within the Cypress test.

Muhammad: So this is really easy to handle. Now let's talk about some of the Cypress commands and assertions. How do we, how do we do certain things in Cyprus? So, first of all, whenever a particular test is. Imagine that each particular test or ed spec runs in isolation. And usually the way to do this is that you have, either it by feature or by page, but in any case, Whenever it has runs.

Muhammad: It has to go to a certain page. So Cypress know what what's happening because what Cypress does is that it just opens a browser in the beginning. Now you need to tell Cyprus to go to local host 4,200 slash and here you can see that I'm not specifying, SCTP local those 4,200, because I've already specified that in the Cypress chaser.

Muhammad: So all I need to say here is a slash or I could say slash login. If I wanted to go to login page. We need to go to the homepage in this particular situation. And then we are asserting the test that, Hey, this title that we have. It should be equal to blah, blah, blah. And in angler, if you're using the high strategy, and if you have a page like this, this is what I would do.

Muhammad: I would just give this the URL and then I'm asserting certain things. Now, one more thing that you would want to do is if you want to get a particular SQL element, you can use the CSS selectors for this. For example, here, you can see that we are doing C Y dot get hash, and then whatever your IDs you could also use.

Muhammad: For example, classes or items with attribute go crazy and use any sort of CSS selected that you want. One other way of finding a particular item is using by text. Now you have to be very careful when using this because this one says, Hey, get any item that has the word delete in it. Now, if you have even let's say a P-TECH or an edge one or a heading that has the phrase.

Muhammad: Do you want to delete this? And it has the same case as this one. Cypress, we'll get that as well, because this works as a reject. So you have to be careful when using this. This is not something that checks the entirety of the text content, but rather works as a rejects. So we are going to look into some of the use cases before we start working on the first use case.

Muhammad: I would just like to show you the app that we have right now, so we can have a quick look. So I'm going to go to a local host 4,200 and show you the application. It's very simple application. All it has is just this UI, where we have certain messages, I could go here, type something hit enter, and you can see that it gets added to this list at the very bottom, something like this.

Muhammad: And what happens is that if I go and Hoover over it, any item, I can click this item to delete. And other thing that I can do right here is that I could go to a particular message by just clicking here. And you can see that this goes to a detailed page now, and I can now delete this message as well. And when I delete a particular message, I go back to the homepage and see this message removed.

Muhammad: For example, we know that right now, there were three messages, but if I delete this and go back, now we have to, I could do the same thing. And now we have only one message. So these are the tests that we are going to look into in the coming. So moving from there, the first test case that we are looking at is we need to click the fourth item, and then we just have to check that if we go to that particular page detail and the way to check this is that we need to perform the action and then assert the URL that we have.

Muhammad: So the way to do this is this. We have a test suite here that we call, Hey, it should navigate to the message page on the list message item, click. Then we start doing the magic. We say that, Hey. The message lists and the message items. So why are this? What we're trying to do is that we are getting all the messages or message items or the chat items.

Muhammad: And then we are using the Q3, which essentially get the fourth item because eco starts with zero. So what are you trying to do is right. We are saying, Hey, get all the messages, then pick the fourth one and then click. Afterwards check the URL. So by C Y U R L, we check what is the URL right now? And then we assert that it should equal to, as CTBS local host, 4,200 message.

Muhammad: And three. Now here, you can see that we are using SCTP local host, but as Anne just said that you don't have to use that in the code because we are using it in Cypress, Jason, but you could get the ENV variable here and replace it with this one. I forgot to do so. So, you understand the concept here now.

Muhammad: After doing this, it essentially passes for us. And you can see the snapshot right here. What steps we're taking. This is step started then before each actually took us to that particular page on slash then we got the message item list. We picked the third item and I'm actually going to just open my this so you can see it as highlighted.

Muhammad: Cool. So we essentially pick the fourth item and then here we click. Once we click that, you see this new URL here from Cyprus, which tells us that the URL was changed. And now we are asserting the same thing. We are testing that, Hey, this should equal two message slash three, which means that our test is passing.

Muhammad: Similarly, if you go forward in this one, let's, let's talk about another test use case. We need to click the fourth item. We need to click the delete button, and then we essentially need to check if we navigated back. Here is the test. We click the Fort item. We go to the detail page, but now we also want to deleted, go back to see that item deleted and the way to test this would be, Hey, initially, we had four items.

Muhammad: We went to that items detail. We deleted it. We came back to the page and now we should have three items. So that is how you would map this test. And this is what we do instead of doing it from the scratch we could in the test already assume that we are on the page. Or on the third page, this is another way of doing this.

Muhammad: If you're breaking it by a pages. So in this case, we start with the detail page. Then we try to get this delete button, right. And we know how to get this because if we see this div here, you can see that we have got this class card and then we have a button inside. So this would be one way of getting it.

Muhammad: Or you could get it by a C Y dot contained method. But essentially here is what we do. We do the same thing. We see. Getting the div, which has the class card, which is this one. And inside here, we got this button. So here we are saying, Hey, get this card and then get any item inside that card that has this word belief, because we are not searching this delete globally.

Muhammad: As I said, it's rejects. When we get that button, we click this. Then we that, Hey, now if we click the delete button, the URL should have been changed to this local, this 4,200. And we also need to confirm that now the messages are three before. There were four messages. Now you could also assert this in the beginning that, Hey, do we afford messages or not?

Muhammad: But in the end, this is how it would look. So you can see the steps taken here. We started with the detail page and afterwards we got this card element. Then we found the delete button. Then we clicked on it. The URL changed automatically. So this is coming from Cyprus. And then we assert that, Hey, now we should be at this page, which is the chapter.

Muhammad: And we also assert that now the items should be three and this is why it works automatically. The consider another use case in this one, we want to see that a new message was added to the list. So in this case, we click this. We type something automatically. And then we click this burden. So that item gets added and now the mapping would be exactly the same.

Muhammad: We're asserting initially that, Hey, this page should have four message items. So we are checking here that the length is four. We are of course getting it from the CSS. And then we are applying some code here, but afterwards we get the chat input. Why our CSS selectors, we type this message. And then we get the send button and then we click.

Muhammad: Now you will notice here is that we are doing this.training here, which is really good sometimes, but you have to be very careful when you work with it a bit more, you will find that in some cases it doesn't really work, but essentially in most cases you can chain the CYA commands. So here we get the input.

Muhammad: In that input, the Hallowell, then we do another C Y dot get, which is a short form here. And then we click this button once we do. So we are asserting that now instead of four, we should have the five messages. Now this is just for explanation that we are checking. Here are the four messages. Are there five messages, but a better test would be to actually see the content of that fifth message.

Muhammad: So we should be very precise with our tests that, Hey, I added hello. It's the fifth item on the view right now is hello world, actually. And that would be a better test, but that's just a bonus tip Tuesday. So when we do this, this is how it looks. We start on the homepage, we check the four items, we get the item type, click the button, and then we see that we should have the five messages here.

Muhammad: Now some of you would be likecokay, this seems very simple, very basic code. It's something that I already know telling me something new. What is in this talk. That is for the experience folks with testing, we're going to cover some complex cases now. So consider this case. Now, what we need to do is that we need to hover over the third item, delete that within the homepage and assert that now we have two messages in the list, or one less message.

Muhammad: If I open the app, this is essentially this use case where I have two mouths. And then click this delete button and then I'm seeing that, Hey, now we should have one message list. So how can we do this in Cyprus in this case? So I kind of led this open and grinder. Cool. Now, in this particular case that we just discussed, this is how it, the, how you would imagine it similar use case.

Muhammad: We got four items in the beginning, we are good. Then we go and mouse over, let's say the, the third item. And then we find the bleed button within that. And then we click on it. So we already know that we have got some list items and we have the delete button inside that list item. So that's what we are doing here.

Muhammad: But if we run this, the magical thing is that.

Muhammad: And the reason for failing is that when it goes and tries to find this delete button, as you can see it fails because you cannot see the delete button, it may or may not exist on the view. And so Cypress cannot find it. Now, one thing that is really interesting is that Cyprus, when failing automatically wait for about four seconds to do something before it says, no, this is not working.

Muhammad: So how do we fix it? And the question is why it doesn't work. And as I mentioned, Cyprus has no way of identifying, you know, how to perform over or this whole work thing. So in this case, if I talk about the solution here, this is the solution, and it's most likely the solution to most of the things that we know using the force.

Muhammad: We have this really nice pattern. Inside this click method that we can provide and it's called force. And what I'm going to do is I'm just going to quickly change my camera's battery because I think you all see a blank screen. Now, just give me one second.

Muhammad: There we go. You should be able to see me now. So now when you talk about this fourth attribute, this essentially tells Cyprus. Also see, hidden elements, not just the ones that are visible right now. And when we do so we do it like this. We're saying that, Hey, get the third message, find a delete button and then click it with the fours, even if it's not visible when we do so you will see that the.

Muhammad: Now process. And you can see that if we go to these steps, we actually see that item right here on the right side. You will notice that we see that item because Cyprus also shows that. And when we click, it shows this really nice red. So you can see it being appearing here. And that is awesome. Now let's talk about some complex cases testing forms.

Muhammad: So in this particular case, we we're talking about this log-in scenario. Now we are talking about real stuff. So let's suppose we got this, login form in which we needed to provide an input into the email, provide an input into the password, and then also submit the form. But you might also want to see what happens if we don't provide a password or.

Muhammad: And does it show the adders that it is supposed to here? You could write those tests. You could assert multiple situations within this in press very easily. Another complex case is waiting for the XHR calls. And this is very important because you might depend on a particular. Situation where you need to call an API to get something and you need to do something in response for that.

Muhammad: So not everything is just, you know, putting UI elements here and there. A lot of things really require the API calls. So Cypress actually allows us to do something right. For example, in this case, what you see is that I have typed something in the input and I tested that, Hey, now I should have, as soon as I type it, it should show me the first user, which is Irene or, in new, I don't know how to pronounce this name, but the thing is that as soon as Cypress is starts or goes to that, cool.

Muhammad: Cyprus assumes that this is already there. But the thing is that here, you can see that the data comes later or the API call might be delayed, or let's say the network is poor or the server is not responding. And this fields, because by the time this test step was reached by Cyprus, we didn't even have the API call responding the data.

Muhammad: Therefore there is no change on the UI. So how do we tell Cyprus to wait for an API? Even if it doesn't matter, you know, how, how much time it takes. So this is the end that we get. And you can see that here we were expecting this data to change. And that didn't happen. Now, if I see this here and actually just to reflect there, the test that I wrote was.

Muhammad: That we should assert that we have only one item in the UI after the test, in the beginning of , but after searching, we should only have one. And that feels right now, now, It looks something like this. And when we talk about aliases, they work in this particular way. You can essentially have a particular text value wrapped as an alias.

Muhammad: You can also see that in the code forward. For example, here is how you define an alias and you could call an areas like a label or like a mark, for example. So here I call it my alias. And in the later state, I can go ahead and just say that. My alias should equal this particular value and this test would for us.

Muhammad: But if I have another test suite in which I'm trying to, choose this alias as well, the thing is that this will not be. The alias has a school of only the test suite, or it depends on where you're defining it. If you're defining an alias within a particular test suite, it will only be available in that test suite, but not the other one.

Muhammad: So the right way of doing this is that you define the aliases if possible, of course, inside the, before each method. And when you do so, and when you do this as my. This essentially makes this available for every test suite, because this was declared before you, so just some tips for when you get into this particular issue.

Muhammad: Now let's get back to the problem here. We were waiting for the API call and how do we fix that? So in the, before each context, when you visit the particular page, what you can do is that you could intercept an issue to be called. You could either provide the complete. Or you could also use a wild card.

Muhammad: Now, in my case, I need to be able to use this with the search query and I could search anything. And I'm sending the data, into this URL query parameters. So I could search any name. That's why I'm using this wild card entry here. And I'm kind of aliasing that as search users. Now, when I do this, I can actually, in later stage of my test, I could say that.

Muhammad: I'm now trying to get this input or the search input that we saw before. I'm going to type the word Irene inside. Then I need to wait for this issue. We call to finish and Cypress will not execute this further code until we get the data back. So after we get this API call done, then you see that we are asserting something.

Muhammad: Now the fun part is that you. Make sure that we are waiting for this, but in some cases you also have other ways to extend this time, but that's not really optimum because you could say, Hey wait for like 10 seconds, but that is not optimal, but this veered strategy, this is really good. Now see what happens.

Muhammad: As soon as I started something, it waits. Now it's waiting and then the HDB call happens and you see that now the test passes and that is because. The data came. And then instead of 10 cards, the app itself based on the API call showed one data and everything looks good. Another complex thing that comes into Cyprus is using fixtures.

Muhammad: Now imagine that you depend on API calls for all of your tests, which is mostly going to be the case. And you're dependent on, for example, some third-party API as well. Now, most of the third parties basically charging you. In terms of API calls. And if you run tests, for example, every deployment. That's gonna cost you a fortune, right?

Muhammad: So instead of making this really real API calls, you could use dummy API call responses. And this is not just true for third party APS, but also for your APIs, you may not want to run against real data into your tests. And with this, there is even a possibility of running this on production or running your tests on production, because you are going to be working with fixtures or mock data all along.

Muhammad: You're not going to be interacting. The API calls for production that really PI calls per se. So here is an example that we are talking about at the moment. What we do is that we are getting the data in this particular situation from, from the real API. But here you can see that we got all of this data and the way to do this would be, you need to understand what is the API response, and then you need to make.

Muhammad: The data, according to the response that your app expects, of course, otherwise it wouldn't work. So without Cypress, fixtures, you, you do this particular situation where we have aliases, but if you use fixtures, then something changes. So here, what I've done is that I've created a user Jason inside this fixtures part and this is where you should have.

Muhammad: All your fixture declared. You just create JSON files here, according to the response, your API called expects. And you can see here that we have the same sort of response. The only difference here is this. You see that we got info here and results, but in mind, I don't have info. I just have results. And I have this new property called fixture version.

Muhammad: This is just something for me to maintain the version if I update anything later on, but this results is something that my app expects. And this is what I'm providing from here. You can see that here we have got users or Jason. And now what I can do is in the, before each case, what I do is that first of all, even before visiting the page, because my app, it starts loading the user.

Muhammad: As soon as you go to the page, how do I tell Cyprus to stop, not do that or stop before I can identify or register my fixture. So here is where I'm registering my fixture before any test starts for. I get this fixture from my code, this is user dot Jason. Then I essentially use that fixture, which is right now the response variable here.

Muhammad: And I essentially say, Hey, intercept, every call that the Cyprus test is going to make to this particular wildcard and then use this response as a fixture. So we are still intercepting the. We are using the alias, but instead of just using a real ball, we intercept and stop it and use the response. So this call never goes to my backend or your third party, API, whatever you're using.

Muhammad: And once we are done with this, we can essentially use this against the test. The rest of the steps are exactly the same just by putting this fixture thing here. The rest of the code looks exactly the same, which is really good because we can now test. Everything that we talk about. And now I'm just going to throw a really quick shameless plug.

Muhammad: Some of the examples that I've used, or actually every example that I've used here is essentially from. Anger book, which I can probably, bring on the screen as well. So you can see this in reality. This is how the angular cookbook looks it's pretty take, which means it took a lot of time for me to write and we launched this in a.

Muhammad: In August last year, it has more than 600 pages. It has more than 80 recipes. This screenshot is an old one. It is more than 80 recipes. And we just talked about like six to seven recipes, about Cyprus only. But that book has a lot of things. Animations, progressive web apps, competent communication, state management, performance optimizations in angler and whatnot.

Muhammad: So feel free to check. And in the end, I would like to say two things. One test your apps before your users. That's probably the smartest thing to do. And second, if you like snowboarding, I would suggest not to take your dog to there because you might end up in a situation like this, which we may laugh at or not at all.

Muhammad: Thank you. And now I can answer any questions.

Darren: Yeah. Wow. That was, that was a lot of great content. I mean, I, I just, I just love all the examples and animations, like tiny put a lot of Oregon to it. So, so think of so much as some for, for sharing everything with us. Yeah, so now we have outreach got a good amount of questions in the Q and a. But yeah, like now it's time for questions and we'll get through as many of them as possible. It's not too late. You can still type in the Q and a box on the bottom. So let me just start from the top and see what we got and apologize in advance if I pronounce your name wrong. All right. And asked, can we get elements on their shadow Dom in eye frames using Cyprus.

Muhammad: That's a really good question. And I don't have the answer to that yet, but I can definitely look into it and maybe tweeted. Yeah. Sounds good. Okay. Next, Eric, is there any possible way, Cyprus, would you code injection on the live shop? If I site doing testing on a local instance without making any pushes to a repo, it's something we have a problem with.

Muhammad: It has been occurring for two weeks. Yeah. So the thing is that if I want, I can write some Cypress code right now and I can even go and test Google because all we need to do is to give this a URL that, Hey, go to this page, pick this input and do anything. It doesn't see my code when I'm running tests against.

Muhammad: So I hope that makes sense and the answer to the question is, yes, you don't have to push your Cypress code to anywhere. Or if you, even, if you have a local host code that you have, it doesn't really matter. If you have something in deployment, a live running side, you can essentially run Cyprus separately and then Cypress, and you can code obviously Cyprus to perform actions on that side.

Muhammad: That's completely. Okay. And they're just commented lecture. And for my code is being displayed as an overlay on my site. The actual Cypress code is shown. Hmm. Okay. Yeah.

Darren: All right. Let me go to the next one. Felicia had said, how can I test multiple viewpoints? It seems like Cypress that Jason only sets a single point. In fact, When you say multiple view ports, what do we mean about that? Do you mean that we have a single app with multiple things or I'm trying to tough to understand, what do we mean by multiple viewpoints?

Muhammad: Okay. Yeah. Felicia, if you're here for me to type in the chat or comment in the Q and just wait a couple of seconds, but if not, we can and move on for now.

Muhammad: Okay. Yeah, I don't, I don't know. I don't know. She's still in the, in the crown. Okay. Let's, let's move on. But feel free to type into chat a new variable. She went to again, asked do we have limitations using safari browser and cross domain on Cyprus? I don't really think so. So we do have. I mean, safari is a bit to test, but I don't think there's any limitation at this point.

Muhammad: I actually have to check if Cyprus support safari, but if it does, I don't think there's going to be any limitations, but you have to know that Cyprus only tests one browser. So, if you really want to run multiple tests, you would have to run multiple instances. It doesn't support safari. Yeah, I thought so.

Muhammad: I think in the latest one, they're supporting edge, they're supporting electron Chrome and anything with the chromium engine Safaria is always. Oh, was I, I find it funny that this person named Cyprus knew is, is answering a lot of questions. Mostly. It's a very, very humble person. Okay.

Darren: Felicia. Okay. I just, I just saw the common song on day. So, you know, regarding the viewport questions you say no, it's it's phone plus desktop, no phone and other form factors like desktop. Ah, no, I think Cypress only works with. At the moment. I know that I can't recall the name of the app browser, something browser stack.

Muhammad: I think that supports a lot of browsers and a lot of mobile apps as well. So you might want to look into browser stack for, for a bigger enterprise. Okay. Gotcha. Okay. It's the Felicia's different question. Can you pick the last item in the list regarding a, how long it is? Sorry, could you repeat again?

Darren: Yeah. So can I assume she's asking about like, you know, wait, wait, select different different items in the list. So he kicked, you know, pick specifically the last item the list does, regardless of how long the list is. Yeah, I think, I mean, it's, I'm not sure if the EEQ takes a minus one, but I would imagine that would be the way to go, to say it's the last item or you could when we, when we take the items there are two ways when we run a Cypress command, one is we just write the command.

Muhammad: Other other is that we use the Ben value or the den method to get the contents of those items. And then we run command. So if you just say C Y. This message, for example, it would get all the messages in that case. But if you say dot 10 and then you also get the value out of it, then it kind of returns that dominance or the dome list.

Muhammad: That's where you get the length of those selection that you have got. And now you can just use that, for example. So you could say something like, Hey, see if I don't get my selector and then the length minus one, and you get the last item. So there are two ways to. Okay. Awesome. Just keep going. Well, yeah, questions can come in.

Darren: This is great. So Wilson is a little bit longer. Yes. Do you know someone who has used Cyprus to create a strip to automate the creation of demo videos? Is it practical for a demo to be defined in Cypress script rather than the usual words slash Excel document of manual scripts? What recommendations do you have for sharing of scripts by testing and the demo video crew?

Muhammad: And I think the next one is a clarification. A demo script would not have verification, but would have additional timings. Hmm, that's an interesting challenge. I know that you could tell in Cyprus to record every step. So when you run a test, it essentially records the whole process. So for example, if you have a login module and you have this, or you run the test, essentially it would create those videos anyways, if that's what you're looking for.

Muhammad: So imagine having 10 modules. 10 tests for those modules. And then you can have a video recording created for all of those by default. I think Cyprus records them, even if you, even if the test pass or fail, but you can also say that, Hey, don't record anything for the ones that are passing, depends on the situation.

Muhammad: But yes, I don't think you need to write a particular script for doing. If you just want the video for the whole flow, you just need to write those tests. If you want to do scripting. I don't think Cyprus supports that at the moment, but what we have done, or I can, I could share that we have worked on some sort of a smoke testing for.

Muhammad: That was essentially, but, but then we kind of, you could say we hacked around it or we, what we did was we just created one test file that went through different pages. So by default, Cypress is supposed to work page by page, every page in isolation that is, or it depends on the practice that your team, basically finalizes, but for smoke testing, we sort of, kind of, what do you call it?

Muhammad: We took. Like a script or we pretended if that's great, but it was essentially just a series of steps for a smoking smoke test. So maybe that answers the question to some extent, Felicia asked a very important question that we all want to know is the dog okay? I hope so. Yeah. Yeah. We can only hope.

Muhammad: That's the answer. Okay. Though, asked a dot trigger or Yoda click. If you have to read a question now it would be click Yoda, I think.

Muhammad: Okay. Acts, I get behind react testing library and Cypress seems a bit similar. So can we replace unit tests with Cypress end to end testing? That's an interesting question. I think uniters and doing the boat, I want to say they're very different, but the thing is that at some point they kind of come very close together and there's a very thin line when you need to differentiate between those two.

Muhammad: And then depends from team to team. I would say Cyprus is not intended for unit testing, at least what I've shown so far, but cyber is, is working on something that. Meant for unit testing. So if you go to cypress.io, you can see component testing that they are working on. I think a couple of weeks ago it was still in the preview mode or maybe a month ago.

Muhammad: But they might be progressing with it. So you could replace react testing library with that particular module, which is the component.

Muhammad: Cyprus newborn Cyprus, not so new, but asking Cypress tests. Oh, okay. I see. There's another, they asked another question down there. So I think this is the full one. So the question is, can Cyprus test content in eye frames? If so is a plugin necessary? I have seen a plugin for I frames. I never got to test.

Muhammad: But I think Cypress itself has a really nice article as far as I can remember about testing our friends. So it is possible because they are, I mean, there's a blog from Cyprus about this. So I imagine it's quite possible. You may or may not use the different package for that one, but I know there's a safe Cypress I-frame package for sure.

Darren: Oh, this, I think this might be from the previous question if Leisha, so I'm thinking of how I can test them on no foreign factors. You see puppeteer. Do you have anything after that? I think we already answer the question earlier. It would be too early for me to say anything about puppet puppeteer.

Muhammad: I do want to use it. I don't have any experience at the moment with puppeteer, but I'm definitely going to write it down.

Muhammad: Yeah, we'll wait until he finishes getting through it. Okay. Victor, as I have a project using snapshots, I need to test every component individually.

Muhammad: I think so it really depends again, on the team's understanding. What we try to do is that we at least have every critical flow and to, and test tested. For example, if you have a marketplace, you want to test that the user went. Adding those items to the cart. That's, that's really important, but maybe as not important as doing some little things here and there, for example, if there was a tool tip shown or not, if there was an ad shown or not, or little things like that, but you would want to make sure that the user was able to check out. The items in the end.

Right? So those of the things I think they should be tested, it's not necessarily to test everything, Muhammad: maybe start with the core competence and then expand based on how critical things are. Well, yeah, they seems like it's a follow up question. I don't know if you answered already. So in case of a player project, if that would make a snapshot before the audio start, I need to test after the audio is started the same element in, in, in other times, I think that, yeah, it's more specific.

Muhammad: I don't see that question. Sorry. It's the, it's the second from the top, like I think there's a little extra. So in case of a clear project, if I make a snapshot before the audio start, need to test after the audio.

Muhammad: Hmm.

Muhammad: No, I think you could test it in the first test. I don't think so. So in case of a player project, yeah, actually you're right. You're right. When you're running in this manner, when you need to take a snapshot before something, you would have to do that. Yes. But again, I think it really depends when you talk about snapshot or are we talking.

Muhammad: Setting or just the images or the video that we talked about. We use, if you're talking about video, as I said, if you have a file that runs multiple tests, it would create the video for all, all of the tests together. So you can then differentiate between them. But if we are just talking about the images, I think it does it after each step.

Muhammad: So you could have one test doing everything. You wouldn't need two tests in that. All right. Wow. We actually get into it. All of those that make it amazing. Harry asks, is it possible to test the third party authentication library integration on Cyprus, for example? Yes. By default, when you would perform actions in, in the app via Cyprus, it would essentially do everything that a user would do.

Muhammad: So by default, let's say if you have. The odd zero library being used within your code. I mean, cyber is doesn't know if you're using auto or not. It doesn't really matter to Cypress because it behaves like a user. So just like a user would go type the inputs in, in the form and then take the submit button.

Muhammad: Cypress will do exactly the same. And by default, it's going to use the audio library. So I hope that makes sense. Zaida, can you factor it? We use pieces of tests for instance, log-in page. So I imagine that to test in an area I need to log at first, which is what I wanted to reuse for other tests.

Muhammad: That's a really good question we can use commands. So Cypress also allows you to add certain commands as global commands. For example, you could say something like C Y dot login, and that would run it whenever you call it from any of the tests. It really doesn't matter. So you can create a usable snippets right there.

Muhammad: Just one thing to add. On top of that, I created a video on my YouTube channel about. This really nice tool called cucumber could be a potential talk for us later, but if you want to see the video version, you could go to my YouTube and see that and cucumber is sort of a tool that allows writing user stories in a very readable manner.

Muhammad: For example, I could write in my code or repository, something like user enter. Input and the email input or user in a user fills the email input user fills the password input words like this. And my code actually can see those words. Translate them into code and then run them. And the benefit of that would be exactly business, different development.

Muhammad: So in the end it would be something like that. Particular user stories file is a source of truth for the QA is to write in those is a source of truth for the customer to see those user stories and that directly binds with the code, the Cyprus. So it's really possible to integrate all. Cool things together.

Muhammad: So I have a video in which I created a react application, wrote some Cypress tests and then integrated or convert it into cucumber, which really kind of reused or made the code reusable, even further. So, look into that as well. But yes, in particularly Cypress, we can also reuse the same code. Right?

Muhammad: Boris, is there a work around for testing multiple tabs or windows? No, I think you could. I mean, really, it depends. If you need to do it in a flow that the user clicks a button, then we open a new URL or new tab. And we expect that, you know, the point is, how do we want to structure this? Because this was a challenge that we had to do it ourselves as well.

Muhammad: But then the question is how. How would you do this? For example, we had this, that the user would click a link and the link should be opened in a new tab. Now, Cypress doesn't have access to this tab and there's no work around for that, but you could make your code in a way that it reflects. That change right now in unit testing, what you would do is that you would say, Hey, the user click this button, or this click click this link.

Muhammad: Did we call window door open in our code? That's one way to test it in terms of unit testing, how do you do this in Cyprus or EBITDA? So what we did was we added a particular attribute to that. And then we just asserted that, Hey, if the user clicks this link and we were able to successfully open this into a new tab, we just add an attribute to that link that shows us that this happened in real and there was no air in there.

Muhammad: So there's no workaround for windows or tabs, but you could be smart about how to test it.

Muhammad: I think now let's take this a last one also from forest. Is there a way to securely store to lock-in potentials?

Muhammad: Yes. I mean, it would not be different than any other project, for example, you could. So you remember, we talked about the Cypress Jason file, right? So that has. That is provided as an ENV variable to the Cypress code or the context, but Cyprus also helps with, certain environment variables. So if you go to cypress.io and start for EMV variables, you will find the documentation for that.

Muhammad: But essentially if you have a CIC leave where you're running this, you can basically provide them as the environment variables from the CIC and Cypress we'll pick them. If you're running them in NCI. Similarly, if you are working with, for example, locally, you could create an EMV file and then add those to the login, credentials, those files, or that file not committing that to repository.

Muhammad: Of course. And then Cypress would pick it. So yeah, it would be similar to any, any other project, but the NV variables are retrieved inside, present context. Right. It stopped there for the question since we're about at the time, but I think that's, and that has to now has the record of the most questions answer in one, talk over to 21.

Muhammad: Yeah. It's not going to be surpassed anytime soon. I'm sure. It's amazing. Yeah. Thank you all for the questions. Thank you all for, just being, being so engaged, I'm paying so much attention to this talk. Yeah, so you have more questions, you know, feel free to put on the DFM page or just reach out to you to us.

Muhammad: And like all of his socialists are on there. They can find it. I just want to make some quick announcement. Oh, yeah. He already here to put it in the chat. Perfect. So the next event, I think it's happened in this, I think it's happened next week. There's going to be one about PHP. I think the speaker is gonna build a larva up in 20 minutes.

Muhammad: I think that's the title just interesting. Yeah. So check it out if you want to. If, if you feel interested in that and also there's going to be a. Kind of not a conference, but a Ben series called the developer growth summit. That's happening next month in April. And we, we got some senior engineers and tech leaders from companies like Adobe, like Netflix, like center.

Muhammad: Yeah, it's gonna be, it's gonna be a great time of learning and growing. I'm going to put all the links in the chat. Just one sec. I can all get that. Right. So you should be able to see that. All right. Anyway, so that, that's all I have for announcements. As soon as I just want to thank you again for taking the time to share and, yeah, it's been, it's been awesome.

Muhammad: Like everyone's everyone really enjoyed it. And I want to ask if you've had any last thoughts or any encouragement that you want to leave with the audience before we end? Yeah. One of the things that I do share with my audience and my friends, as well as, especially in the tech industry. And that is mostly when you see someone who is, who is sharing some knowledge.

Muhammad: BC, usually the end product and not, not failures that has happened. And I share this with everyone that most of the times, whenever we see someone cool, they don't have any idea of what they are doing. Most of the people I know they don't have any idea. I don't have an idea of what I'm doing, it's good to always reflect back on the things that you have done already.

Muhammad: Then the things that you have. Kind of when you see someone who is doing much better, because I, I realize a lot of people, it's just good to not catch up on that and keep everything low and then share whatever you're working on. If you have little projects, share those. If you have small things that you're working on, share those as well.

Muhammad: That's the best way to make connections? I mean, I didn't know that in, at all, we met on poly work and I think I just started using it like I'm, you know, out of no reason. And it's a great way to just share all those things. So yeah, that, that would my thought of today.