在日常的前端开发工作中浏览器的兼容性一直是一个痛点,虽然现在各个主流浏览器厂商都已经开始统一Web API接口了,但是还是存在很多兼容性问题,特别是CSS样式。
IE虽然已经退役了,但是苹果的Safari浏览器似乎已经成了现代版的IE了,相信做过前端开发的都深有体会。如果遇到不同平台浏览器的兼容性问题,通常都需要在指定操作系统平台浏览器中进行debug。尤其是Safari浏览器,最新版的只能在Mac系统中使用,虽然Windows也可以使用,但是自5.1.7版本之后就没有更新了。
主流浏览器
目前主流的浏览器就那么三四个,按照市场份额大小依次是Chrome(约65%), Safari(约20%), Firefox(约4%), Edge(约4%),剩余的就是其他浏览器了,如Brave,Opera,还有最近在国外比较火的Arc等。其实本质上来说,浏览器的兼容性问题也就是浏览器引擎之间的兼容性问题。 上面介绍的主流浏览器按照所使用的浏览器引擎可以分为两类,一类是基于Chromium核心的和非Chromium核心的
基于Chromium核心的
- Chrome,Edge,Brave,Arc...
非Chromium核心的
- Firefox(Gecko)
- Safari(WebKit)
新的跨浏览器测试方法(适用于Linux,macOS,Windows)
目前在非Mac平台测试Safari的方法主要有以下两种:
如果你使用的是Linux,你可以使用基于 WebKit 的浏览器,比如 Epiphany,而且它在没有任何设置的情况下工作得很好ーー虽然它不会匹配 Safari 的所有特性,但是它们使用的浏览器引擎是相同的。
如果使用的是Windows,Windows 并没有任何基于 WebKit 的浏览器,所以你必须使用虚拟机或者最新的 Windows Subsystem for Linux,它可以使用图形用户界面和 Epiphany。
新的方法则是使用Playwright 来进行自动化测试,并且可以测试每一个浏览器,因为Playwright使用的是每一个浏览器(包括 Chromium、 Firefox 和 WebKit)开源版本构建的二进制文件。
对于 Linux,请使用 Epiphany 测试 Safari,因为目前 Playwright 仅支持 Ubuntu 20.04 LTS,因此您必须在不受支持的 Linux 发行版上使用 Boxes。
步骤
-
初始化一个npm项目
npm init -y
-
安装@playwright/test依赖
npm i -D @playwright/test
-
下载并安装主流的浏览器
npx playwright install
-
更改package.json
Playwright CLI 有一些有趣的选项,我们可以使用
--headed
和--browser=webkit
来指定浏览器,因此我们可以将它们作为脚本添加到package.json
。// 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" } }
-
添加测试用例
下面的代码是指定要访问的页面并暂停浏览器以便检查页面 - 如果注释掉
page.goto
行,它将打开一个空白选项卡。// /src/tests/browser.test.ts import { test } from '@playwright/test' test('test browser', async ({ page }) => { // 指定需要访问的页面 await page.goto('http://localhost:8080/') // 暂停以保持浏览器打开 await page.pause() })
-
运行测试脚本
npm run test:firefox
启动浏览器的同时,还会启动Playwright的debug工具,可以进行一些简单的debug操作。同时也可以像平时一样使用浏览器自身的debug工具。
使用此方法就可以在Windows上也能像在Mac电脑上测试网页在Safari上是否展示正常了。
参考链接:
Test Your Site In Every Browser (joyofcode.xyz)
Browser Market Share Worldwide | Statcounter Global Stats
Fast and reliable end-to-end testing for modern web apps | Playwright