Check out a free preview of the full Testing Web Apps with Cypress course

The "Cypress Studio" Lesson is part of the full, Testing Web Apps with Cypress course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates Cypress Studio which writes tests based on actions performed in the user interface. When the command generator is selected, any actions performed within the interface are written in the test file.


Transcript from the "Cypress Studio" Lesson

>> So we're gonna look at two more little things one, and this is kind of just a fun kind of piece, which is this tool called Cypress studio. And it's an experimental feature, It's any kind of other cogeneration thing where it's useful to an extent. I don't know how to rely on it fully, but I think especially if you have a QA team you're trying to go for, we have no test coverage.

Because whatever something something WebDriver thing was abandoned for a really long time and we just need to get some test coverage real fast. I think cyber studio is really good for this, so this is my my test file so and when I'm clear what this code does nothing does nothing right, so let's fire this test suite.

And that one second and we will go into of these cypress studio specs. Again, not that interesting now, if we go into my configuration real quick, You can see I have experimental studio turned on cool, so I'll go back in to here. And you can see very subtly when I hover over the kind of ID statement, this magic wand.

I mean, who doesn't like a magic wand and their UI, all right and so check it out I'm gonna hit that magic wand, right? I'm gonna turn this thing up to five and say I only want things from KFC and then I'm gonna right click here I'm gonna add an assertion.

They expect this to have the text KFC cool and then I don't really know what else to do here. I can click on that and expect the URL to change I can do some other stuff as well, but I think that I made my point I'm going to hit save.

It's going to run my test. I like that it had the same jQuery problem, that I had earlier where did the text. That's clearly like I'm thinking if I messed up with my test and it messed up, it's my markup. But slightly to climatic, but consider we saw human make the same mistake earlier, we'll take it we'll go back to that file.

And you can see that it generated some of the driving and the assertions, right? And again did it make a mistake sure, did you make the same mistake that I made also sure. [LAUGH] So yeah, it'll actually let you kinda click through and drive through your application, and start generating a series of tests for you, right?

I said even with this example I as the best selector, do I maybe need to tweak it a little bi, did it get me like 80% of the way there? Yeah, it did like this it's also kind of interesting where goes through selects KFC I'm not clear that like it got the range selector right.

So it's not a perfect tool hence the word experimental but I think also somewhat interesting. Especially hey, click through this app pieces right and do this set of things I think it'd be interesting to go back to one of the earlier ones as well. For instance, let's fire this one up and add a new test, we'll type in stuff add the item go ahead and move it over expect that one to be visible.

Yeah see some of the classes are going to need a little bit of work stuff along those lines, but you can give it a test name. And it will go through, we go back in here that it does okay, I'll go in there, it'll clear it. We'll type stuff, we'll click on that button, some of these things right that's a very specific ID that you might need to adjust.

But it gets you part of the way there, which I think is really really interesting as well

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now