跨浏览器测试方法

357 阅读3分钟

在日常的前端开发工作中浏览器的兼容性一直是一个痛点,虽然现在各个主流浏览器厂商都已经开始统一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

步骤

  1. 初始化一个npm项目

    npm init -y

  2. 安装@playwright/test依赖

    npm i -D @playwright/test

    image.png

  3. 下载并安装主流的浏览器

    npx playwright install

    image.png

  4. 更改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"
      }
    }
    
  5. 添加测试用例

    下面的代码是指定要访问的页面并暂停浏览器以便检查页面 - 如果注释掉 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()
    })
    
  6. 运行测试脚本

    npm run test:firefox

    image.png

启动浏览器的同时,还会启动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