The work we do as programmers isn't always glamorous. You're not always launching some site that requires weeks of teasing, or a new feature that has its own marketing component. Sometimes, you're working on a package that doesn't have that many users, but still needs some effort put into it. And that's what I'm doing today. So this particular package offers Cypress integration for your Laravel applications. And real quick, if you're not familiar with Cypress, it's a JavaScript end-to-end testing framework that looks something like this, and it's really great. So this package makes it a little more comfortable for Laravel developers to interact and set

framework that looks something like this, and it's really great. So this package makes it a little more comfortable for Laravel developers to interact and set up their environments. For example, call this artisan command, seed your database, refresh your database, create a factory, log in a user, log out a user. All of that is available through this package. And it also allows for proper environment handling. Anyways, have a look here. I've set up a condensed version of the team spec at LaraCast. Have a look at one of these.

I've set up a condensed version of the team spec at LaraCast. Have a look at one of these. It shows a page to create a team. Okay, let's log in a Manager, visit the page to create a team, fill out the form, we'll call it Acme and submit it, and then we assert that we are redirected to the team dashboard and that we see some kind of team created flash message. Now if I were to run that, here we go, and it passes. And what's cool is I have time traveling here, so I can go back through each section here. This is where we visit the page, this is where we fill out the form. It's a little hard to see, but you can see it right up there.

So how can we allow for this? That's what we're working on. Now ultimately, we will integrate this new feature into the package. But to start, I haven't worked on this at all, so we're going to spike it out. We're going to create a brand new project and just play around with it and see what we come up with. And then once we have a better shape in mind, we'll switch over to the package. All right, so I'll close that out. And I've already set up a project called Cypress Work. Let's open that.

And I've already set up a project called Cypress Work. Let's open that. Okay, so we have a brand new Laravel project. Let's go ahead and install Cypress. And to begin, we have two steps. First, we install Cypress, and then we install the Cypress integration package through Composer, as you see here. All right, so immediately, Cypress will add some initial boilerplate. Now you'll see it includes a bunch of example specs. Let's switch over to the Electron test runner.

Keep examples when you're first learning, but then when you're done, you can just delete that. And then you have your support. We can go over all of that, if you want. But next, we should pull in the LaraCast package. There we go. And then you'll see that exposes a Cypress boilerplate command. We can go ahead and run that. And what that effectively does is it copies over some initial scaffolding so that you can be in control of it.

And then when the suite is done, we return the environment to your local environment. And this swapping aspect, it's a little wonky, but it's fairly common when you're doing end-to-end testing like this. So basically, when you run the test, it will back up your local environment. It will switch environment.cypress literally to .env so that it then becomes your primary environment. And then when the suite is done, it reverses it. Okay, anyways, next you can see we pull in, if we scroll up, some basic Laravel commands and assertions. So you can add, we give you one to get started, assertRedirect, but you can add more here.

and assertions. So you can add, we give you one to get started, assertRedirect, but you can add more here. Next, your Laravel commands. This is everything you need for interacting with Laravel. And you can see how to use it. Cypress.logout, give us a CSRF token, create a factory, refresh the database, all of that. Okay, so final thing is we need to update our base URL. And you'll do this for any Cypress project. So let's open up cypress.json, paste that in. And then our URL, in this case I'm using valet, will be cypresswork.test.

So let's open up cypress.json, paste that in. And then our URL, in this case I'm using valet, will be cypresswork.test. All right, and that's it. We're all set to get started. So now let's create just kind of our hello world one. This will be called homespec, describe home, and we'll say it loads. Okay, so let's say cypress.visit the home page. And let's just expect that to contain my site. Okay, let's give this a run, npx cypress open, or you can do it directly through the terminal. Again, I'm going to use electron here, and we'll open that up.

Okay, let's give this a run, npx cypress open, or you can do it directly through the terminal. Again, I'm going to use electron here, and we'll open that up. And here we go. So notice it's waiting a while. It's checking to see if it shows up asynchronously. But it loaded the home page, but at no point did it see my site. All right, let's make it pass. Let's go to home, or welcome, I'm sorry. And let's see if we scroll down, I think this is the logo, right? Let's see.