 Sure. Well, I guess what I can talk to is Yeah, sure. Yeah, let's go over the basics Yeah, so how is this kind of fundamentally different is a good thing. So I can talk your what I'll hear what I'll show is I'll show the I'll show the core OS slack So if you're you know, a red hat employee or if you're a part of the red the core OS community You can join this this user group. Yeah, let me go to share it and and if you have any You know any questions about Cyprus, you know, we kind of answer them in here. So this came from the fact that multiple teams were getting started and a lot of folks Had the same questions and some of the same questions I had when I got started and from my experiences, you know, using this technology is I went in I chose the framework before I had two years of history with it like everything But I had had two years of history with Selenium. So it was very easy to make that difference there So let's So basically if you'd like to join, you know reach out to me. I'll put my email in here And you can ask any questions in there as well, but Let's see, I have an example repo here that kind of shows what I would Perceive to be the best practices. So I can go over kind of how this is a little bit different Let's do a AP and I'm gonna post this in the chat So this is on my fork I'm attempting to get it onto the Ansible fork. So this URL may change But if it does I'll put a link here. So let me go ahead and put this in Here so this is available here. Yeah, so that's this is where I'm trying to like Try to get things we're working for basically for the platform. So Where this is fundamentally different Let's let's talk about words. It's fundamentally different. Um, there's a concept of Let's go over the best practices so Cyprus best practices where this Cyprus in itself is very opinionated and so there I think Probably the biggest difference you'll notice is the over reliance on URL based navigation So there is this pattern against the page object model, which is what we all know and love it's you basically With the page object model you what ends up happening with the page of object model is you basically create a Copy of your application in test code that defines how that you know, the application looks and feels And how you can interact with you know individual components, you know down the line With Cyprus they use jQuery to make it a little bit easier to you know, work with specific tests Or a specific parts of your application. So the tests are very different So That's probably the biggest difference in terms of best practices is to get away from the page object model and what that looks like is in this test here, I'm sure is The test becomes instead of you know clicking around on this page So let's go here. So if you were to cloud red hats You were to go to this page So these these tests here are designed to run against cloud that red hat If you were to go to this page With the page object model you would do what I just did which is remember what I just did It's a click the login button, you know, yeah Enter in the password field login then click on this nav bar nav here and then go to your you know, the the destined The destination you want to get to but in Cyprus they really want you to navigate and kind of go almost into the level of integration Testing where you're kind of more closely inside of the you know, the functionality of the app So let's go ahead and do this So instead of search it so instead of you know the standard test suite writing or that you know how you would write it normally You go to red hat com login go down here make this available click on this wait for that previous page to load And then let's see the type in cloud and then you type in the tower And then you would get to the search query up here, but the way Cyprus wants you to do it is you You want to authenticate separately from what you're trying to do and in the test You want to let me make this bigger. It's probably a little bit too small people You zoom in you Zoom in yeah, so in this test what you're actually doing is you're visiting this URL and then you're waiting for You're waiting for a network request to come across before you continue forward That's the biggest difference is your you you instead of searching And clicking arounds you do everything you can by direct navigation and then you wait for you know In this case that the authentication token to come back for this before proceeding on the test And then the other big thing here is you get the capability of All of you know jQuery gets a lot of flak for you know how it was used in the past before tests. It's awesome You get a total access to anything going on any element that you want to see so let me go ahead and set that up Really quick so you can see that But from a basic level the the way that you Test the application is a little bit different you Does that make sense? Are not are not Let's see if I can find a better example. Let me check this out. Let me see Yeah, so the Cypress open is what this one is So the other thing here that differentiates kind of Cypress is it has this kind of like this holistic view of Testing so if you think about what you do as a test automation engineer or a developer It's you you write new tests and you kind of maintain those tests as the application changes And then you fix tests when they fail And there's a fourth one which is really you You I When that the tests fail you're ultimately looking for the bug in the code and getting to that point where you're seeing what that bug is Is you know it takes a lot of time, but writing new tests Updating those tests and then finding the bugs is is where I think most of us spend our time That's kind of the three main workflows here. So they they do a really good job with making this Easy to work with so let's pull this one back up By way of a kind of a gooey browser here so this is Cypress and What it's gonna fail because I don't have the My environment variable set but what you're seeing here is Yeah, I need to set my variables And you can see that I don't have my environment several is here too So show you your configuration to show you everything you need to know about what's running But it's good. So let's let's go through that gets the test authorship And then I'm gonna stop because I do I do want this to be interactive I did I do expect there to be like questions about things. So let me go ahead and get this off my screen so that I can Go ahead and I'm gonna have to delete those now I'll have to roll those credentials It's fine Yeah, it's more or less So what we're gonna do is we're gonna take a look at the the gooey browser here And please somebody hop in with some questions or something Is there anything coming across in the Q&A? So we're gonna launch the same thing again This time with you know credentials to be able to log in and I've masked the credentials in the test So let's see here. Let's run that test again. So you're getting kind of the view here I'm sorry of the test running So the test is now running and what you're seeing here is the the real-time view of what's the Of what the the test seems and then you're seeing Kind of a snapshot view of that over time Nikola, are you seeing any questions in the cure Q&A? Yeah, I was about to point out that there's a question in the Q&A Okay, and Yep, there's actually two questions. I don't know if you can see them. Yeah, got it. Okay I heard that gauge and typo is good for web testing gauge gives a high-level girl concepts degree They can clean up your test script. Yeah. Yeah, so that's that's a really important thing to talk about So a lot of so this fall this also follows kind of the the BDD style of Describe and it but this does not have the kind of the abstraction of gherkin, which is like business logic So the the tests don't really follow that but uh Yeah, it does clean it up and makes it very easy to read one thing you can do With cypress is you can get something pretty close And I'll show you how to make these tests a little bit By doing the psi dot log command So what you can do is you can type in psi dot log Let me go ahead and Um, show you this test Yeah, so I've got automation hub test up. So, um, let's see if this runs Okay, please run Um, yeah, I'll show you I'll show you can how you can get somewhat close to that with the psi dot log command but um Okay, so the test is running here. So what you are seeing is the test running locally on my machine And it's testing, you know red hat calm or cloud that red hat calm But it's doing it in such a way that um It's basically taking snapshots of the dom in time as it records everything going on So I'll show you how powerful it is when we go and go back here But uh, you can see all of these network requests going across on the left hand side And you can see um, you know the effects that has here So when I'm going to go ahead and stop this test, but yeah, so you can see at every point in time What's the test saw? So the test at this point saw this field. So remember how we talked about I'm going to pin here Remember how I talked about I saw this Um, this we navigated by you were all and then we had to wait Well, what we were waiting on was the definition of the sso request that validated that we were able to move on in the test Here so once we got there then we we had the information that we knew to say We are done waiting the application has the information needs to move on to the next step, which is this one And then we can see kind of so I can I can take a look at everything on the screen with the selector here Um, you know, this is what the test could see so I could write a test That does that if I wanted to I could um, you know manually click on this We kind of see that sort of thing It's pretty powerful. Um, but also it lets you expose things to your console. So, um When you're writing a test it, you know, a lot of the times in ui testing It takes a long time to kind of figure out what the what selenium sees or doesn't see with cypress you can Uh, you can get the object at a high level and then figure out what it does or does not have visibility into So in this case you can see and I'm sorry to not the biggest to see if I can make this bigger Um So you can see here in the chrome dev tools Cypress found this element that I specified which was the href yielded it And then I can get more information about it if I need to Um, and it talks about the kind of the assertions that come with it Um, and so when you're writing a test and you're like this isn't I can't see this or I'm not interacting this with Or what I think to be true you can stop the test and see if that's true. So in my case I actually don't have anything else about this that's interesting because my selector The thing that I care about in selecting this thing is so Um specific there's no ambiguity and that's why design when you are using locators to find things in your application You want it to be so specific that there is no ambiguity that it that it doesn't kind of change over time So that's why we're using this By grabbing the href and and if you're you can you can put wild card matches in here if you'd like so you can make it So it matches only a part of this That sort of thing um But that's that's kind of the two biggest things between the difference between the selenium is kind of the the workflow is different It's very easy to kind of write the test in this workflow of get to a specific part Um, and then and see what the test sees And that's what's always missing from selenium is seeing what selenium sees That's what's so cool about cypress. It's so easy to do this. Um And then the the other thing I wanted to show Related to this if we go into the cypress browser We look at the runs is you have a kind of like a dashboard view. This is the other differentiating feature There's a dashboard view of all these tests as they run Um, and you can get like how long they run top failure slowest test common errors You get the kind of the video recording of tests Um, and you get so you can kind of get a history of where they fail as well So you can you kind of get this view so the the overall workflow as a cypress automation or Using cypress and test automation is uh, it greatly reduces kind of Troubleshooting And all of the things that come with it. So you can see here it failed the first time It failed the second time, but it succeeded the third time therefore is considered a flaky test because it failed a few times um So that kind of gives us that view. So let me stop looking at that. Um, but yeah, so going in let's let's add that side out log Then we're talking about so in this test that we just wrote um One thing you can do to get kind of that Kind of that view. Let's see. Which test were we just running? Let me just run this one is you can um, you can give it um so You can say cy Log and then the commands and it'll appear with business. So can can navigate to the um the Let's see hub collection for And it's cloud and include this as a log in the statement. Um, let's see should it detected the file change So it should rerun automatically. Yeah um But yeah, this is how you get closer to that vdd style where you have business logic Uh, you know displayed on screen here, but the actual you know the abstraction layer between modeling everything with gherkin um Isn't there? Yeah, so you can see you could you could write basically notes to somebody at the business level to say, you know This is what this step is doing um, and then you can move certain components Into, you know custom functions so that you could get something pretty similar. Um, so let me stop this test. Um Let's see how effectively to prepare clean up data before after the test environment Yeah, so, um, exactly. So that's a huge huge thing. So for me um for my style um Let's see if I can pull it up. So we have um I'll answer it with why I do it the way I do so with um My the project had to work on awx I wanted us to be able to run with perfect parallelization So let's see if I can find it And so In order to do that with perfect parallelization You have to make no assumption assumptions about the state of the test before it starts And you have to make no assumptions about the um the data that exists before the test starts um To be like allow for perfect parallelization. So it controls everything and um, so you can put a before each In any in anything. Um, let's see you can put a before each As you could do in any other drop script framework to basically describe how you before you do this kind of setup. Um, you know Actually, I can just show you the code. Um, let me pull this off screen. But yeah, so Um, I so I don't clean up after myself. So part of the test design Here is to be as fast as possible. So we're running um hundreds of tests um In 13 minutes effectively Um, which is awesome. Um, so cypress when you use their dashboard service allows you to send Uh, it basically does this test load balancing concept where it'll tell you, um, You know, if you split up your test run in parallel this many ways you can save this much time So this is saying right now I'm running it 17 different ways against 17 different machines If I wanted to save a minute and 30 seconds I could split it across 26 machines. It costs more, but I get the results faster um Yeah, so the design the design of before each and data preparation is all What can you do in the in a single test that does not influence the anything else going on in any other test? um So that whole mantra of leave no trace Um, it doesn't really add up. Um So let me see You don't have to clean up after yourself. So I just do before each is and a lot of what we do is I'll show it here in a second is Um, do as much as you can in the before statement. Um We use our internal s we now are we use our public sdk to um, you know, I'll just show this here So this is not there's no company specific um thing here, but um This is closed source, but not not to the extent that it needs to be But yeah, so the in the before each here We are creating an application using a helper function that we created And we add some specificity here of a Basically a uuid We generate a uuid and then you can alias this to use in the rest of your tests in the context of this sweet Or in the context of this so this means that Um before each of these individual tests starts it has access to this resource that's created only It created and not deleted so you can do if you wanted to you could do after each to delete it. Um That was a rambling way of answering that question. Um, does that make sense broke up? Um, did I answer it? Is there a chance? Yeah, so Paulina. Um, yeah, so, um Here's uh, yeah, so to talk about my experiences with it. Um, it it The um, I'm learning about it. I'm two years into it. I did I did selenium for You know seven years before that and um, the thing that I'm learning about it is that um They keep moving things forward So they they had they had most of the functionality that selenium had Selenium had except they didn't have multi browser support and when they added that they got most of what you know Selenium provided in terms of testing But in the meantime, they've actually been moving the you know the goalpost Um for the past two years they keep moving it moving and moving it and so um, you know as you know As I've learned about the tool as I've learned about you know testing in general I've learned to kind of like Go with the flow on this one Um And uh, so an example of kind of the stuff that they're adding like here's here's a pretty cool thing that they're adding Um, they're making this easier to get started here um soon Oh, uh, let's see If I do, um Let me run this again. But yeah, they added this studio program Paulina that helps you get started. Um, I I don't have it set up here but uh cyclist studio Is now built in um So if I can find it Yeah, so um, let's see if I can get this working. But effectively what you can do is um, see if I can get to this So I'm going to let this run right now. But effectively what you can do is Use this gooey editor that we just looked at to get started writing a test and it'll write the test for you um so I'm gonna let this finish And if it finishes without errors, I believe that means I can write a test So that finished Does anybody else have any questions while we were for this to finish? Um, or did anybody have any experiences? We're losing people I can I can um, so it finished Unfortunately, it's not letting me Um, it's not letting me do the studio view. But yeah, so what you can do um Yeah, so jerry. So yeah, so that that's that's it. Um, so it is a paid service. So this is a um It is a paid service is uh, so for open source projects, which is what we qualify for We don't have to pay for it. So if you do have open source Um, if you work for an open source product, uh, you get All of what I just showed for free Um, and that's their kind of like goodwill towards this community because it is an open source company um, but the the the payment For this stuff is actually quite cheap Uh, the I mean the the pricing i'm not here to sell it. I'm not here to sell it But it's quite cheap. So we are we have an open source version of our test suite and then we have a closed source version of our test suite. Um and Unfortunately the the both are behind, you know, both are closed. But the idea is that eventually it'll become um Available for everyone. So let me see pricing. It's uh, it's pretty cheap Um, so you can you don't have to pay anything to get started Um, and you get 500 recordings a month with three users No problem at all. Um, it's when you start to get You know as the team kind of expands the number amount of work that you're doing Um, that's when it starts to get more expensive. But yeah, it's a hundred dollars a month Which that's the thing about it is like, um Um That's no brainer no brainer for some of this stuff like the ability to Automated test load balancing is the only other thing I know of is knapsack knapsack pro that to do this for you and that's more than a hundred dollars a month. Um This this feature alone of automated test load balancing Uh is worth a hundred dollars a month. No no questions asked. Um Or I guess no problem at all in my mind Um, I don't even know how long it would take you to develop something like this in terms of the dashboard. Um but Yeah, there's a whole bunch of like analytics that you you get along with that. I don't use um I sound like a fanboy I'm sure I do but yeah, it's it's one of those things where um, you know, I I have been trying to solve this problem for the last seven years. Um, and with like truly You know, truly pure perfect test parallelization and now that I saw that this was built in With the the service, you know, it was a no brainer Um But does anybody else have any kind of experiences or is anybody else running uh an alternative to cypress? Um Oh, okay. Jerry. Yeah, can can I use the cypress to automate parts of a test? Let's say I do something manually And then run cypress to do something tedious that is hard to do by hand Uh and continue doing it manually. Yeah, you can. Um, so you can do a cy I think I think it's cy debug um Let's see if I can do this Try this again Yeah, I'm curious why um, this is configured for um, this is configured for running Let's explain. Oh, no, it's not. I'm sorry. Let me I didn't pull down the latest. I apologize Uh, let me stop this really quick. Yeah, let me let me let me show you the writing a test manually. Yeah, awesome. Cool Okay, awesome Yeah, I needed to enable the flag here experimental studio true. Um, it just came out like I said to keep It's so rapid. Um, that it, you know, it constantly changes. Let me show you. Um, maybe maybe this will help explain it. Um Let's see. Let me let me show you what this would look like Yeah, if anyone has any other questions I can answer in q&a. Um, let's see Yeah, we moved. Yeah, pro cup. We just moved from night watch. Yeah, that's the one we used to use Uh, the biggest question for me is how to smoke test a registration process or Answer the creation without the db cleanup Um Yeah, yeah, well that uh, so the biggest question is how does the registration process Without the db cleanup So you can okay, so this this just finished. Let me show um the Let me show you the manual stuff. Okay Let's let this finish This is not like running while presenting. I don't know if you all can hear but my uh My laptop sounds like a jet engine right now Here it is. Yeah, so here's what you can do. Um, so this hopefully answers, uh, some of the questions About you know getting started Paulina, you know, this is one of them. Um, and doing things manually is possible here Um, so we're gonna let this We're gonna We're gonna let this thing finish And right now Yeah, um So the while we wait for this to finish, um The way to do that pro cup is with the side dot task command or the side dot exec command And i'll show you the api here in just a second because what we're doing pro cup is we are interacting There you go. So um studio commands. Okay. So I hope you all can see this. Um, but I am going to um interact With this and so I'm gonna let's say I want to Uh click into here and type in the word. Um, not not available So it does that clears that Um, it shows me all of the you know the the what's going on in the browser Which is going to be super important and then I can clear all Clicking on that And then let's say click on this one And then Let's do that. So I'm Going to save it and so what just happened is I actually just wrote Um into the test See if it shows me where Yeah, right here. It shows me. Uh, I just wrote into the test based off of clicking around So it makes it really easy to get started. Um with this because you can it's basically like the selenium ide Um in terms of writing tests you can actually just navigate around to do all the things you would want to do Um, and this is new. So this is a beta feature that just got released like a week ago And so what I said about, you know, um, you know the pace of the how this is moving is all going in the right direction They're all making the right decisions and it's moving so rapidly in a in a given direction Um, yeah, so let me show you the the task API. So the psi task What you can do with psi task is you can just do arbitrary of You know interaction so you can um and I in my case, let me let me do exact exact might be better We have um The ability to just run things arbitrarily on the command line So with exact you can do um It run an arbitrary scripts On the host machine that's running cypress So if you wanted to seed the database if you wanted to modify the database You could do that by executing raw command line things and the important thing is that Who cares about that the the thing that you do care about is Uh any output that comes back to the command line like anything that you would see on the cli Then becomes available as an object in your test. So in our case when we are Let me show you the example here. Um See I just had it up. Um in our our case here for Our test on the atwx thing. I talked about using a stk was actually a python based stk um, so when I Let's see if I have a good example Yeah, here's that example again. So you're talking about, you know working with the database Um anything you would do you could do arbitrarily here. Um, you Yeah, exactly pulling it exactly. That's it. It's the best way to get started. I think and then You can go back and kind of rebuild it over time Um, but yeah, so you can see here that you can create So this this function right here this met that this functionality here. I should say functionality Actually runs things on the command line using our stk in python And then that is aliased As an output. So this becomes an object called app and an app has Things about it that come back from the jason response. So Exactly. Yeah, so you could do that pro kit So you could do that and it will tell you in the kind of the context of what you're doing So you can you can actually go into the database and delete the object that you created in the beginning of the before each step um So which is really powerful So psi dot task and psi dot exact and I think the best Uh, oh, I don't have a good example. I think it's in if you go to their examples um Let me just do db It's eating your database and no here you go. Let's see. They have a good example test Yeah, so you're you're just running a an arbitrary command that's called that is defined in your Package dot json cdb And then you you basically have access to anything about it inside of your test So I think I hope that answers the question. Are there any other events or questions? um I'm using test cafe. I do not have any experience personally with test cafe I've talked to multiple qa managers. Um local to Durham where i'm at and um About cypress and these alternatives and the thing that keeps coming back is um There is no real benefits using one or the other Test cafe or cypress or selenium. It's all about kind of like having a champion and having um Having somebody kind of leading the way for one and being passionate about one. So um, I don't have any experiences with test cafe But from a business standpoint of view, I've I've heard that they're kind of interchangeable that people are happy with both um, I'm personally happy with cypress. Um I would love to you know play with playwright for example would be fun to work with Um, that's the one I really want to play with Um, but test cafe is also good. I've heard great things um uh How how much time do I have left? Then nicole So you should have until, uh pre 45 so Uh 20 minutes cool um Let's see Yeah, let's talk about the the other you know the the other workflows. So we talked about Um Let's do this Let's see What do I want to do? So I showed the studio, which is new. Um, I showed the video recording and parallelization of the dashboard Um, github actions are really cool. So it's got a really cool ecosystem So if you go to the the link I posted for aap visual I This is part of this is actually to show some like I'm going to call them best practices. I probably not but um, we have some um Things set up with github actions. So uh github actions are allowing us to Let's see if I can find To do some really cool stuff. So in our case here, I've set up github actions Which has there's all the thing about cypress is there's an example for everything So pro cop asked hey, how do I interact with the database? Well, I went and found the examples tab at the top, right? I went up to the top of the cypress web page Um, and I found an example of like what what he's asking for and that's what's so crazy is the what makes this so cool is um You don't have to hunt around stack overflow. They give real working examples for everything. Um Let's see if I can find it and one of the ones I found was for github actions They have a built-in github action. Um, that's just some really cool stuff where it'll like post the result of your run If you configure this to Your pr so you can see it you can see everything you need to know about it like a link to the commits that change view the run In this case, uh, it'll identify flaky tests for you and even include a link to the thing that failed Um, if it does fail, which I think a pretty cool workflow Um, kind of it's the kind of the full circle workflow, which is I'm running this nightly if I want to I can run this on change if I if you know if better And at any given time I can always go back to the individual commit That broken I changed it so the the the the relationship here is always kind of full circle So in our case, we have a lot of dependencies. Um that are related to some of the visuals testing stuff that we're doing with cypress And that breaks a lot. So So we set up the pendabot Which is kind of allowing us to Yeah, right here. We're using appletools as a dependency and this breaks all the time So we we let You know github actions and the pendabot, you know run through everything to make sure it it actually works And it's actually complete before moving on Um And uh, this is one example of like kind of the general ecosystem that is available And it's got a really good plug-in ecosystem cypress Excuse me, so uh, these are these are more than just examples. These are actual like, um These are actual plugins. Um, and they have different levels. So they have different levels of support So they have like official Community or official stuff. That's like basically built in but not real not really that eventually gets moved in So over time things will kind of graduate to being included in the actual api Um, but then you also have just general community of people that Are working on things and they'll do a really good job of making sure you're aware of them on their plugins page And um, you'll have things like this That are verified that you know verified that it continues to work and and I think in this case verified means The cypress team make sure they don't break this one. So it's a really good It's a really good ecosystem to be a part of if you have an idea if you have something that you want to add You can post it up here and then it'll be promoted over time So official means that it's officially supported is and they'll the developers themselves will fix it Yeah And uh in terms of ci. Oh, is there uh No, I don't think so, uh, john. Um, I don't think so. It's uh Yeah It's all j s space. This is only j s. I think uh, so play writes Fucking that Yeah, if you're looking for so the the microsoft team Uh, I don't know if you went to my the earlier talk that I gave but they they bought the they're they basically poached the google chrome puppeteer team to basically make a fork of puppeteer called playwright My phone's listening to me. But um, yeah, so here's this is what you would want to use So this is very similar. I'll post a link. Um, very similar in terms of total functionality Um, that of what cypress has it doesn't have the complete ecosystem but it has all the raw power of like manipulating uh xhr requests and that sort of thing and actually one of the cool thing that playwright has that um cypress doesn't is um the ability to read Uh, web socket information so information from the web socket. You can't manipulate it So you can't do that not yet at least with cypress. Um, that there is a plugin An unofficial plugin for websock. It's actually we can go look at But yeah, um John does that answer your question? um But it basically comes down to like, um You know, this is a front end testing tool for front end testing So it I mean most front end developers are using javascript. So it's written in javascript Um, it and it's they As someone who's in qa. I'm in qa. They do a really good job of like, um, kind of elevating Um, the documentation to the point that it's really easy to get going and really easy to be dangerous, which is really cool Um, one thing I do it did not show that I did want to show In the test and if anyone has any more questions, please ask one thing to show is kind of What's happening next with cypress? Um, and let's see if I can find it um Here so hard to see. Uh, let me make this much much much much bigger. I apologize Huge huge So Um, if you recall Here on the left, this is the network request that the browser sees that cypress sees because it's in the browser So you're seeing all of this network activity. So anyone that's using a rest api or graph ql You'll have access to all of those commands and you'll have access to all that traffic. So you can do things like here um, you can intercept the requests And what's really cool about that is you can take the original request And modify it on the wire So in my case, I I'm making an insertion just to make sure that the the api request isn't changing But I want to actually modify the time stamp Uh, just the time stamp only the time stamp and I have access to this object And um the jason itself and I can simply Uh intercept by grabbing the request And then modifying one part of the data Um the data object and then sending it back out with a modified body So it's really this looks more complicated than it is because just because I want to make sure that it's you know logging things to screen Um, but I am I am taking a real time stamp And I am making it 10 years in the past so that the app looks like this which is really right here I want this to always I don't want to modify the value of this particular field I want to verify that the application um Is receiving a a different payload from the api So this is a cloud.redhat.com is a running live service. Um, I don't want to have to create You know a mocked service intercept or something like that in my case I just want to take 99 percent of the payload and modify one thing So that in my case, I want this always to look the same which is 10 years ago And I could do I could calculate that I could modify I could modify any individual component here To grab it on the wire um Yeah, so so there's two parts of this and mocking mocking and interception are two different things So in this test, let me let me go out of go out of this Let me close this down. Let me show you what I mean On this test We want The we have a time series chart In our case, we have a time series chart, which if you think about time series charts, it's going to change a lot, right? Because it's going to calculate the current date. It's going to calculate that sort of thing And that's what you want to test. That's the interesting thing. So in our case We are sending um It's going to take a while. We are sending So he pulls up a modified Jason object To the chart so that it always looks the same You look at the date see we created this object on the 28th So the time series chart is always going to render something fixed in time And the reason we're doing that is we're actually using these tests for visual testing Which compares images and your application over time. So we actually wanted to fix What is rendered in there? So we not only so it's it's not it's not the same. Um, I don't know how to explain this let me think about it It's a fixture. Let me yeah, let me let me let me show you what this looks like. It's a fixture so it's it literally a See, how do I make this pretty looking? Is it control arm? Uh, well anyways, it's a real jason response that the that the web app expects to see um And you know, we can manipulate this to make it look pretty or we can create all these edge cases or whatever But this is a formatted thing. This is this is actually formatted. Um But what i'm what i'm saying is this is going to the next level which is It's not actually using um, like a static jason object, which I think like what knock does It's actually modifying the request from the perspective of the api response um For the browser itself. So cypress this is on Cypress is actually sitting on the other side of the api Just making the change. Um, you can't see my thing So it's sitting on the other side of the api making the change The fixture data is sitting on the, you know, the test code side where we want this thing to be the same And we make assertion space off of that um super cool stuff And again, it's super it's really easy to work with that's the that's the best part is um, you saw All of this available is data is available. Look at this. Watch this. Let me show you how easy it is to work with I will stop this test This is the object. You see this. This is what was yielded. This is the request and the response. So everything about it is available to me to modify. Um So, um Anything you'd want to do is available in the test and look look what I just did I I found it by simply right clicking on that thing in time that individual request in time And taking it to the it's the out you can freeze a test in time as well Um, and go back to this is what this is what the dom saw This is what the the cycle with the browser and the web app And cypress all saw fixed in time. So where where that should become more clear is You can see where it clicked And what the effect was I clicked on it and you can see now it's saying logging in so after everything that's done You can kind of see that but anyways, um I don't know that might have been randomly. But yeah, so it's more than just um It's more than just stubbing out responses. It's it's real-time manipulation of responses Um again only on api and graphql and xhr requests and you can't do it with web sockets Which is what I need I need as a test engineer and I've asked that the the cypress team directly I need the ability to do that on um web sockets and if I got that They're working on it. But if I got that that would be it like that's kind of the end game for me as a tester Is the ability to modify web sockets on the wire so that you know, I can test all of the I mean think about all the different ways a web socket could fail Um, you could have it time out. You could have the network delay. You could have a corrupted message You could have a missed or skipped message all of that stuff is impossibly hard to mock up or to to to generate When doing system level testing, it's very difficult and you could do it in a unit test But that doesn't get you kind of the the whole list of view of the impact of that. So Um, I need it it doesn't exist yet But I believe it exists or and it doesn't exist on playwright either and I don't think it exists on test cafe so And there's nothing on the docket for selenium 4 or on web socket manipulation But that that's kind of the last thing that I need as a tester um, okay, so we have A few more minutes if anyone has any other questions, um, is cli tool with cypress IO? um Yeah, exactly. So it is so pro cop. That's what I did side out exec He is running a cli tool. It's literally running a cli tool and getting that response The output of that response back into the context of the test um That that you can move on from there. So um in my testing I use a cli tool to do something against the api and the system Then the result that comes back to the command line is then available Inside the context of cypress, which is really cool And then Uh, jerry, I don't know if I answered your question. Um, but yeah, you can do a side dot Debug statement or a side op pause and you can exit out and then come back in But um, I will spend the rest if no one else has any questions I will spend the rest of my time finding the api using their cypress API Spend some time trying to find it. Um So what would that be called? Is it pause? Would pause be a good name for it? Yeah, let's see if this is it Yeah, there you go. That's exactly it. There you go. Uh, see I've never seen this before api before But yeah, that's exactly what you want. You would do a pause After a certain step you could do something And then uh continue back on in the test. So there you go. Yes. So it's you know side op pause Yeah, so this is what happens when you do that when you do that you do a side op pause And then you click next next next and then you can do something manually and then move on Yeah, uh, what you know Paulina? It's it's a great tool. I haven't been I haven't been let down yet Except the only way I've been let down is they promise that web socket support and then never deliver So, uh, I mean We'll get there But uh, yeah, it's been great. It does everything I needed to do other than web sockets um The only the only downside you have to consider is that because this is doing some I'll just say uh, I'll just say like illegal things in the browser context like um injecting itself into the This browser so that you can do all of this stuff It will fail strict content security protocols um, so if you have a live running app um that has um a new threshold of um content security protocols set To a super strict level um to prevent people from manipulating your app in a certain way. This won't work So there there are non starters for this for cypress. So you'll have to talk to your dev team to make sure that um Either in which is fine Because all the dev team needs to do is give you a developer mode that they use themselves Which every every npm project has a developer mode and then you would just run it against that um So that affects that affects us um So they're going to enforce a super level a super high level of strictness So we have to create two versions of our application on ansible one with um In dev mode effectively in the other in production mode And so the plan for production mode is I I want to play with playwright So we'll we'll write some sanity tests or smoke tests for playwright Because that's that's really popular now. That's really blowing up and they added all the different browser support Or language support