Testing Web Apps with Cypress

Sign In Test Solution

Steve Kinney

Steve Kinney

Testing Web Apps with Cypress

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

The "Sign In Test Solution" 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 talks through the solution to the Sign In Test exercise and introduces Cypress Commands which will help make common tasks more reusable.


Transcript from the "Sign In Test Solution" Lesson

>> All right, so the mission was to not only deal with signing up. But then the other part of the process, which is seeding the database, and then signing in with an additional user, or with our existing user. The other thing that I kinda have is that failure mode that we were talking about as well, where we'll both seed the database with a user and then try to sign up as that user and see each of those kind of like play out.

So if we kind of even think about the failure mode piece and kind of turn this on to the only thing that we're gonna do, And just so you can kinda see the end state, which is getting this, this is signing with users. It doesn't exist. So this one is resetting it.

You could also have the failure mode as well. So you can set everything as you need to get the conditions that are necessary right. So this one will reset the database. Sign in with a user doesn't exist. Same thing with seed, we can also sign up. They're all kind of variations on a theme.

But here, yeah, the one that you were tasked with, we simply see the database and that is half the process that we had before. But the one thing, I mean, there's two kind of parts that are still problematic about our original problem statement. One is that even going through all these steps like watching the test, there was only three tests that ran.

Before you watch the entire set, it's still kind of taking a while before we get to that final page. Cuz again, we've gotta go through, we gotta fill in these forms, we gotta sign everything up. So one option is, yeah, to mock this stuff out. Because again, if that's not what you're seeking to test, if you're testing the does filtering the posts, work the way that I expected to then the hammering in true end to end test on a login.

Just testing that when you already have end to end test the test the login is costly on time. If you're using GitHub Actions, you're paying by the minute. So both in your time, which is worth money, but also your money, which is worth money, as well. So kind of getting both of those and considering both of those is, I think useful, but in this case, we have the ability to state it.

We're gonna start with the more immediate problem, which rather than the fact that it's costly, and time, and potentially money, it's also real tedious. Not just for the test to run, but for you to type this, right? You have a bunch of options. Like I said before, it's JavaScript, you can make a function, right?

And that function can run these four lines of code. Yeah, totally. Maybe that's the right choice, too. The one disadvantage there, as we all know, is then you play the import game, right, as you're kind of importing all these files everywhere just to do a very common thing.

But it works. The other option, of course, is to get a slightly different syntax, where we would love to say, hey, Cypress. Sign in or sign up. Now, Cyprus can't really offer this to us out of the box cuz the peculiarities of your signup form or your sign-in form is probably unique to the application you work on, right?

But what they can do is give you the ability to write your own additional command and just attach it basically, yeah, the ability to extend ciphers with what you want to do. So these are called commands. And again, they give us additional methods on top of the normal set on the cipher object the site object rather and what the syntax looks like is totally up to you.

In this case, I literally just lifted the code that we had from the previous test. And I put it in a command called signIn that will take a user object that ideally has a email and password and then will go look for all the right objects, right? Whatever, like whatever you need to do for your situation will work.

But this is basically a way to take common things and bash them together and the ability to pass in arguments in case you need to have some programmability, right? Again, it's just JavaScript. You can have any conditionals in there that you want, you can do any string and interpolation that you need, so on and so forth, right?

So, now, instead of if we wanted to kinda test the sign-in form, we could theoretically go in there and seed the database, right? Cuz we probably wanna keep that separate from sign-in. Cuz we had all those different cases like, I wanna see what the user and I want it to fail cuz the user already exists.

I don't want that user to exist. So on and so forth, right? Sign in, we want them to exist. Sign up, we want them to not exist. And so, we can kinda set all of those things up.

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