Developing for Safari on Windows 10 / Linux

#testing #safari #webdev #programming

Are you a Web Developer?
If yes, my bet is that you are probably developing on one of the following browsers: Chrome, Opera, Firefox, Edge, Brave or Safari.

In the end, it boils down to the big three browsers:

Chromium based
Safari
Firefox

Even though I am currently a kind of happy Firefox user, the market share of the browser is converging to zero and ultimately it seems like the browser is dying. They even decided to close the ticket regarding the install option for PWA without plans of continuing.

Beside the nagging, a lot of consumers are effectively using Safari on desktop and especially mobile. (cf. statcounter or Can I Use)

So, how do we as Web Developer test on Safari, without feeling uncomfortable? In the past I had jobs where I could make use of a local MacBook or paid services like browserstack. It felt burdensome for me to work on a macOS, mostly because I was not used to it and my peripherals were somewhere else. And even if you would have a macOS at your workplace, given the fact that most of us are working from home right now, this is no longer an option.

🤝 The solution

Have you heard of Playwright?
If your answer is no, then let me tell you that Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API. In fact, the API is very simular to Puppeteer, because two of the Developers moved from Puppeteer to Playwright. (cf. Puppeteer Contributions vs. Playwright Contributions)
If your answer is yes, and if you are not using Safari yet for testing purposes as Windows or Linux user, then congratulations, you are just like me 🤡.

The solution was right in front of us and I am happy to share a little snippet to kickstart the browser, so that we all can create better applications 🚀

// unflagged top-level await from Node 14.8.0+
import { webkit } from "playwright";
const browser = await webkit.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto("https://www.whatismybrowser.com/");

For anything else, please refer to the official playwright documentation.

🖼 Further improvements on Windows

If you do not want to execute the .js file everytime you want to make use of Safari, follow these steps:

Execute the script
Open the Task Manager, go to tab 'Details', right-click on Playwright.exe and select 'Open file location'.
Right-click on Playwright.exe in the folder and click on 'Create shortcut'
(optional) download Safari Icon from wikipedia, convert it to an icon, save it in the folder, right-click on the shortcut, properties 'Change Icon' and select the .ico.
Right-click the shortcut and select 'Pin to Start'