前言
Cypress 作为一个全新的前端测试框架，相较于传统的 Selenium 已经在易用性和性能上拓宽了很多优秀的地方。不过，在实际使用过程中很多团队并不是从零开始进行自动化测试，而是需要在已有的 Selenium 测试基础上集成 Cypress，这就需要我们来聚焦这个问题，本文便是探讨基于 Cypress 与 Selenium 的集成方式。
Cypress Vs. Selenium
Cypress 在易用性，编写测试脚本时的自动提示和 Debug 功能，独立的 Cypress Runner，在浏览器内跑的自动化测试等方面都有着独到的优势。而 Selenium 更是一个被企业广泛使用、可扩展性极高的自动化测试框架。
在次级场景下，有需要 Cypress 与 Selenium 集成的实际需求，例如在 Cypress 中使用真实浏览器模拟 Node.js 后端行为以测试前端和后端的完整集成（实现类似于快速 Mock API ）。此时，我们需要先引入 Selenium，然后再利用内置的 Selenium Wrappers 来模拟请求来模拟 API 。
集成方法
Selenium 的 WebdriverIO 能与 Cypress 进行成功集成，首先引入 Selenium 需要进行 NPM 安装（推荐全局安装）：
npm install selenium-webdriver
通过 npm 安装之后，可以在 cypress/support/index.js 配置文件中引入对 Selenium 的依赖：
// cypress/support/index.js
global.seleniumWebdriver = require('selenium-webdriver');配置 Selenium WebdriverIO
接着在 cypress/plugins/index.js 文件中配置 Selenium WebdriverIO：
-- -------------------- ---- -------
-- ------------------------
-------------- - ---- ------- -- -
---------- -
--------------- ------------ ---------- -- -
----- ------------ - - ------------ ---------- --
------ --- ----------------- -- -
----- ------ - --- ---------------------------
--------------------------------------------
-------------------------------
-------------------- ---------------------------------------------------------------------------------------- -------------------------------------
---------
-------------------------
---
-
---
--使用 Selenium WebdriverIO 进行测试
在 Cypress 中运行 Selenium WebdriverIO 的测试非常简单，只需要在 Cypress 命令行介面中进行以下操作：
- 启动 Selenium WebdriverIO
# Terminal 1 $ webdriver-manager start
- 运行 Cypress 测试脚本
# Terminal 2 $ yarn run cypress:open
在运行 Cypress 测试脚本时，需要在 Cypress 的测试目录下的 commands.js 中定义一个命令，如下所示：
-- -------------------- ---- -------
--------------------------------------------- --------- -- -
----- - ----------- - - -------
------ ------------------------ - ------------ ---------------- - ----- -- - --
--------------- -- -
----- --------- - --- -------------------
--------------------------
------------------------
---------
---------------- - ---- ----- -------------------------
------------------ - ---- ----- -------------------
--
---定义完命令之后，在 Cypress 中引入 createSeleniumSession 即可使用 Selenium WebdriverIO 代码驱动浏览器进行测试，如下所示：
-- -------------------- ---- -------
-------------- ---- ------- --- ---------- -- -- -
------------- -- -
--------------------------
------------ ---------
--
--
-------- ---- ------ --- ---------- -- -- -
----- -------- - ---------------------------
----- ---------- - -----------
----------------------------------- -- -
---------------------------- -- -
------------------------------ -- -
----------------------------------
--
--
--
--
---总结
本文主要介绍了如何在 Cypress 中集成 Selenium。通过上述步骤，我们可以利用 Cypress 与 Selenium 来打破隔膜，深入地测试与前端相关的应用场景，例如进行前后端集成测试时使用 Selenium 模拟 API 请求，并通过 Cypress Runner 进行 UI 测试，既能自动化，又能确保测试质量，是一种很有效的测试方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6503e6b295b1f8cacd0aa204