Testing Inertia with Dusk
Playing
02. Setting up Dusk with Pest

Episodes

0%
Your progress
  • Total: 2h 53m
  • Played: 0m
  • Remaining: 2h 53m
Join or sign in to track your progress

Transcript

00:00
Okay so our first goal is pretty much just to get Dusk up and running and we're actually going to write a very simple test in this episode just to get us started. Okay so I don't have an app at the
00:11
moment let's go ahead and create one out of the Laravel installer and I'm just going to call this my app it doesn't really matter. Let's go ahead and use the Laravel Breeze starter kit and we'll choose view with inertia here and let's go ahead and just skip through these options here. For the testing framework let's go ahead and use PEST you can do this with phpunit and all of the Dusk
00:32
assertions and how we set things up are going to be exactly the same it will just be more class based. Okay so I'm going to go ahead and choose PEST just wait for this to finish and we'll go ahead and set up our database. Okay let's go ahead and choose MySQL I'm not going to choose something like sqlite for here we want to be really specific with our database and a little bit later we're
00:50
going to set up a entirely separate database specifically for our Dusk test. So let's choose MySQL go ahead and run our migrations and create that database out. Okay so once that's done let's cd into the app that we've just created and we'll go ahead and open that up in our editor. Once that's open let's just take a look around the current tests directory that we have here. Now by default
01:14
we have feature tests and because we've used the Breeze starter kit this will give us all of the tests for authentication here plus an example test as well and we have unit tests. Now what we are creating here when we use Laravel Dusk is end-to-end tests that actually hit the browser. Now the reason that we can't use feature tests necessarily with inertia to interact with the page
01:40
is that really feature tests if we just take a look at an example of this example test here goes ahead and hits an endpoint but it's pretty much like an API request. What will come back from this is an HTML response and then we can do things like assert if something is visible on the page but we can't interact with the page because we're not within a browser environment. So what we're
02:03
going to do now is go ahead and set up Dusk and we'll go ahead and write a very simple test. So to do this let's go ahead and first get Dusk installed. To do this we're going to use composer require and this is just Laravel and Dusk. Now we want to make sure we install this only on the development environment we don't need this in production. We will need it in our
02:25
continuous integration environment a little bit later but that will be installed if even if we use the dev flag. So let's go ahead and pull this in. Okay so once we've installed Laravel Dusk we need to set this up. At the moment nothing within our actual project will have changed so we can see that the test directory pretty much looks the same. Let's go ahead and run php artisan and
02:45
dusk install and that will go ahead and install that for us. It will create out all of the scaffolding within our project and you'll notice that it also has downloaded the chrome driver binaries. We'll take a look at that in just a second and I'll show you how to update them. So what we'll see over here now is a browser directory. Now this looks pretty full-on if
03:07
you've not worked with Dusk before this might be a little bit overwhelming. We've got a console directory, a screenshots directory, a source directory but let's just ignore that for now and take a look at the Dusk test case file that we just have here. So this is very similar to the normal test case that we have and the pest config file that we have. Let's just have a look in here.
03:28
So we've got this prepare method here which is going to be useful a little bit later and I'll show you how to configure that. We've got the driver here as well and we've got some options that we can pass into here like disabling the gpu or the headless flag which again we're going to look at a little bit later. So we don't really need to touch this but that's one of the files
03:47
that have been created. Let's jump straight over to this example test and have a look. So obviously because we're using pest here this still looks pretty straightforward, just got a really simple method in here but inside or a function in here. Inside of this function though we now have this and browse. So what's actually going to happen here is rather than just make an http request
04:10
to this endpoint which is just the home page, it's actually going to open this up in a browser session and that is where that chrome driver binaries installation came in a little bit earlier. Now before we run this example test let's talk about these chrome binaries. So what you'll have to do along the way is make sure the chrome driver that dusk uses to actually launch the browser is
04:36
updated. Now to do this we're going to go ahead and run php artisan dusk and chrome driver. We can also use this detect option as well so let's just take a look at the help here and we'll have a look. So we've got the detect option which detects the installed chrome chromium versions. This will match it up to the installed version on your machine and that's pretty much the best option to use. So if we
05:00
go ahead and run this and we'll use that detect option just in here that's going to go ahead and install that for us. So that means that when we go ahead and run this test chrome is going to launch by default in the background so we won't see anything happen but I'm going to show you how to actually launch the browser window on your machine and that will run the test for us and
05:23
because this is being done in a browser environment it means that we can interact with any kind of javascript elements on the page so we can click to open say modals or we can click to open drop downs all of that stuff. Okay let's go ahead and run this test so let's go and just take this specific basic example in isolation. Now to run your browser test is slightly different you can't just
05:49
run pest and then give the name of the file we have to use php artisan pest and then dusk and then we can go ahead and either filter down the tests that we want to use or we can run a specific file or we can just run php artisan pest dusk on its own and that will run all of our browser tests so let's go ahead and run this test and see what happens. Okay so we have an error let's go ahead
06:12
and check this out and let's see what we've got so we've got couldn't connect to server now this is a really common issue that you'll get when you are working with dusk there are generally a lot of issues with this because we're not just working within a framework we're launching a browser which is then going to go ahead and make a request for us so this issue can be caused by a couple of
06:33
things it can be caused by an outdated chrome driver version which we know isn't the case because we've already run that command twice it can also be caused by the permissions within the vendor folder under the dusk binaries so what we want to do is go ahead and set them to the correct permissions we're going to use 0755 on the binary folder of dusk which contains the chrome
06:58
version that we want to run let's go ahead and run that test again and just check if this has worked and we should get green great so the two things if you ever get an issue like a can't connect to server issue it's probably either your chrome binaries are out of date or laravel dusk cannot access the chrome binaries within that binaries folder so just go ahead and set the correct
07:22
permissions okay so our test has passed but what has actually happened in the background here well what we can do if we just run php artisan pest dusk and then bring in that help option again you'll notice that we've got a browse option now what this will do as it says here is open a browser instead of using headless mode so by default the chrome instance will be run headlessly which means
07:46
we won't actually see the browser window but we can go ahead and change that so let's just go ahead and run php artisan pest dusk and let's use that browse option we'll just run all of our tests because we just have one here what this is going to do is launch a browser window and there we go that was super super quick but what that will have done is shown you what it was doing on the page so
08:09
if for example within this test we had any kind of click so if we were clicking on an element somewhere it would show all of that stuff so it will show the whole flow so what i could actually do here just to demonstrate this is use the pause method which will pause for amount of milliseconds let's pause for two seconds and this specific test is just asserting that we see laravel on the page
08:30
let's go ahead and run that again and we'll see the browser window open obviously we see a two second delay there it did see that on the page so it actually physically looked within the browser window and all of the elements on the page to see if it could find the text laravel and of course because of that that test passed because we could see laravel on the page if you're at this point
08:51
and you're following along you now have end-to-end tests running with dusk one really important part before we go is that when we are running tests we need the browser to be showing the latest compiled changes within our project so we haven't modified anything about our project just yet but what i would always recommend is having npm run dev running or npm run build and then a
09:17
ssr server running with inertia if you are using server-side rendering for now though what we're always going to do is make sure that we have npm run dev working then we're going to go ahead and run our test so i'm just going to run these without the browse option and of course we see that passes that means that anything if anything does change then at least your test can keep up with this
09:39
because npm run dev is always going to be real rebuilding everything that you've done on the page okay so congratulations we now have dusk set up and we can pretty much just start to test our inertia apps but there are a couple of other really important configuration options that we're going to look at next

Episode summary

In this episode, we're jumping straight into getting Laravel Dusk set up alongside Pest so you can start writing end-to-end browser tests for your Inertia-powered apps. We start from scratch, spinning up a fresh Laravel application with the Breeze starter kit (using Inertia and Vue), and opting in for Pest as the testing framework.

You'll see how we connect the app to MySQL, run migrations, and take a quick tour of the test directory that comes out of the box. We talk about the difference between feature and browser tests—feature tests just hit endpoints like an API request, but browser (Dusk) tests actually launch a real browser session so we can truly interact with our app just like a user would.

Next up, we install Dusk using Composer, set it up with php artisan dusk:install, and take a look at the new scaffolding it adds (including all the browser stuff). We also handle an important bit: making sure our ChromeDriver binaries are up to date and correctly matched with our installed browser versions using a handy artisan command.

Then, we go through running our first Dusk test, explain what happens in headless mode vs opening the browser visually, and how to use things like the pause method to observe what's actually happening during a test run. Troubleshooting is covered too—like fixing permissions that might cause "couldn't connect to server" errors.

We wrap up by stressing how important it is to keep your dev server running (npm run dev) so that Dusk always tests the latest version of your frontend. By the end of this episode, you’ve got Dusk up and running with Pest and are ready to dive into real, interactive end-to-end testing for your app!

Episode discussion

No comments, yet. Be the first!