前端进阶（六）-UI自动化测试

　　自动化测试应该也是工程化的一部分。本文讲前端UI自动化测试

UI自动化测试

为了保障软件质量，并减少重复性的测试工作，自动化测试已经被广泛运用。

自动化测试是一种测试方法，是指使用特定的软件，去控制测试流程，并比较实际结果与预期结果之间的差异。通过将测试自动化，可以把人对软件的测试行为转化为由机器自动执行测试的行为，从而替代大量的手工测试操作，使得测试可以快速，反复的进行。

关于自动化测试，有一个测试金字塔模型，该模型把测试从下到上分为了单元测试、集成测试和UI自动化测试（E2E测试/UI界面测试）。越往金字塔底层，测试成本越低，效率也越高，而越往金字塔的顶层，测试成本会逐渐增高，收益也会越低。

UI测试(端到端测试)

UI测试的主要目的是，从软件使用者的角度来检验软件的质量，而UI自动化测试则是以自动化的方式来代替人工执行测试。在测试金字塔模型中，UI层测试是各种测试中投入最大、收益最低、运行最慢的一种。

接口自动化测试（集成测试）

接口自动化主要包括模块接口测试，子功能模块集成起来的功能模块测试等，目的是为了验证在单元测试的基础上，所有模块集成起来的子系统、子功能是否仍然满足质量目标。

单元测试

单元测试又称为模块测试，主要针对程序中最小可测试单元（一般指方法，类）的测试，具备投入小、收益产出高的特征，可以较早期地发现代码缺陷，适用于公共函数库的测试。

cypress

简介

Cypress是为现代网络打造的，基于JavaScript的下一代前端测试工具。他可以对浏览器中运行的任何内容进行快速，简单和可靠的测试。

Cypress是自集成的，它提供了一套完整的端到端测试体验。无须借助其他外部工具，在简单安装后即可允许用户快速的创建、编写、运行、测试用例，并且针对每一步操作均支持回看。

不同于其他只能测试UI层的前端测试工具，Cypress允许你编写所有类型的测试，覆盖了测试金字塔模型涉及的所有测试类型：端到端测试、集成测试、单元测试。

优点

• 阅读性高，易于理解

• 界面美观友好。

• 测试的每一步都有对应的截图，在运行测试的时候，cypress会获取快照，记录了测试执行过程的每一步细节。

• 全程都会有录屏。

• 支持使用web浏览器上的开发工具直接调试，有丰富错误和堆栈跟踪信息，支持debug调试，随时暂停。
  自动等待ui更新，减少异步代码，在页面某些元素还没出来的时候，通常我们会添加等待的代码。但是在cypress中，是自动等待的，直到 元素出现，或者超过了你设置的超时时间。

• 环境安装：快速安装。没有服务器，驱动程序，或任何其他依赖需要安装或配置。

局限

1、长期权衡

不建议使用Cypress用于网络爬虫，性能测试之目的。

Cypress永远不会支持多标签测试。

Cypress不支持同时打开两个及以上的浏览器。

每个Cypress测试用例应遵守同源策略

2、短期折中

目前浏览器支持Chrome，Firefox，Microsoft Edge和Electron
不支持测试移动端应用
针对iframe的支持有限
不能在window.fetch上使用cy.route()
没有影子DOM支持。

cypress原理

大多数测试工具(Selenium/WebDriver)通过在浏览器外部运行并在网络上执行远程命令来运行(WebDriver底层的通信协议基于JSON Wire Protocol其运行需要网络通信)，Cypress恰恰相反，它在与应用程序相同的生命周期里执行，当运行测试时，Cypress首先使用webpack将测试代码中的所有模块bundle到一个js文件中，然后，它会运行浏览器并将测试代码注入一个空白页面里，然后它将在浏览器中运行测试代码(可以理解为Cypress通过一系列操作将测试代码放到一个iframe中运行)

在每次测试首次加载Cypress时，内部Cypress Web应用程序先把自己托管在本地的一个随机端口上(例如http://localhost:65874/__/),在识别出测试中发出的第一个cy.visit()命令后，Cypress将会更改其本地URL以匹配你远程应用程序的Origin(用于满足同源策略),这使得你的测试代码和应用程序可以在同一个Run Loop中运行

因为Cypress测试代码和应用程序均运行在由Cypress全权控制的浏览器中，且他们运行在同一个Domain下的不同iframe内，所以Cypress的测试代码可以直接操作DOM、Window Objects甚至Local Storages而无须通过网络访问，也因此它更快

此外Cypress还可以在网络(请求)层进行及时读取和更改网络流量的操作，Cypress背后是NodeJS Process，任何发往浏览器之外的HTTP的请求和响应，均由Cypress生成，被NodeJS Process控制的Proxy进行转发，因此Cypress不仅可以修改进出浏览器的所有内容，还可以更改可能影响自动化浏览器操作的代码，所以Cypress不仅从根本上控制整个自动化测试的流程，还可以提供稳定性更佳的结果

playwright

Playwright是由微软公司2020年初发布的新一代自动化测试工具，相较于目前最常用的Selenium，它仅用一个API即可自动执行Chromium、Firefox、WebKit等主流浏览器自动化操作。作为针对 Python 语言纯自动化的工具，在回归测试中可更快的实现自动化。

据说Playwright团队是微软把puppeteer团队挖过去做的，所以基本上puppeteer的特性Playwright都有，并在puppeteer基础上做了很多优化。

简而言之，您可以编写打开浏览器的代码，用代码实现使用所有网络浏览器的功能。自动化脚本可以实现导航到URL、输入文本、单击按钮和提取文本等功能。Playwright最令人惊喜的功能是它可以同时处理多个页面且不用等待，也不会被封锁。

Playwright支持大多数浏览器，例如Google Chrome、Firefox、使用Chromium内核的Microsoft Edge和使用WebKit内核的Safari。跨浏览器的网络自动化是Playwright的强项，可以为所有浏览器有效地执行相同的代码。此外，Playwright支持各种编程语言，例如Node.js、Python、Java和.NET。您可以编写代码用于打开网站并使用这些语言中的任何一种与之交互。

Playwright的文档内容非常详细，覆盖面广。它涵盖了从入门到高级的所有类和方法。

playwright可以通过录制的功能将你对浏览器的操作录制下来直接生成代码，极大地提高了开发效率。我想，这对新手也极其友好，不会写的操作就直接录制生成。

playwright的优势

（1） Selenium需要通过WebDriver操作浏览器；Playwright通过开发者工具与浏览器交互，安装简洁，不需要安装各种Driver。

（2） Playwright几乎支持所有语言，且不依赖于各种Driver，通过调用内置浏览器所以启动速度更快。

（3） Selenium基于HTTP协议（单向通讯），Playwright基于Websocket（双向通讯）可自动获取浏览器实际情况。

（4） Playwright为自动等待。

• 等待元素出现（定位元素时，自动等待30s，等待时间可以自定义，单位毫秒）
• 等待事件发生

局限性

（1） Playwright不支持旧版Microsoft Edge或IE11。支持新的Microsoft Edge（在Chromium上）；所以对浏览器版本有硬性要求的项目不适用。

（2） 需要SSL证书进行访问的网站可能无法录制，该过程需要单独定位编写。

（3） 移动端测试是通过桌面浏览器来模拟移动设备（相当于自带模拟器），无法控制真机。

使用

安装playwright，需要python 3.7以上

1

pip install playwright

安装Chromium、Firefox、WebKit等浏览器的驱动文件（内置浏览器）

1

python -m playwright install

自动录制

从起始页为xingzheai.cn开始录制

1

python -m playwright codegen https://xingzheai.cn/

打开xingzheai.cn，用Chromium驱动，将结果保存为my.py的python文件

1

python -m playwright codegen --target python -o 'my.py' -b chromium https://xingzheai.cn/

• -target：规定生成脚本的语言，有JS和Python两种，默认为Python
• -b：指定浏览器驱动
• -o：将录制的脚本保存到一个文件

网络拦截

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

page = context.newPage()
def Whether_intercept() -> bool:
    return True  #进行拦截
# return False #不进行拦截

def handler(route:Route):
    print(route.request.url)
    #正常访问
    # route.continue_()
    #拒绝访问
    # route.abort("网络拦截")
    # 重定向到非目标地址
    route.fulfill(
        status=302,
        headers={
            'Location' : "https://xingzheai.cn/"
        }
    )
page.route(Whether_intercept,handler)

同步执行

1
2
3
4
5
6
7
8
9
10
11

#依次打开三个浏览器，前往行者官网，截图后退出。
from playwright import sync_playwright with sync_playwright() as p:
    for browser_type in [p.chromium, p.firefox, p.webkit]:
         # 指定为有头模式，Ture为无头模式
        browser = browser_type.launch(headless=False)
        page = browser.newPage()
        page.goto('https://xingzheai.cn/')
        # 等待页面加载完全后截图
        page.waitForSelector("text=智能内容审核")
        page.screenshot(path=f'example-{browser_type.name}.png')
        browser.close()

异步执行

1
2
3
4
5
6
7
8
9
10
11
12
13

#同时进行三个浏览器操作
import asyncio
from playwright import async_playwright
async def main():
    async with async_playwright() as p:
        for browser_type in [p.chromium, p.firefox, p.webkit]:
                browser = await browser_type.launch()
            page = await browser.newPage()
            await page.goto('https://xingzheai.cn/')
                await page.waitForSelector("text=智能内容审核")
                await page.screenshot(path=f'example-{browser_type.name}.png')
                await browser.close()
               asyncio.get_event_loop().run_until_complete(main())

Nodejs

安装

1

npm i -D playwright

录制生产代码

1

npx playwright codegen wikipedia.org -o test.js

默认是无头模式，设置有头模式

1
2
3
4
5
6
7
8
9
10
11
12

const { chromium } = require('playwright');//引用模拟浏览器
 
(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 50 });//模拟打开浏览器,设置有头模式，并通过slowMo属性减慢浏览器的每一步操作
  const context = await browser.newContext();//建立context
  const page = await context.newPage();//模拟打开一个浏览器的标签页
  await page.goto('https://www.baidu.com/');//模拟访问网站url
  await page.screenshot({ path: `example.png` });//对网页进行截图并保存为example.png
  await page.close();//关闭网页
  await context.close();//关闭context
  await browser.close();//关闭浏览器
})();

模拟移动浏览器

1
2
3
4
5
6
7
8
9
10
11
12

const { chromium,devices } = require('playwright');//引用模拟浏览器
(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 50 });//模拟打开浏览器,设置有头模式，并通过slowMo属性减慢浏览器的每一步操作
  const phoneD = devices['iPhone 11'];//得到一个模拟移动设备
  const context = await browser.newContext({ ...phoneD });//建立context，并设置模拟仿真移动设备
  const page = await context.newPage();//模拟打开一个浏览器的标签页
  await page.goto('https://www.baidu.com/');//模拟访问网站url
  await page.screenshot({ path: `example.png` });//对网页进行截图并保存为example.png
  await page.close();//关闭网页
  await context.close();//关闭context
  await browser.close();//关闭浏览器
})();

Puppeteerjs

Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行。

Chrome DevTool Protocol

• CDP 基于 WebSocket，利用 WebSocket 实现与浏览器内核的快速数据通道
• CDP 分为多个域（DOM，Debugger，Network，Profiler，Console…），每个域中都定义了相关的命令和事件（Commands and Events）
• 我们可以基于 CDP 封装一些工具对 Chrome 浏览器进行调试及分析，比如我们常用的 “Chrome 开发者工具” 就是基于 CDP 实现的
• 如果你以 remote-debugging-port 参数启动 Chrome，那么就可以看到所有 Tab 页面的开发者调试前端页面，还会在同一端口上还提供了 http 服务，主要提供以下几个接口

1
2
3
4
5
6
7
8

GET /json/version                     # 获取浏览器的一些元信息
GET /json or /json/list               # 当前浏览器上打开的一些页面信息
GET /json/protocol                    # 获取当前 CDP 的协议信息   
GET /json/new?{url}                   # 开启一共新的 Tab 页面
GET /json/activate/{targetId}         # 激活某个页面成为当前显示的页面
GET /json/close/{targetId}            # 关闭某个页面
GET /devtools/inspector.html          # 打开当前页面的开发者调试工具
WebSocket /devtools/page/{targetId}   # 获取某个页面的 websocket 地址

Headless Chrome

• 在无界面的环境中运行 Chrome
• 通过命令行或者程序语言操作 Chrome
• 无需人的干预，运行更稳定
• 在启动 Chrome 时添加参数 –headless，便可以 headless 模式启动 Chrome

Puppeteer

• Puppeteer 是 Node.js 工具引擎
• Puppeteer 提供了一系列 API，通过 Chrome DevTools Protocol 协议控制 Chromium/Chrome 浏览器的行为
• Puppeteer 默认情况下是以 headless 启动 Chrome 的，也可以通过参数控制启动有界面的 Chrome
• Puppeteer 默认绑定最新的 Chromium 版本，也可以自己设置不同版本的绑定
• Puppeteer 让我们不需要了解太多的底层 CDP 协议实现与浏览器的通信

Puppeteer能做的事情

• 网页截图或者生成 PDF
• 爬取 SPA 或 SSR 网站
• UI 自动化测试，模拟表单提交，键盘输入，点击等行为
• 捕获网站的时间线，帮助诊断性能问题
• 创建一个最新的自动化测试环境，使用最新的 js 和最新的 Chrome 浏览器运行测试用例
• 测试 Chrome 扩展程序

常用api

• Browser： 对应一个浏览器实例，一个 Browser 可以包含多个 BrowserContext
• BrowserContext： 对应浏览器一个上下文会话，就像我们打开一个普通的 Chrome 之后又打开一个隐身模式的浏览器一样，BrowserContext 具有独立的 Session(cookie 和 cache 独立不共享)，一个 BrowserContext 可以包含多个 Page
• Page：表示一个 Tab 页面，通过 browserContext.newPage()/browser.newPage() 创建，browser.newPage() 创建页面时会使用默认的 BrowserContext，一个 Page 可以包含多个 Frame
• Frame: 一个框架，每个页面有一个主框架（page.MainFrame()）,也可以多个子框架，主要由 iframe 标签创建产生的
• ExecutionContext： 是 javascript 的执行环境，每一个 Frame 都一个默认的 javascript 执行环境
• ElementHandle: 对应 DOM 的一个元素节点，通过该该实例可以实现对元素的点击，填写表单等行为，我们可以通过选择器，xPath 等来获取对应的元素
• JsHandle：对应 DOM 中的 javascript 对象，ElementHandle 继承于 JsHandle，由于我们无法直接操作 DOM 中对象，所以封装成 JsHandle 来实现相关功能
• CDPSession：可以直接与原生的 CDP 进行通信，通过 session.send 函数直接发消息，通过 session.on 接收消息，可以实现 Puppeteer API 中没有涉及的功能
• Coverage：获取 JavaScript 和 CSS 代码覆盖率
• Tracing：抓取性能数据进行分析
• Response： 页面收到的响应
• Request： 页面发出的请求

https://zhuanlan.zhihu.com/p/76237595

cucumberjs

Cucumber是基于BDD模式的可执行规范（Executable Specifications）的开源工具。行为驱动开发（Behavior-driven development）是一种敏捷开发的技术，鼓励开发者、测试以及非技术人员之间的协作。

Cucumber除了自动化验收测试以外，更重要的是能够使用统一的语言在团队的技术与非技术人员之间建起一座沟通的桥梁。

• 可执行性（Executable）：您可以像执行代码（Java、Ruby…）一样运行这些规范，来验证、验收目标应用。当然，这一点是从技术人员的视角来看的；

• 规范性（Specification）：从非技术人员的视角触发，相比验证本身，他们更加关心系统功能的清晰描述：系统在什么场景下能够做什么样的事情。

Cucumber有多种语言实现的版本，并且可以集成到主流测试框架中。在这里我们使用的是JavaScript的版本——CucumberJS。

执行测试用例后，可以使用开源的cucumber报告工具来查看生成的报告。如下是常用的cucumber-reporter

macaca是阿里开源的一款基于cucumber的多端自动化解决方案。它提供了一系列的解决方案，包括计算机视觉（openCV等）、mock方案、页面元素检查工具、报告器、持续集成等生态建设。

macaca-reporter会生成如下的脑图模式的报告结果，比常规的cucumber-reporter更简洁好看。

Taiko

Taiko是一个免费的开源浏览器自动化工具，由ThoughtWorks开发。它是一个node的库，Taiko使用Chrome Devtools API，它是为测试现代web应用程序而构建的。

所以对于Taiko来说： 1、它是为测试Web应用而生 2、它基于Chrome浏览器

安装taiko

1

npm install -g taiko

接下来输入 openBrowser()，您将看到taiko会开启一个浏览器。 然后执行 goto("baidu.com"),浏览器将跳转到百度首页。然后再次执行 write("博客园 句幽")，浏览器将在输入框内填充对于的内容。最后执行click("百度一下")，将模拟操作点击一下搜索。

接下来输入 .code ，您将看到刚才操作步骤的代码。 这是taiko为您自动生成的。

在VS Code中新建文件“first-case.js”。然后将刚才taiko为我们生成的代码拷贝下来，复制到文件中。

此时该文件中的内容就相当于完成了我们第一个Case： “打开浏览器，输入内容，点击搜索”。

也就是说 taiko 其实就是为咱们提供了这些基于浏览器的基础操作指令，而我们就可以用这些各种命令进行排列组合，完成对应的操作。比如 “点击”、“按压”、“输入”、“选择元素”等等操作，而这些所有的操作命令都在 taiko 官网 为我们标注出来了。我们只需要选取需要的命令进行操作就可以了。

比如咱们更改一下操作:

await openBrowser();
await goto(“baidu.com”);
await write(“句幽 博客园”);
await link(‘句幽- 博客园’).exists();
await click(link(‘句幽- 博客园’));

这样将会在百度搜索句幽的博客园，然后在点击跳转到句幽的博客园。

而这每一个步骤都将会有一个验证，比如await link('句幽- 博客园').exists();，如果该页面没有获取到名称为”句幽- 博客园”的元素，将会验证失败。

而将这些步骤都转换为js代码，放置在咱们的first-demo.js 文件中，然后在终端运行:

taiko first-demo.js

Gauge

taiko 它提供了各类操作浏览器的命令，供我们排列组合完成模拟操作，最终得到自动化测试结果。

那么您觉得它够简单吗？如果要和团队一同维护和编辑用例，它很方便吗？ 显然不太好用。

所以此刻我们将介绍另外的一个工具：Gauge。 它将以 taiko 提供的命令操作为基础，用更自然的操作方式来完成对应的操作。

安装

1

npm install -g @getgauge/cli

运行完成之后就完成了Gauge的安装。当然在Gauge的官网，它还提供了一个安装包。 以何种方式安装取决于你，不过此处我强烈建议您使用 npm的安装方式。

Gauge还提供了vs code的扩展支持，您可以在VS Code的扩展中（最左侧按钮）进行安装。

Gauge它充当着一个什么样的角色： 首先要明白，taiko为我们操作浏览器提供了便捷的指令，它使用js来编写。但是这就为咱们测试团队建立了一个障碍，首先全员都得熟悉JS的写法，比如await等关键字等等，这无形提高了技术操作门槛。还有一点，我们所有的案例都将已大量js片段代码来维护，无疑增大了维护成本。

那么gauge干了一个什么操作呢？ 它建立于taiko之上，允许测试人员将某某关键词与某段JS相对应,比如（”跳转” 对应 taiko 的Goto）。 这样有什么好处呢？ 团队并不需要全员掌握JS了。频繁的操作用例可以统一为共同的指令，增加可维护性。

比如有一个跳转的命令，在js文件中

1
2
3

step("Goto getgauge github page", async () => {
    await goto('https://github.com/getgauge');
});

也就是说’Goto getgauge github page’ 对应着 taiko 的操作 await goto(‘https://github.com/getgauge');。

然后再看看specs文件夹下面的example.spec。对应部分为:

* Goto getgauge github page

这样，用例编写人员只需要写出这样的语句就可以完成操作了。而测试团队中的某一小部分人员，负责js对应关系的编写，功能测试人员负责用例的编写，就能很快的完成测试工作。

接下来我们来尝试使用它，在test文件夹下面的step_implementation.js 文件中增加语句:

1
2
3
4
5
6

step("跳转到句幽博客", async () => {
    await goto("baidu.com");
    await write("句幽 博客园");
    await link('句幽- 博客园').exists();
    await click(link('句幽- 博客园'));
});

这部分代码熟悉吗？ 这是咱们刚开始使用taiko所写的代码。现在我们将它包裹起来，对应到了跳转到句幽博客 这一指令。然后再到specs文件夹下面的example.spec添加对应操作

## 跳转测试
* 跳转到句幽博客

文本指令 Gauge 采用了MarkDown的写法。我们现在无需过去去了解markdown，只需要知道在spec文件中： # 代表的测试项目名，比如您可以命名（# 考勤分析测试），而## 代表了测试用例，比如您可以命名(## 添加考勤人员)。 * 代表了步骤，步骤的名称来源于您从js文件里的关键词对应。

在终端里输入

1

gauge run [你的spec的文件名]

就可以进行测试，最终生成测试报告。

如果您安装了VS Code的Gauge插件，那么在进入’.spec’文件后，您可以看到每一个用例上都有一个运行的按钮。点击就可以执行用例。

其他自动化测试框架介绍

Selenium/WebDriver

• Selenium作为应用范围最广泛的UI自动化测试工具，在Selenium1的时代也就是Selenium RC，其工作原理是通过把Selenium Core注入浏览器的方式来控制浏览器，现在Selenium1已经被Selenium WebDriver取代
• Selenium WebDriver已经到了4.x时代，它运行在浏览器中，通过调用浏览器原生API来实现对浏览器的控制，因为调用的是浏览器原生API，所以对于同样的元素操作，Selenium需要针对不同的浏览器提供相应的WebDriver
• Selenium IDE，它是以插件的形式存在，作为一个集成开发环境，它提供了简介的页面，并提供了录制和导出不同语言代码的功能
• Selenium-Grid，它通常跟持续集成工具配合使用，允许用户并行运行测试并且允许分布式执行测试任务

Karma

Karma不是一个测试框架，它只是基于Node.js的一个JavaScript测试运行器，Karma基于Client/Server架构，可以用来测试所有主流的浏览器，它允许Web开发人员在简单的配置后立刻开始测试，Karma的一个强大的特性是它设置了一个文件监听器，允许代码发生更改时自动重新运行测试脚本

服务器端(Server)，是系统的主要部分，它保持所有状态（例如关于捕获的客户端的信息，当前在文件系统上运行的测试或文件）和基于该状态的可进行的操作，它包含如下部分：

• Manager:负责与客户端的双向通信，例如通过广播启动一次测试，收集来自客户端的测试结果等
• FS Watcher:负责观察文件系统(FS)，它维护测试项目的内部模型(所有文件，它们所在的位置以及它们最后修改的时间戳),Web Server会使用此FS模型，以便向客户端提供正确的文件
• Reporter:负责将测试结果呈现给开发人员
• Web Server:负责提供客户端所需的所有静态数据，静态数据是客户端管理器的源代码，测试框架的源代码以及测试代码和测试中的实际代码

客户端(Client)，实际执行所有测试的地方，通常是指各种浏览器，它包含如下部分：

• Manager:负责与服务器端的双向通信，它处理来自服务器的所有消息（例如触发测试运行）并将它们传递给其他客户端组件(通常是测试框架)
• Testing Framework:Testing Framework不是该项目的一部分，Karma足够灵活，允许使用任何第三方测试框架
• Code Under Test & Test Code:测试框架运行的所有用户代码，它从Web Server获取并通过测试框架执行

工作流程

​ Karma在启动后，会加载插件和配置文件，然后启动本地的一个Web Server来监听所有的连接，在此过程中，所有已经连接上Server的浏览器会断开并重新连接，插件在加载的时候，一个监听浏览器的事件TestReporter将会被注册以用于后续的测试报告
​ 接着Karma启动浏览器，并将初始页面设置为Karma服务器的URL，当有浏览器链接进来时，Karma会提供一个”client.html”页面给浏览器，此页面在浏览器中运行时，会通过websocket连接回Karma服务器
​ 一旦服务器检测到websocket连接，就会通过websocket协议指示客户端执行测试：客户端页面打开一个iframe，其中包含来自服务器根据配置信息生成的“context.html”页面，该页面包括测试框架适配器，要测试的代码和测试代码
​ 当浏览器加载context页面时，一个onload事件处理程序会通过PostMessage连接客户端页面和这个context页面，此时测试框架适配器会通过客户端页面来运行测试，报告错误或成功

​ 发送到客户端页面的消息会通过websocket转发到Karma服务器，服务器将这些消息重新分派为浏览器事件，监听浏览器事件的Test Reporter通过监听浏览器事件获取数据，TestReporter可以打印这些数据，将其保存到文件，或将数据转发到另一个服务，由于数据是由测试框架适配器发送给Test Reporter的，因此适配器和Test Reporter几乎总是成对出现，如karma-jasmine和karma-jasmine-reporter

Nightwatch.js

Nightwatch.js是一个用于Web应用程序和网站的自动化测试框架，使用Node.js编写并使用W3C WebDriver API(即Selenium/WebDriver的底层协议)，它是一个完整的端到端测试解决方案，目的在于简化编写自动化测试和设置持续集成，Nightwatch还可以用于编写Node.js单元和集成测试

Nightwatch使用WebDriver API执行与浏览器自动化相关的任务，例如打开窗口，点击链接等等，Nightwatch通过CSS选择器或Xpath表达式来定位元素，Nightwatch的运行依赖于Selenium Standalone Server连接和WebDriver Service(浏览器驱动)，从Nightwatch1.0开始，Selenium Standalone Server不再是必备，除非需要针对于IE进行测试，或者需要使用Selenium Grid

Protractor

Protractor基于Angular和AngularJS应用程序的端到端测试框架，它构建于WebDriverJS(W3C WebDriver API的官方实现)之上，Protractor扩展了所有WebDriverJS功能，这些功能有助于自动化所有最终用户针对各种Web浏览器的操作

此外，Protractor还有一组额外的功能，比如自动等待元素加载和针对Angular的特殊定位器

Protractor默认使用Jasmine单元测试框架作为测试框架，所以用户可以像写Jasmine测试用例那样编写自己的测试用例，Protractor同时允许用户按喜好更改单元测试框架，由于低层架构使用W3C WebDriver协议，所有发往浏览器的测试命令均通过网络传输，速度会是个问题

TestCafe

TestCafe是一个用于测试Web端应用程序的纯NodeJS端到端解决方案，支持使用TyepScript或JavaScript(包括支持新特性async/await)来编写测试脚本

TestCafe不使用Selenium/WebDriver，它使用URL Rewriting Proxy代理，此代理将模拟用户操作的驱动程序脚本注入测试页面，由此，TestCafe可以完成测试所需的一切，例如模拟用户操作，身份验证，运行自己的脚本等，整个过程就是个仿真交互的过程

PhantomJS