Easily test your site across all browsers, including Safari on Windows
HTML-код
- Опубликовано: 11 июл 2024
- Testing is always and issue, and for anyone on a Windows computer, trying to test things on Safari is always a nightmare… well, no longer, as we can create a pretty simple Playwright test to get webkit running on our windows machines! (special shoutout to Matijas for figuring this out and sharing it with the world!)
🔗 Links
✅ The blog article by Matija: joyofcode.xyz/test-your-site-...
✅ The Joy of Code: joyofcode.xyz
✅ The Joy of Code RUclips channel: / joyofcodedev
✅ NodeJS: nodejs.org/
✅ Playwright: playwright.dev/
⌚ Timestamps
00:00 - Introduction
00:38 - Where I found out about this
01:38 - Setting things up
05:38 - Running webkit on my windows computer
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
I been looking for this a long time.
Thank you 😊😊😊
OMG this is exactly what I was looking for and your video just popped in to my recommendation. Thanks
I absolutely need this, thanks sir Kevin!
This is great! I will give this a try. Hopefully this fills the gap I always have when developing on my windows machine.
This is amazing, thanks for sharing Kevin 🎉
Great Find! Definitely trying that!
Wow!
So fast and easy!
Thank you for your job :3
Thanks for sharing Kevin. Yes, the playwright is easy to use. It's the best testing tool for beginners.
Thanks a lot for sharing it, Kevin!
Wow! Thanks man, I once downloaded safari for windows and I didn't like how it behaved and I have found a better substitute now. Thank you
Thanks man! great tool!
I definitely could use that, thanks Kevin!)
Thank you for sharing this, will use that in the future for sure. Had quite a few problems with safari in the recent past where things got rendered wrong (mostly stuff concerning 3D css) while working on every other browser imaginable (even IE). For testing I always asked a friend to visit my dev-page for me which was annoying ._.
Great manual, you helped me so much
thats wonderfull!!! thanks for sharing Kevin
thanks for sharing! its very useful
Honestly to say your video so awesome and amazing Information to share all developer keep going high and i am wait for new video🤗
Thanks Kevin for sharing this nice tool. It coms very handy and saves me an iphone.
thanks for sharing 👌
Amazing and super useful video, Kevin!!! Thank you!!!
Are we able to choose between browser versions? How do we know which browser version we're emulating and testing on?
Thanks Kevin! I'm gonna start using this as part of my testing now that my enterprise PWA is going to go mainstream which means I need to support Safari!
Nice share, Thanks Kevin
The best video I'm in love with your content sir
Thank you so very much ❤
Gotta test this out later
Thank you so much!!!!!
Thanks for this method! It will solve many problems, although not all of them. Like zoom in on inputs on iPhone and limit for minimum font size on scaling, because this are IOS/MacOS "improvements" afaik
thanks mr. Kevin!
this will really gonna helpful
In any window's folder view, you can type cmd into the location bar to open the command line at that folder.
Whole day i wrote snapshot test for react component in playwright. We making snapshots test before big code refactoring. Really nice tool. I recommend :)
Wow thanks for sharing! I thought it's not possible outside of remote tools like browserstack
Great information, thanks Kevin!.
Safari has a lot of problems with CSS, for example with fixed position. Can you explain how to solve typical problems in Safari like fixed position or other that you consider a MUST TO KNOW.
Thanks for all your great videos Kevin!
What's the problem with Safari and position fixed?
@@KevinPowell If you have the element set to fixed and 100% to the page height and you run the keyboard or even the field with the search engine is visible. After the keyboard or the search box disappears, the height of the element is 100% - the height of the element does not extend to 100%, there is a hole :)
So I had to change all fixed elements to absolute to make it work in a crappy iPhone.
Yes, safari is "IE" of the present day ;)
I kinda hate apple for what they make us go through. So many unnecessary nonsense bugs and always 3 years behind on new features (smooth-scroll where are you?). I also think of them as "the new IE", 90% of bizarre bugs I encounter is Safari. The list of css issues is quite long I don't even want to get started, but there is a blog out there that list some of it. I find it frustrating to always cover bugs for this browser that is undeservely so popular. But people like their product, so it is what it is.
@@MrW0rDs hahaha 😂 iPhone users never know the pain developers go through, they just hate on android that is more flexible than iPhones
Kevin, you're migrating step by step from pure HTML/CSS guru to Front-end developer.
I bet that next year we all will watch new Kevin's videos such as "Next ESMAScript 2023 Standard: Tips and Tricks".
Nob , he didin't :)
Thank you
WOW THANKS ALOT❤❤❤❤❤❤
Definitely useful for development, but it won't be enough if you actually want to make sure your page is working properly across different devices. I've had quite a few cases where pages behave differently between Safari and Safari on iOS. Though to be honest even the Simulator in XCode might not always be enough to catch everything
its better than not being able to test at all
Safari is what IE was years ago. A pain in the ass.
Cool! I just used this now. however, stylings doesn't load well but at least the js works well.
ive always thought it would be nice to make a browser where i can pick the rendering engine to render the page with
all browsers should be available on all platforms
Apple has no real reason to release Safari for windows. It would be great if they did, but it's a lot of money, and no real motivation on their end to do it.
Hi Kevin. Thanks again for all your work. I was, however, a bit disappointed - not your fault - after going through the motion of installing the emulator for Safari browser. I was hoping to be able to reproduce the issue that I find on Mac with the background-image cover issue! But this seems to be an issue with IOS and Safari, not just Safari. As you mentioned, it's not a 100% simulation of the behavior.
Not sure you ever covered this issue which seems to blow up (like using a magnifying glass) the image for background, on IOS. max-width: 100% does nothing here! I have an Apple tablet (the only tool I have of Apple) and can't figure out the issue. I have tried a lot of things but was never able to fix this!
Thanks again for your coaching!
There is a much easier way:
1. npm init -y
2. npm install playwright
3. npx playwright install
4. npx playwright open -b webkit
you’re a legend
going to try this....my websites work perfectly on every browser I have access too, but they are glitchy or unusable on newer versions of Safari. It's insane that even old versions of Safari are easier to deal with.
@kevinpowell Hey Kevin, love your content. its really helped me over all with understanding css. Do you have any advice for testing responsiveness across mobile devices. i find i have a very hard try with this at work especially with iphones, avoiding the keyboard when it slide up, etc. Thank you for any input. Your channel is AMAZING!
Great :)
I use a very small VM only to use Safari and Chrome on mac..
I found it way easier, because it takes 30 sec to run and I have my browser history.
Of cause the site has to be live or on a staging site.
im doing this right now
There's another option of downloading the files as per the official documentation without playwright. I made a repo safari-on-windows for making this easier.
How can I test on a mobile device as well? I know I can normally go to, I forget if it’s my router ip address or computer ip address then :port. On wsl though, it doesn’t appear to work. How can I test a site on my own phone, when using wsl?
What version of safari?
Highly recommend using Microsoft's Windows Terminal app from the Windows Store instead of the old command prompt.
Haven’t tried it myself, but are you able to test mobile using the top tab “develop”? On macOS safari that’s where the responsive test mode is at
Sadly the 'Develop` menu only has the option to open dev tools.
Error: Cannot use --browser option when configuration file defines projects. Specify browserName in the projects instead.
I have a virtual version of MacOS. Might switch to this instead. :)
input file selector does not work for me, is this expected?
Does this simulate MacOS is some way? Or is it just simulating the webkit rendering engine? The reason I ask is certain things (like WEBP & AVIF images) only work in Safari if the MacOS version supports those file types. (for example WebP works in MacOS 11+, and AVIF only works in MacOS 13+).
Also... is is possible simulate mobile browsers like "Samsung Internet", "iOS Safari", and "Chrome for Android"?
Just curious.
This is just running webkit on your computer, no simulation of the OS itself. As for mobile browsers, you generally need to test on the actual devices. Samsung internet is running Chromium under the hood, so if it works for mobile chome, it should work for Samsung, though they are sometimes a few versions behind, so you need to be a little careful.
@@KevinPowell Good to know, thanks for the reply!
6:00 I in fact can not see a scrollbar, neither in the video nor when I try running playwright's webkit myself.
Since Joy of code deleted his article about browser compatibility and manually writing the scripts is boring, here are the scripts:
"scripts": {
"test:chrome": "npx playwright test --headed --browser=chromium",
"test: firefox": "npx playwright test --headed --browser=firefox",
"test:safari": "npx playwright test --headed --browser=webkit"
}
The article is still up... its "xyz/test-your-site-in-every-browser"
Life Saver
Are there no browsers for Windows that just use the latest WebKit engine? That would be a simpler solution, but in either case, you won’t be able to test some Safari-specific features such as Apple Pay, keychain integration, and iOS differences. The only way to fully test Safari is with a Mac, but for the simple things, a simple browser that just uses WebKit might be simpler than this, though I imagine this is helpful to test multiple versions of rendering engines.
Neat stuff; you're getting more into the full "web dev" area using tools like npm! Couple of questions on this: 1) How do you "end" a test session? Just close all of the windows that it opens when it starts the test? 2) Do you know how it manages the version number of the various browsers? Like, does it automatically run the latest version of Chrome whenever you test Chrome? Or maybe you have to continuously update the package version manually? Just curious.
To end the process, you can ctrl+C. I should have mentioned that one in the video! As for the version, they update the browsers when they update Playwright, so you might have to keep track on that end of things a little. If ever you update the version of playwright, you might have to do another playwright install, which would pull in the newer versions.
Does it work with Jest?
I tried epiphany browser for mac. It has browser engine like safari
🔥
Thanks for sharing this!
Just out of curiosity why do you prefer windows over mac for web development?
What could be the reasons to prefer Mac over windows? Genuinely asking since I don't know this OS well. But for one it would make my life easier for debugging since 90% bugs I get are Safari...
will it work on Linux?
Didn't know it was possible
I recommend virtualBox, e.g. with Catalina, it works great even on AMD ;)
Unfortunately, what you showed is such a prosthesis not always working properly.
The issue is that on windows you can't both use a VirtualBox and WSL2 on vscode. You can only use one at a time, there is a hyper-v setting to toggle and computer must be restarted in between. Does the job, but oh boy it's not a dream!
You can also test browsers on caniuse :)
You can see what's supported, but you can't really test sites out The "test on a real browser" brings you to Browserstack, which is an awesome tool, but you do have to pay for it :)
Ohhh. 🎉
But I always follow your knowlage
unfortunately this doesn't have IOS support to test websites on iphones's safari
On Apple devices it has much better rendering performance and is less buggy not much thought is put in the other versions seems
safari 💩 on all devices
Hm am I the only one getting a timeout Error after 30seconds, with the safari window closing?
Is it possible to test react app?
What Kevin showed works for every development server of every framework. For example, (I assume) Kevin used Vite, which can also scaffold React apps, which is why he took port 5173. For create-react-app it's probably port 3000. Look at 5:05 in the video, this is where the URL is replaced.
How can I test for ie/ edge on Mac?
IE is pretty much dead and, unless you *really* need to, I wouldn't worry about it, and Edge runs Chromium, so if it works in Chrome, it works on Edge (and I'm pretty sure you can get Edge on Mac now)
@@KevinPowell 🙏 thank you. How do you test for mobile Browsers?
It's sad to see what we have to do just to be able to test on safari but a good hack still. The market share on that site is wrong for sure though. Edge has about 12% as of now so more important than safari in ways even though it's like chrome with the same engine.
Safari is the new IE
absolutely life saver.
few days ago I was using my boss imac by TeamViewer to find out the problem only happening in safari🤪😂.
My comment was deleted so I'll post it again. I recently followed along to your tutorial "Create a horizontal media scroller with CSS", built a page, and posted it on GitPages. I just tested it (npm run test:safari) and there was no horizontal scrollbar, the content was just cut off. Assuming I'd made a mess of things, I tested your CodePen in the same browser, and got the same results. I imagine that it actually does work in Safari and that the playwright version of Safari is deficient. Could you confirm/disconfirm this please (as I obviously don't have access to the real Safari)? PS in my previous attempt at commenting I included the URL to your CodePen - perhaps that's why it got deleted...
They look different in different browsers
@@Cognitoman The whole point of the tutorial is to creatively use horizontal scrolling. If there is no horizontal scrolling (and important content is unreachable) it's more than a difference, it's a failing. Whether the failure resides in the CSS or the Playwright version of Safari is what I want to find out.
Looking at it quickly now in the CodePen I shared in that video ( codepen.io/kevinpowell/pen/ExbKBQa ), it does look cut-off, but if you shift+scroll, it'll scroll, we just don't see the scrollbar, since webkit does scrollbars differently. We'd probably have to add one in, or maybe make it click+draggable to make it more obvious. The animations aren't working either (it just "clicks" to the next part, which I'm fairly certain isn't how Safari would treat it... so maybe no a perfect match).
@@KevinPowell That's disappointing (no scrollbars in Safari and the Playwright browser not doing the animations). I'm going to get a friend to test it and I'll report back. When you say 'We'd probably have to add one in' I take you to mean 'add a scrollbar in'. How could that be done?
Will this run php pages?
It doesn't run anything, it's just the browser. You need to fire things up however you normally would, and then you open the url, whether it's a live site or something your running locally, in that browser :)
Please help!
Anyone know how to test mobile when debugging (running locally) visual studio projects???
I want to see it on my phone before deploying!!
Thanks!
This is driving me nuts.
I assume you mean on Safari from windows: you need to install Safari on a virtual box (find a tuto on RUclips to make it work, there's a way even for AMD processors). Then you can remotely debug your iOS phone (you need one).
@@MrW0rDs can you be more specific? I want it to run on the phone, when I hit run in visual studio instead of the browser on windows. Or, I want to be able to use the phone to go to a URL, a local URL.
@@chezchezchezchez Do you mean on safari from windows, or just on any browser? Every browser has a remote debugging feature to test your website on, your phone
Responsively is also great to simulate different browsers sizes and devices (not Safari/MacOS/iOS though) on one screen! You should check it out.
Safari is a nightmare to develop for. It behaves different in so many ways than Chrome and Firefox, and I've experienced a lot of glitches/bugs/behaviours that makes no sense.
Yeah, it has some different edge cases and can be really frustrating, though it is getting a lot better these days!
So true. I can't express how much frustration I get from this browser only. Helps to know we're all on the same boat ;)
What about Polypane?
Polypane is great! But it runs on Chromium and is more a dev browser to use when developing things. This is more about being able to test your site across the different browsers, and Safari is one we can't install on Windows, so using this lets us do it :)
@@KevinPowell So, from what I'm understanding. The iOS mode, settings and layouts are not comparable or good enough?
This should save me a share of embarrassment whenever I go to the local Apple store to test my sites on all devices there 🙄
doesnt work
Safari is a balls. Loads of es 6 and min max css errors I find. It's the new ie
or use free account of broweserstack
1mn countdown... It goes by too fast.
Another option for Safari testing on Windows is to install the Otter Browser. One of the few (or maybe only) Webkit based browsers kept up to date for Windows.
Oh, never heard of that one, thanks!
Thanks for your comment, I'm trying to testing Otter browser but I try to check my localhost (localhost:4200/) and is in BLANK the page. Only load the Title and some elements but I can't see anything. In Chrome and Firefox works well. Can you tell me how can I see my site, or maybe is a problem of certificates? How can disable?
Thanks @ChrisP-C64
It's a piece of crap. On my local site, it just crashes out immediately with no explanation.
Gotta be an easier way?
Is this hard? Takes 5 min to setup, then you just run it when you're doing your testing. I've been using it fair bit, and once it's setup it's just a few seconds to actually open up.
Thank youu
Safari and Chrome both use webkit, so differences on PC level aren´t that drastic. It would be much more useful to be able to test Safari that´s running on IOS.
chrome based browsers use blink, which is a fork of Webkit. As you said, they aren't that different, but with very specific CSS shorthands and layouts things can change. The holy grail would be using a Mac, because every web engine is available there. Playwright is a bit of a hit and miss under Windows. Is not very reliable with the Webkit (Safari) engine unfortunately :(
As Alejandro mentioned, Chrome forked off to make Blink a long time ago (back in 2013!), so there are actually a lot of differences now. Webkit has support for subgrid, the new color stuff, and more than Blink doesn't support, as a quick example. And Blink uses a completely new engine to render layouts as well. They're not the same at all anymore really.
@@KevinPowell Interesting. Up until now i was convinced they're both webkit based. Thanks for clearing that up.
Hello Mr. Kavin My Name is Sayyed Asad Ullah and I'm a Student of nisar hassan naqvi he also gave me an award of css king
Kevin is the true CSS king. Bow before your master.
Safari on windows is chrome 😅.... no problem will be foud
I hate Safari so much
I feel you, trust me we must not be alone, this browser is a true time waster for front-end developers.
First
Just buy MacBook. It's very cheap. Only kidneys are gone.
On linux simply GNOME Web (epiphany) can be used as it shares the same engine as well.
Hello Kavin Sir, i am facing this type of issue. page.goto: Protocol error (Playwright.navigate): Cannot navigate to invalid URL [{"code":-32000,"message":"Cannot navigate to invalid URL"}] Please Help
not 100% sure to be honest, double check the URL, and make sure it includes a or at the start? Other than that, I'm not sure. If you still can't get it to work, jump into my Discord community and you might be able to get some help there (link in the description of the video)