{"id":24886319,"url":"https://github.com/bhallibhai/browser-testing","last_synced_at":"2026-05-09T01:02:51.223Z","repository":{"id":274690133,"uuid":"923618309","full_name":"BhalliBhai/Browser-Testing","owner":"BhalliBhai","description":"Test Your Website on Different Browsers like:  Safari | Chrome | Firefox | Opera etc","archived":false,"fork":false,"pushed_at":"2025-01-28T19:37:08.000Z","size":7,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-28T20:27:05.556Z","etag":null,"topics":["browser","chrome","firefox","open-source","openai","opensource","opera","safari","starred","test","testing","testing-library","testing-tools","website","website-development","website-testing","webtesting"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BhalliBhai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-28T15:16:17.000Z","updated_at":"2025-01-28T19:37:11.000Z","dependencies_parsed_at":"2025-01-28T20:37:42.143Z","dependency_job_id":null,"html_url":"https://github.com/BhalliBhai/Browser-Testing","commit_stats":null,"previous_names":["bhallibhai/browser-testing"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhalliBhai%2FBrowser-Testing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhalliBhai%2FBrowser-Testing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhalliBhai%2FBrowser-Testing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BhalliBhai%2FBrowser-Testing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BhalliBhai","download_url":"https://codeload.github.com/BhalliBhai/Browser-Testing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245825218,"owners_count":20678523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","chrome","firefox","open-source","openai","opensource","opera","safari","starred","test","testing","testing-library","testing-tools","website","website-development","website-testing","webtesting"],"created_at":"2025-02-01T15:14:37.648Z","updated_at":"2026-05-09T01:02:51.215Z","avatar_url":"https://github.com/BhalliBhai.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Browser-Testing\n\n# Test Your Website on Different Browsers\n\nPublished January 28, 2025\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n- [What Are The Major Browsers?](#what-are-the-major-browsers)\n- [Method That Works for Linux, macOS, Windows](#method-that-works-for-linux-macos-windows)\n- [Troubleshooting](#troubleshooting)\n\n---\n\n## Getting Started\n\nTo set up and run the project, follow these steps:\n\n### 1. Clone the Repository\n```sh\ngit clone https://github.com/BhalliBhai/Browser-Testing.git\ncd Browser-Testing\n```\n\n### 2. Install Dependencies\n```sh\nnpm install\n```\n\n### 3. Run Tests\nTo test your site in different browsers, use the following commands:\n\n```sh\nnpm run test:safari  # Runs tests in Safari (WebKit)\nnpm run test:chrome  # Runs tests in Chrome\nnpm run test:firefox # Runs tests in Firefox\n```\n\n### 4. 🎇Browser Window is In front of you...🎇\n\n---\n\n## What Are The Major Browsers?\n\nEnsuring your website looks great across all major browsers is crucial for a consistent user experience. This guide will help you test your site on **Chrome, Firefox, and Safari** regardless of your operating system—Linux, macOS, or Windows.\n\n### Why These Browsers?\n\nIf we look at browser market share worldwide, Chrome dominates at around 64%, Safari follows with about 20%, and Firefox holds roughly 4%. While there are many other browsers, these three are critical because they use distinct **browser engines**, which render web pages differently:\n\n- **Chrome** (and Chromium-based browsers like Edge and Brave) use **Blink**.\n- **Firefox** uses **Gecko**, developed by Mozilla.\n- **Safari** uses **WebKit**, developed by Apple.\n\nSince **Safari is exclusive to macOS**, testing on it from Linux or Windows requires workarounds. Let's explore a solution.\n\n---\n\n## Method That Works for Linux, macOS, Windows\n\n### Linux Users:\nIf you’re on Linux, you can use a **WebKit-based browser** like **Epiphany**. It may not be a perfect Safari replica, but it uses the same rendering engine.\n\n### Windows Users:\nWindows lacks a WebKit-based browser, so the best approach is using **a virtual machine** or the latest **Windows Subsystem for Linux (WSL)** with a GUI.\n\n### Cross-Platform Solution:\nTo ensure a clean and automated testing environment, we use **Playwright**, which supports testing across **Chromium (Chrome), Firefox, and WebKit (Safari)** with open-source builds.\n\n⚠️ **Linux Users:** Playwright officially supports Ubuntu LTS versions. For unsupported distros, consider using a VM.\n\n### Setting Up Playwright\n\n#### 1. Initialize a new project:\n```sh\nnpm init -y\n```\n\n#### 2. Install Playwright:\n```sh\nnpm i -D @playwright/test\n```\n\n#### 3. Install browsers:\n```sh\nnpx playwright install\n```\n\n#### 4. Update `package.json`:\n```json\n{\n  \"scripts\": {\n    \"test:chrome\": \"npx playwright test --headed --browser=chromium\",\n    \"test:firefox\": \"npx playwright test --headed --browser=firefox\",\n    \"test:safari\": \"npx playwright test --headed --browser=webkit\"\n  },\n  \"devDependencies\": {\n    \"@playwright/test\": \"^1.22.1\"\n  }\n}\n```\n🐿️ The `npx` command lets you run Playwright without installing it globally.\n\n#### 5. Create a test file:\nCreate a file `tests/browser.test.ts` with the following content:\n```ts\nimport { test } from '@playwright/test';\n\ntest('test browser', async ({ page }) =\u003e {\n  await page.goto('http://localhost:3000/'); // Change URL as needed\n  await page.pause(); // Keeps the browser open for inspection\n});\n```\n\n#### 6. Run the tests:\n```sh\nnpm run test:safari\n```\n🎉 That’s it! You can now test your website in **Chrome, Firefox, and Safari** from any OS.\n\n---\n\n## Troubleshooting\n\nIf you encounter missing dependencies on Linux when running WebKit tests, install them using:\n```sh\nnpx playwright install-deps webkit\n```\n\nIf you see an error about missing libraries such as:\n```sh\nbrowserType.launch:\n\nHost system is missing dependencies to run browsers.\nMissing libraries:\n  libpcre.so.3\n  libicui18n.so.66\n  libicuuc.so.66\n  libwebp.so.6\n  libenchant.so.1\n  libffi.so.\n```\nYou need to install the necessary system dependencies. For Ubuntu, you can run:\n```sh\nsudo apt-get install -y libpcre3 libicu66 libwebp6 libenchant1c2a libffi7\n```\nFor other distributions, refer to your package manager’s documentation.\n\nNow your site can be tested on every major browser regardless of your OS. 🚀\n\nIf this helped, consider **starring** ⭐ the repository to support the project! 😊\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhallibhai%2Fbrowser-testing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbhallibhai%2Fbrowser-testing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbhallibhai%2Fbrowser-testing/lists"}