本系列其他译文请看[JS工作机制 - 小白1991的专栏 - 掘金 (juejin.cn)] (juejin.cn/column/6988…

本文阅读指数:3
跨浏览器测试可能更偏向于测试同学，一般大公司都会有自己的测试平台来进行这种跨浏览器和跨端的测试。开发同学可以看看，涨姿势。

即使在不同的浏览器上，也应该要让我们的应用按预期执行。这需要使用跨浏览器测试才行。

跨浏览器测试会让我们在不同的浏览器组合和不同的设备上检查应用是否按预期执行。

有时候，我们使用最新的技术构建应用，就需要测试它们。这一章，我们会说说JS的跨浏览器测试，如何测试以及为什么很必要。下一步，我们会讨论预发版浏览器，它们的特性，以及如何用它们测试JS。

什么是跨浏览器测试

应用在交给用户之前，需要完全测试。跨浏览器测试，是质量保证的一个方式，web应用可以在测试环境中测试，这个环境管理着多个合适的测试环境。

一个测试环境是一个工具集，包含软件，硬件和网络。开发者使用这个环境来分析他们的产品，并确保没有缺陷。有时候，应用在一些浏览器中执行的很好，但是在另一个里面就有Bug。同样，由于开发者是在桌面环境中工作，那么在手机设备上可能就有问题。

测试环境管理是确保可靠的软件测试的一种手段。比如，你的应用有很多特性，浏览器、版本、平台需要测试。使用正确的环境管理，测试可以在不同的操作系统和浏览器平台去执行测试。

为什么执行跨浏览器测试

用户可以通过不同的平台来访问应用，比如IOS或者Android的手机，桌面或者iPad之类的平台。尽管是同一个应用，但是他们的分辨率不同，应用变现也不尽相同。使用跨浏览器测试，开发者就可以调试和修复一些不同浏览器引起的问题。我们来看看一些具体的原因

设计和响应

在应用开发之前，必须要经过 UI/UX的设计。设计师会给各个分辨率设计。设计阶段目标是设计应用的表现和响应，比如像按钮这些，设计师可能会引入动画来交互。有时候，测试不同OS/浏览器，开发者将会发现bug。比如，一些元素可以会被隐藏或者乱置。

可访问性 (a11y)

可访问性，也被称为a11y ，表示的是如何访问一个计算机系统或者软件，以及用户可以容忍的缺陷。一些应用中没有包含这些标准，因此W3C创建了可访问标准.

a11y的目的是让所有人可用。不能只通过代码来确认这一点。你需要使用不同的浏览器来测试你的应用，确保它的可访问性。

应用功能

这里就是测试你的功能和特性的地方。如果没有经过完全的跨浏览器测试，就可能会有一些兼容性错误。

跨浏览器测试工作流

如果不使用正确的流程，就无法开展跨浏览器的测试工作。这一节，我们将看到有效的跨浏览器测试的任务顺序。

规划

这是跨浏览器测试工作流的第一步。在规划阶段，要确定产品的特性，开发事件。在这一步，所有的设计和功能都必须非常清晰。

开发

这是跨浏览器测试的第二阶段。这个阶段，开发者把工程分割到模块组件中，在合并组件之前进行单独测试。

测试

在这个阶段，所有的模块组件会被组合成一个实体。然后，开始详细的测试。开发者会基于规划阶段确定的目标来进行测试。你不需要真的在所有的硬件设备和软件环境上人肉测试。测试环境会模拟这些场景。一般的，通过这些平台来测试你的应用：

在你的目标浏览器中，测试稳定版本的功能是否正常。
测试所有规划的屏幕尺寸和分辨率
通过不同的操作系统测试应用的功能
执行低保真可用测试，确保应用的响应和可访问

修复

测试完了，自然要改Bug了。测试和修复是一个重复的过程，直到没有新的bug发现。在修复之后，应用要再次测试，确保没有新引入的问题。

什么是预发版浏览器

跨浏览器测试中，兼容性测试是非常重要的。开发者需要在不同的浏览器上测试，确保他们的应用的功能和分辨率是正常的。预发版浏览器是指还没有像公共发布的最新的浏览器版本。但是，对开发者是开放的，可以用来测试应用。

预发版浏览器很可能有新的一些特性，让你的应用出现问题，因此需要测试。比如, [Firefox] 允许你跨操作系统，跨分辨率，给Mozilla发数据进行测试。这样，如果你有什么没有发现Bug，Mozilla会帮助你找出来。在预发浏览器上测试有这些好处:

测试最新的浏览器特性会不会引起异常。
与浏览器设计和开发团队合作，确保你的功能实现是没有问题的
当你被bug困住时，可以用浏览器开发者那里获取帮助。

预发版浏览器测试 vs 自动化测试

先简单说一下，什么是自动化测试系统。

自动化测试系统可以让你写一些脚本，然后自动化的进行应用验证。这种测试一般用来测试应用的功能性，而且比手动测试更加有效。例如，在DevOps中，测试需要被内置到应用中。

预发版测试是包含这种自动化测试的。例如，你可以写一些自动工具脚本像[selenium driver]来进行测试。测试工程师，也可以让应用在单独的包含了不同的自动化工具的测试环境进行测试。例如selenium box.

跨浏览器测试工具

跨浏览器工具提供了一个框架去测试你的应用。可能是手动也可能是自动的。JS主要用来构建web应用，所以我们会讨论一些浏览的JS跨浏览器工具，以及开发中如何使用。

Selenium webDriver

Selenium driver一个自动化测试的开源工具。它支持Firefox, Chrome, Edge, Internet Explorer, Safari, and Opera。你可以使用npm安装它：

//install selenium web driver with npm
npm install selenium-webdriver

然后，安装chromedriver，启动chrome/chromium，然后改变PATH环境变量。一旦chrome在你的path中，通过运行一些命令，就可以在chrome上测试你的web应用。

看一个简单的例子，假如我们使用运行在chrome上的selenium来测试，我们导航的页面会在title显示“Google Search”。

Import web driver into your application

const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

// Create instance of webdriver for firefox    
const driver = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

//navigate to google homepage
driver.get('http://www.google.com');

// Enter text "webdriver" in google search
driver.findElement(By.name('q')).sendKeys('webdriver');

//click on TAB key to avoid driver sleep.
driver.sleep(1000).then(function() {
  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
});

//click on google search button
driver.findElement(By.name('btnK')).click();

//perform test to confirm page title
driver.sleep(2000).then(function() {
  driver.getTitle().then(function(title) {
    if(title === 'webdriver - Google Search') {
      console.log('Test passed');
    } else {
      console.log('Test failed');
    }
    //shut down driver after test
    driver.quit();
  });
});

如果title不匹配，selenium将会立即扔出一个异常。Selenium webDriver也能让你同时跨多浏览器进行应用的功能测试。例如，我们可以同时运行在Chrome和Firefox上。

首先，我们安装gekodriver，它是FireFox驱动。下面，我们同时在 Chrome 和 Firefox上进行测试

// Import web driver into your application
const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

// Create instance of webdriver for firefox
let driver_fx = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

// Create instance of webdriver for chrome
let driver_chr = new webdriver.Builder()
    .forBrowser('chrome')
    .build();
create search test for firefox and chrome
searchTest(driver_fx);
searchTest(driver_chr);

//function to implement search
function searchTest(driver) {
  
  //navigate to google homepage
  driver.get('http://www.google.com');
  
  // Enter text "webdriver" in google search
  driver.findElement(By.name('q')).sendKeys('webdriver');
  //click on TAB key to avoid driver sleep.
  driver.sleep(1000).then(function() {
    driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
  });
  
  //click on google search button
  driver.findElement(By.name('btnK')).click();
  //perform test on both browsers to confirm page title
  driver.sleep(2000).then(function() {
    driver.getTitle().then(function(title) {
      if(title === 'webdriver - Google Search') {
        console.log('Test passed');
      } else {
        console.log('Test failed');
      }
      driver.quit();
    });
  });

使用selenium，你需要手动的写一些测试脚本。运行测试时，一旦断言没通过，selenium就会抛出异常。

LambdaTest

[LambdaTest] 是一个跨浏览器的测试工具，它打包了不同的测试环境。当你在Lambda上测试引用，你可以获得你的应用的屏幕快照，这些快照来自于不同的浏览器，预发版浏览器，和操作系统。使用LambdaTest，你可以写测试脚本，执行一些自动化测试，像webDriver那样。 Lambda还能让你执行云测试，这样开发者协作更容易。它也是CI/CD的好工具，尤其是对DevOps工程师来说，他们重度依赖自动化，并期望保证产品的稳定性。

Sauce Labs

[Sauce Labs]也是一个基于云的跨浏览器测试工具，像LambdaTest一样集成了测试环境。但是LambdaTest主要聚焦于收集和web应用。它也能让开发者使用 Selenium webDriver 进行自动化测试。但是它不提供屏幕快照，它为每一个会话提供视频记录。

BrowserStack

[BrowserStack]也是一个基于云的跨浏览器测试平台，聚焦收集应用和web应用。这个应用能让你的应用和服务器连接，就像在一个测试环境一样。同样，它也允许你写脚本来进行自动化测试。

边学边译JS机制---31.跨浏览器测试