端到端测试（三）—— React中引入Cypress

这篇文章比较随意，主要是记录关于在React项目中引入Cypress所遇到的一些坑以及不同于在Vue项目中所使用的技术栈的情况下提供的解决方法。

安装

我们直接去Cypress的官网，根据教程我们先进入我们项目的根目录，执行npm install cypress --save-dev，在安装完成之后是没有任何的动静的，除了我们的package.json中会多一个版本号的记录，在这里我们根据指引在控制台中输入node_modules/.bin/cypress open这一条命令主要是让我们进入这个目录后去执行cypress的一个可执行文件，在等待片刻后页面上会弹出一个熟悉的控制台，在控制台中会有一个Alert，我们点击按钮got it 就可以看到我们项目的根目录中生成了一个cypress.json文件和一个Cpress的文件夹，在文件夹的intergration中会有一些默认写好的spec，这些用例是框架在找不到指定路径时就会默认生成这么一个目录去提供整体结构的示例的，接下来我们动手改造一下我们的目录结构，首先我们创建一个文件夹名为test，然后在里面再创建一个e2e文件夹，然后我们在cypress.json中填入我们需要修改的信息

{
  "projectId": "pza7eq",
  "fixturesFolder": "test/e2e/fixtures",
  "integrationFolder": "test/e2e/specs",
  "pluginsFile": "test/e2e/plugins",
  "screenshotsFolder": "test/e2e/screenshots",
  "supportFile": "test/e2e/support",
  "videosFolder": "test/e2e/videos",
  "baseUrl": "http://localhost:3000",
  "viewportHeight": 768,
  "viewportWidth": 1366
}

然后我们在package.json的scripts项下面加一条启动命令："test:e2e": 'cypress open'，下次启动直接运行这条命令就可以了。然后根据我们修改后的json在我们希望的目录下创建一系列的文件，这样我们就可以愉快的在新的specs文件夹下写用例了

关于Mock请求

在这个React项目中不同于我们之前的Vue项目，我在这个项目中使用了fetch函数做异步请求，之前使用的是axios，这就导致一个问题，Cypress的server()函数是无法拦截fetch的请求的，所以我们通过删除window对象中的所有的fetch来达到目的，迫使浏览器使用XHR的方式请求，这方面的教程详见这条issue：https://github.com/cypress-io/cypress/issues/95
下面是我使用的方法

Cypress.on('window:before:load', win => {
  delete win.fetch
})

在support文件夹下找到index.js，在里面加入这一段代码即可使用cy.server() cy.route()套餐

关于DOM的抓取

同样在这个项目中，我们使用到了css-loader做了一个css module的处理，这就导致我们所涉及到的class中都会在尾部被加入一串随机字符，这就导致我们无法使用之前简单直接的通过class去抓取我们需要的DOM元素，在这种情况下官方是推荐我们在开发的过程中给我们需要测试的元素新加入一个属性，例如data-cy去作为这个元素的唯一标识符，但是由于这个项目已经成型，那我们如何依赖于class对DOM进行抓取呢。在这个issue中有对于这方面的讨论：https://github.com/cypress-io/cypress/issues/1212
在这里我所使用的方法为使用类选择器做一个判断处理

• [class*=value] 表示所有class 包含 value 的元素
• [class^=value] 表示所有class 以 value 开头的元素