Testing Inertia with Dusk
This episode is for members only

Sign up to access "Testing Inertia with Dusk" right now.

Get started
Already a member? Sign in to continue
Playing
22. Capturing artifacts

Episodes

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

Transcript

00:00
We've already seen throughout the course how useful artifacts like screenshots can be. Now there's also another thing that will be logged to your test directory if something goes wrong and
00:11
that is console data as well. So if you have any kind of JavaScript error you will actually get these output in the console just inside of here. So you can see we've already got one that's just specifically for the favicon which is not available. So these are great for local development because we can jump in have a look and see what's gone wrong somewhere. We can log our own screenshots
00:35
in here to see what's happened. But what happens over on github actions? Well what we can actually do is we can store these artifacts over on github actions as well and all we need to do to get this configured is a very simple update to our dusk.yaml file at the very bottom. I'm going to go ahead and paste these in but again what you can do is you can take these from the github repository if you
01:01
want to. So let's go ahead and just indent this in here and just make sure everything's lined up properly and we just need to indent that in there as well. Great okay so let's go through this really quickly. It's pretty straightforward. We give it a name on failure. We're then going to go ahead and use the upload artifacts functionality within github actions and then we just give it some
01:28
properties. So the name here is going to be screenshots and we give this a path. We do exactly the same thing from the console logs as well and we reference where these artifacts live. So these just need to match up with a path that we have within our own project. Okay now that we've done this let's just go and create out a specific test which just writes a screenshot to our artifacts
01:53
section. So let's go ahead and create a test for this. So php artisan dusk make let's call this screenshot test and let's head over to that screenshot test file and let's say it creates a screenshot. Obviously this wouldn't actually be a test but we're just doing it just so it works and let's go ahead just screenshot the home page. So let's say screenshot and home page
02:20
and that should be all we need to get this working. So now we've updated this to go ahead and log our screenshots from that directory and we are actually creating a screenshot here then we should see that over in github actions and of course if you get a test failure this is the most useful part of this. You can then go ahead and dive into github actions and see where this has failed and get a visual of
02:44
why it has failed. Okay I'm just going to go ahead and run all of our tests just to make sure that this is good so let's run test dusk without the filter. Okay so all of them tests have run through successfully and of course we should get the home page screenshot just over on there as well. Great actually just before we go ahead and push this up I've just realized that over in dusk we're only
03:04
doing this on failure so why don't we go ahead and try and fail this visit dashboard and let's just assert that we see something and obviously this is going to fail and cause us an issue. So let's go ahead and say php artisan test dusk filter down to this one that fails of course and then over here we see a login page so that is kind of the thing that we're after. You can of
03:36
course change around this to do it on any condition it doesn't really matter just get rid of that line but we'll go ahead and make this fail. So let's go ahead and add this commit this and we'll go ahead and push this up and let's go over and we should see our artifacts roll in. Let's just give that a refresh and there we go. So this is going to be different to the other pages that we've seen
03:58
if we just click on any of the actions at the moment we don't really see anything we just see an annotation section in here but we're going to see a slight difference now that we have chosen to upload these artifacts. Let's wait for this to run through and then we'll just give the page a refresh and see the difference. Okay that's run through now and of course our test has failed
04:20
let's give the page a refresh scroll down and we now have a brand new artifacts section. This contains the screenshots that would have been taken as part of our test failure so we can go ahead and download these we can't view them at least at the time of recording directly in here but we can go ahead and open these up and sure enough if we open this up
04:43
and just pull it across here you can see we get the screenshot. So this is super useful for when things go wrong and you need to visually see what's happening of course it's tricky being on a different environment but now we're producing all these artifacts whether it's console logs or screenshots.

Episode summary

In this episode, we focus on how to capture and make use of artifacts (like screenshots and console logs) during our tests, especially when things go wrong. First, we talk about how handy screenshots and console output can be for troubleshooting issues locally, giving us more context when a test fails.

Then, we take this a step further and show how to automatically store these artifacts when running tests on GitHub Actions. All it takes is a small update to your dusk.yaml file—just a few lines that tell GitHub Actions to upload your screenshot and console log folders as artifacts whenever there is a test failure.

To demonstrate, we create a quick dummy test to generate a screenshot, then force a test to fail so we can see the whole flow in action. After pushing the changes, we refresh the GitHub Actions page and check out the new "Artifacts" section. There, we can download and inspect the screenshots from our failed test runs—super handy if you're debugging remotely!

By the end of this video, you'll know exactly how to set up artifact uploading for your project, allowing you to visually track down bugs even when your tests run in the cloud.

Episode discussion

No comments, yet. Be the first!