Cara Install Safari di Windows untuk Front-End Developer

Safari adalah salah satu browser web yang paling populer di dunia. Browser ini dikembangkan oleh Apple dan tersedia untuk macOS, iOS, dan iPadOS. Namun, Safari tidak tersedia untuk Windows secara resmi.

Meskipun demikian, ada cara untuk memasang Safari di Windows. Cara ini menggunakan Playwright, sebuah framework open source untuk pengujian web. Dengan Playwright, kamu dapat menjalankan Safari di Windows secara virtual.

Keuntungan Install Safari di Windows

Ada beberapa keuntungan untuk menginstall Safari di Windows, terutama bagi para front-end developer atau Web Developer. Berikut adalah beberapa di antaranya:

1. Dapat menguji halaman web di berbagai browser

Salah satu tugas penting yang harus dilakukan oleh front-end developer adalah menguji halaman web mereka di berbagai browser. Dengan menginstall Safari di Windows, kamu dapat menguji halaman web di browser yang paling populer di dunia, termasuk Safari.

2. Dapat memastikan halaman web kompatibel dengan Safari

Safari adalah browser yang cukup populer di dunia, terutama di kalangan pengguna macOS dan iOS. Dengan menginstall Safari di Windows, Anda dapat memastikan bahwa halaman web Anda kompatibel dengan Safari dan dapat diakses oleh pengguna Safari.

3. Dapat mempelajari fitur-fitur Safari

Safari adalah browser yang memiliki banyak fitur dan kemampuan. Dengan menginstall Safari di Windows, kamu dapat mempelajari fitur-fitur tersebut dan menggunakannya dalam project yang sedang dikerjakan.

Langkah-langkah Install Safari di Windows

Berikut adalah langkah-langkah untuk install Safari di Windows:

Langkah 1: Install Node.js dan NPM

Sebelum memulai, pastikan Anda sudah menginstall Node.js dan NPM di Windows. Kamu dapat mengunduh Node.js dari situs web resminya.

Node.js dan NPM adalah dua komponen penting yang diperlukan untuk menjalankan Playwright. Node.js adalah runtime JavaScript yang diperlukan untuk menjalankan skrip Playwright. NPM adalah manajer paket yang digunakan untuk menginstall Playwright.

Langkah 2: Buat folder baru

Silahkan buat folder baru. Kemudian buka terminal (cmd) dan pergi ke folder baru tersebut, misalnya “cd nama_folder_kamu“, kemudian ketikan perintah berikut:

npm init -y

Perintah ini akan membuat file package.json di direktori kerja Anda saat ini. File ini diperlukan untuk menyimpan informasi tentang project Anda, termasuk dependensi.

Langkah 3: Install Playwright

Instal Playwright dengan perintah berikut:

npm i -D @playwright/test

Perintah ini akan menginstall Playwright sebagai modul dependensi. Opsi -D menunjukkan bahwa modul ini harus diinstal sebagai dependensi pengembangan.

Langkah 4: Tambahkan skrip untuk menjalankan Safari

Buka file package.json dan tambahkan code berikut untuk menjalankan Safari:

"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"
},

Perintah ini akan membuat skrip npm run test:safari yang dapat digunakan untuk menjalankan Safari. Ada tiga test browser yang dapat kamu gunakan, tentu saja dalam tutorial ini yaitu kita akan membuka safari browser.

Langkah 5: Buat file untuk pengujian

Buat file baru dengan nama browser.test.ts dan tambahkan kode berikut:

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()
})

Kode ini akan membuka Safari dan membuka halaman web di alamat http://localhost:3000/. Tidak hanya project di localhost, tapi live site / production site juga bisa dibuka. Tinggal ganti URL dibawah “// point this to wherever you want” tersebut sesuai website yang ingin kamu buka.

Langkah 6: Jalankan skrip pengujian

Untuk menjalankan skrip pengujian, buka terminal dan masukkan perintah berikut:

npm run test:safari

Perintah ini akan menjalankan skrip pengujian dan membuka Safari di Windows. That’s it! Thank you Playwright!

Sekarang kamu bisa buka browser Safari “tanpa perlu” beli Mac (tapi kalau udah ada rejeki, boleh lah beli). Tutorial ini aku buat, untuk kalian yang sudah coba install virtual machine tapi gagal.

Kesimpulan

Dengan menggunakan sebuah dependensi yaitu Playwright, kita dapat membuka Safari Brower di Windows tanpa perlu install virtual machine dan sejenisnya (yang ribet). Pemasangannya pun sangat mudah dan cepat, tidak memakan banyak resource juga.

Jika teman-teman merasa artikel ini membantu, jangan lupa bagikan ke yang lain. Dan jika menemukan kesulitan, silahkan ketik di kolom komentar atau bagaimana pengalaman-mu menggunakan cara ini?