 Developing on Windows today is much better than it ever used to be, thanks to things like WSL, but there's still one big pain point which is testing on Safari. But luckily it's actually possible and it's relatively easy to set up and get started with, so let's take a look at how we can do that. Hello my front-end friends, thank you so much for coming to join me once again, and if you're new here, my name is Kevin and here at my channel I hope you fall madly, deeply in love with CSS. And one way we can be less frustrated with CSS and just front-end in general is to be able to test on Safari if we're on a Windows machine. So let's dive right in and before we get into the nitty-gritty of everything I just want to say a big thank you to Matia who runs Joy of Code and who is the one who wrote the post on how we can actually do this. So everything will be linked for Matia's stuff in the description down below if you want any of the things I talk about. You can see right here we have this site, this post that he put together on setting everything up and I'm going to be following his instructions to do it. So if you prefer the written version go check that out and he also has a video looking at this as well, so I'll link to his YouTube too. And what we want to be doing is testing this out getting it running and seeing how we could test something like this where I used container queries to build out this this layout here that wasn't the greatest but I want to make sure this is actually working also in Safari. So to be able to do this Matia's thing uses playwright which is a way that we can test modern web apps and it's very easy to set up and get running. So the first thing we want to do is to initialize the project but we need somewhere to initialize it. So what I'm going to do is just come onto my desktop and I'm going to make a new folder and I'm just going to call it browser testing but you can call it whatever you want to call it it really doesn't matter and what's important is we have hyper or wherever you're in your terminal to be inside that folder. So I'm going to do cd for change directory put a space and then we're just going to take this folder and drop it there. So even if you didn't put it on your desktop it really doesn't matter you don't have to worry about navigating to it you just push return after and it will be in the right place. So that's nice and easy and then the next thing we're going to do is we're going to do an npm enit hyphen y so the enit is to initialize the project and hyphen y just means take all the default values because if you don't do the hyphen y it asks you some questions that for this we don't really care. So you can see it's gone ahead and it set all of that up and we're good to go. The next thing and my positioning and stuff on here is a little weird so I think it's because I zoomed in so let's just move things around a little bit quickly here we can leave that there actually I just want to make this a bit bigger so it doesn't get all mucked up for you guys and so yeah we have our browser testing and so the next thing we want to do is after that we want to get playwright set up and installed here so in there we can use this the i or let's just paste it in so command shift v the i is for install and then the hyphen d is for it's for development purposes and then this is what we're installing which is playright with their their tests there and the next thing we need to do now that we have playwright installed in the project is to actually install these default browsers now when i'm running through this step it's not actually installing them all right now but you should run through and you'll see it all being installed it takes a little bit of time to install the three different browsers you get chromium firefox as well as webkit which is going to let us test safari and the next thing we want to do is update our package.json file so in my browser testing I want to open this in vs code now so I can just write code and put dot and that should open it for you in vs code if ever that doesn't work and it does not open for you there just open vs code and navigate to the file and the folder you want and open it and then we want to open up this package.json file and it's nothing too complex that we want to put in here but we need to update the scripts so we can actually test the things easily and quickly and that's about it so if you look at what Mattia put here there's the dev dependencies but I already have that slightly newer version but that's fine it should all work all I really want to grab is these scripts that are right here so I'm going to take the scripts that we see here and I'm just going to replace the scripts that are right here everything else I can keep exactly like we had here not a big deal and I'm going to hit save on that so we're we have updated our package.json now we need to do one more thing which is to create a test here so you can see tests and then browser tests dot typescript so you can just create a file here in here and I'm going to call it the same thing browsers dot tests dot typescript so in here just make a new file paste in that name and then grab what we have here and paste it right in and what this is doing is it's bringing in the tests and the really important thing with this to actually be able to run it is that the local host that's here so you can do local hosts you can do things that are running you can put in google.com and it should work so whatever you put here is the site that you want to be testing so I'm already running this locally so I can just grab this right here and paste this in right there and hit save and now I should be able to actually open this and test it and so to do that we can open up my terminal in vscode which is control back tick or you can just go to view and it's in here somewhere you have your terminal that's right there once that's opened and you're here all we need to do is run the test that we want do we want to run chrome firefox or safari I want to run my test safari so npm run test safari and hit return and in just a few seconds there we go webkit has just opened up for me and I'm running webkit on my computer which is going to be basically be safari I can see if my container queries are working or not I can check it out you can see even the scroll bar and everything you will get this other little playwright inspector that also opens up no big deal just leave that open while you're doing your testing and then so you can see my fonts are actually rendering a little bit differently between the browsers so maybe that's something that's worth looking into you also have your inspector if you want to come in and inspect things within webkit it's going to look a lot like the safari one there's the potential that things are a little bit different between what we're looking at here and what we're actually would be getting in safari but this is the rendering engine that safari uses so things should basically be extremely similar if they're not exactly the same but there might be a few little features or extra things in safari that aren't included but the rendering of the page should be the same so there we have it I'm running my page in safari which is really really cool I can play around with the dev tools do all the testing that I want and everything works perfectly fine now if you're wanting to get just into debugging and helping with css in general and some of the things we can actually use our dev tools for to be able to make debugging css a lot easier I have a video for you right here where I took a look at that and with that I would like to thank my enablers of awesome Jan, Johnny, Michael, Mr. Dave, Patrick, Simon, Steven and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome