NimaPrmi

One the things that I really hate from bottom of my heart is Apple’s Logics. Unfortunately web developers who Develop websites using Windows & Linux can not access to to safari and most of the front-end developers I have seen they was using Apple devices including Mac Books and other things.

You can visit this stack overflow link and see people solutions.

Sure you can install VMware & sure you can use BrowserStack they are really great and provide real devices. But both of them have a very big problems and the problems is PERFORMANCE. At this moment I’m using Asus TUF (Ryzen 7 Series) and my laptop highly lagged when I used VMware to test a simple website using safari in VMware. Why every apple user shout safari is high performance, did you test WebGL in safari and MacBook?

Let’s Action

1. First Initialize a project using npm

npm init -y

 2. Install @playwright/test as a development dependency.

npm i -D @playwright/test

3. Install the default browsers.

npx playwright install

4. Update package.json

5. Add these scripts into your package.json

{
  "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"
  },
  "devDependencies": {
    "@playwright/test": "^1.22.1"
  }
}

6. Add folder inside the project called test and inside that create a file called browser.test.ts and insert these codes inside this file.

import { test } from '@playwright/test'

test('test browser', async ({ page }) => {
  // point this to wherever you want
  await page.goto('http://localhost:3000/')

  // keep browser open
  await page.pause()
})

7. Run the browser using this command

npm run test:safari

There you have it. Note that For Linux it is better to use the Epiphany you can find it from this link.

Hope you enjoyed. Thanks to joyofcode.xyz for it’s great post.