Cypress与Selenium/WebDriver

Selenium/WebDriver架构

它基于Client/Server架构设计，其架构图如下所示

Language Bindings/Client

也叫做ClientLibrary，它是Selenium框架的一系列jar文件，可以使用不同的编程语言编写，也正因为它的存在，才使得各个语言编写的测试代码能够被正确解析

浏览器驱动WebDriver

WebDriver用于管理和完全控制浏览器，根据不同的浏览器区分不同的Driver

HTTP传输的JSON Wire协议

JSON(JavaScript Object Notation)是一种在Web上的服务器端和客户端之间传输数据的开放标准
JSON Wire协议是一个抽象规范，定义了用户在自动化脚本里操作该如何映射到Selenium或HTTP请求和响应中，通过JSON Wire协议可以在HTTP服务器之间传输信息，Language Bindings和WebDriver就是通过HTTP协议传输JSON数据的

多浏览器

Selenium/WebDriver几乎支持所有主流浏览器，通过浏览器驱动实现对浏览器的控制

Selenium代码执行过程

from selenium import webdriver
driver = webdriver.Chrome()
dirver.get("http://www.baidu.com")

那么执行这段代码会发生哪些事情？

• Selenium的Language Bindings首先与Selenium API(基于浏览器原生API封装的更加面向对象的Selenium WebDriver API，它可以直接操作浏览器页面里的元素)进行通信

• Selenium API通过JSON Wire协议把代码交由Language Bindings转换成一个JSON Payloads发送到浏览器驱动程序

• 浏览器驱动程序有一个内置的HTTP Server来接收HTTP请求，当这个HTTP Server获取到了发送来的JSON Payloads后，就会被浏览器驱动转换成HTTP请求，然后再通过HTTP协议发送给真正的浏览器执行

• Selenium脚本中的命令在浏览器上执行后，再将执行结果通过HTTP请求返回给浏览器驱动

• 浏览器驱动再通过JSON Wire协议把结果返回给IDE，从而我们能够看到执行结果

Selenium/WebDriver执行慢

从代码的执行过程不难看出，代码进行多次转换并通过网络进行传输，即便代码在本地运行，WebDriver和浏览器的通信也要通过网络传输，在这种情况下，所有的请求会发送给本地主机，其后是环回接口(环回接口用来查错和运行本机内部的网络服务)，网络通信会从OSI模型的第三层即网络层开始，遗传经过传输层、会话层、表示层到达应用层，只有物理层和数据链路层被略过，对于浏览器来说一个请求从本地主机到环回接口返回需要花费的时间决定了代码执行的效率，这就是Selenium/WebDriver执行慢根本原因

Cypress与Selenium/WebDriver比较

驱动浏览器方式

与Selenium/WebDriver通过运行在浏览器以外的命令进行Remote Call方式驱动浏览器的方式不同，Cypress命令跟被测应用程序运行在同一个浏览器实例当中

测试范围

与Selenium/WebDriver只能测试UI层不同，Cypress可以测试UI层/接口层/单元测试，对于测试金字塔而言，越往上投入越大收益越低

完备的测试框架与测试Library

Cypress具有完备的测试框架，而Selenium/WebDriver仅是一个Library，详细比较如下表所示：

Cypress是一个完备的测试框架，自带了测试运行器(Test Runner)，单元测试框架(Mocha)，断言库(Chai-jQuery)，唯一需要做的就是编写测试代码，ALL IN ONE，从对比结果中发现Cypress不支持并发运行，但是它提供了跨虚拟机并行运行测试脚本并手机测试结果的能力；脚本语言目前只支持JavaScript或许这也是使用范围不佳的原因之一，而在Cypress4.0之前仅支持Chromium内核的浏览器，比如Chrome，Electron等浏览器，从4.0开始支持了Firefox和Microsoft Edge

Cypress与Karma比较

// 安装Karma
npm install karma --save-dev
// 安装插件
npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev
// 运行Karma
./node_modules/karma/bin/karma start

Cypress与Nightwatch比较

// 安装Node.js
// 安装Nightwatch
npm install nightwatch --save-dev
// 安装WebDriver
npm install geckodriver --save-dev
npm install chromedriver --save-dev
npm install safaridriver --save-dev
safaridriver --enable
npm install selenium-standalone --dave-dev
// 配置nightwatch.json,nightwatch.conf.js等参考
//https://nightwatchjs.org/gettingstarted//configuration

Cypress与Protractor比较

// 全局安装Protractor
npm install -g protractor
// 这将安装两个命令行工具protractor和webdriver-manager
// 验证安装
protractor --version
// 下载必要的binaries
webdriver-manager update
// 启动Selenium Server
webdriver-manager start
// 编写好测试用例，例如文件名为test.js，然后将其配置到配置文件conf.js中
exports.config={
     seleniumAddress:'http://localhost:4444/wd/hub',
     specs:['test.js']
};
// 运行测试
protractor conf.js

// 以下代码打开helloqa.com并验证title
// 网站不是基于Angular开发，因此代码需要做如下修改
// browser.waitForAngularEnabled(false);
describe('Protractor Demo App', function(){
    it('should have a title', function(){
          browser.waitForAngularEnabled(false);
          browser.get('http://helloqa.com');
          expect(browser.getTitle()).to.have.string('davieyang');;
    });
});

Cypress与TestCafe比较

// 确定本机安装了Node.js和npm后
npm install testcafe --save-dev
npm install -g testcafe
// 运行测试
testcafe chrome{path-to-testfile/}testfile

Cypress和Puppeteer比较

npm i puppeteer
yarn add puppeteer
// 编写测试，访问helloqa站点并截图
const puppeteer=require('puppeteer');
     (async()=>{
          const browser = await puppeteer.launch();
          const page = await browser.newPage();
          await page.goto('https://www.helloqa.com');
          await page.screenshot({'path:testtExample.png'});
          await browser.close();
})();// 运行测试
node testExample.js

Cypress的局限性

• 不建议使用Cypress用于网站爬虫或性能测试

• Cypress不支持多标签测试

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

• 每个Cypress测试用例应遵守同源策略即协议相同，域名相同，端口相同，否则自动报错

• 目前只支持Chrome、Firefox、Microsoft Edge和Electron

• 不支持移动端

• 对于iframe的支持有限

• 不能在window.fetch上使用cy.route()

• 没有影子DOM支持

作者：Davieyang.D.Y

原文链接：https://davieyang.blog.csdn.net/article/details/109911583