[Cypress最新版本]Cypress10.x版本安装、使用指南

iTesting

发布于 2022-09-01 11:41:16

2K0

发布于 2022-09-01 11:41:16

文章被收录于专栏：iTestingiTesting

一个人到底要走多少弯路，才能成为一名合格的测试开发工程师？

转眼之间，Cypress又又又更新啦！我将讲解Cypress最新Release的10.x版本，包括新版本的安装使用、老版本的迁移。今天是第一篇， Cypress10.x新版本安装使用（买了书的同学们，公众号回复你的微信号，拉你到Cypress中国群）。

最近两年测试界最火的测试工具莫过于Cypress，作为测试工程师弯道超车必备、下一代UI自动化测试利器，Cypress开发团队也一直在拼命做事，这不，Cypress10.x重磅发布，将“Component Testing”重磅引入到了测试团队。测试人员又可以将自己的势力版图向开发侧移动一下啦：）

Cypress10.x是迄今为止Cypress最大一次改版，如果你是Cypress老用户，静待几天，我将再出一篇Cypress开发迁移至南。今天先服务新用户。为新接触Cypress的同学讲解Cypress 10.x的安装使用。

如果你买了书，你会发现书上安装好的界面截图跟你看到的不一致，不要紧，底层没变。

安装

安装一点没变。推荐你用VS Code创建项目根目录，然后，在项目根目录下执行如下命令

# 两种方式你随意挑选即可
# npm和yarn的安装我不讲了，你自己看书或者网上找
npm install cypress --save-dev

yarn add cypress@latest

安装好后，你会发现项目根目录（本例为ITESTINGDEMO）下多了如下文件/文件夹。

这个时候你还什么也看不到，没关系，继续在项目根目录下执行如下命令：

// 关注iTesting， 加入万人测试社群
npx cypress open

然后奇迹出现了：）你将会看到如下页面。（这个就是Cypress10.x的新界面了，其中E2E Testing，是我们之前用Cyprres做的所有的测试统称， Component Testing是Cypress10.x版本才引进的，组件测试，怎么样，看名字想到了啥？UT->Componment Testing->Contract Testing/API Testing->UI Testing）,测试人员的版图是不是又要扩展了？：）

我们稍安勿躁，先选择E2E Testing，你会看到Cypress会引导你创建一些文件。

你可以直接点Continue继续，Cypress会自动为你创建这些文件。

这里为老用户解释下：在新版本中，Cypress有意区分了2种类型的测试。E2E测试和Componment Testing。现在我们配置的是E2E测试的选项，其中：

cypress.config.js 就相当于以往cyprss.json的功效。

cypress/support/e2e.js,就相当于以往cypress/support/index.js。

cypress/support/commands.js ，这个文件没变，还是原来的作用。

cypress/fixtures/example.json，这个是数据驱动文件，放测试数据的，但是看过书的最大，一般我们都不用，我们自己会放在页面文件下。

你点击过Continue后，Cypress会让你选择执行的浏览器，注意这里的浏览器只能是Cypress支持的浏览器，你些浏览器你安装了几个，这里就显示几个。

我们选择Chrome，然后点击那个“Start E2E Testing in Chrome”，这个时候你能看到下面这个类似于Cypress DashBoard的东东（这个也是Cypress的鸡贼支持，新版本直接把交互式运行器和DashBoard做了集成了。）

因为我们什么测试用例都没建呢，所以我们选择上图的第一个“Scaffold example specs”，这个就是给你的一些现成的测试脚手架，让你快速了解下通过Cypress创建出来的测试用例是什么样子的。不得不说，前端开发就是比后端开发讲究。

你选择这个后，会看到这个图：

继续点击“Okey”，可以看到很多测试用例就生成好了。以后你写的新的测试用例，也会一并显示在这里。

这个时候，你切换到你项目根目录下，就会发现多了很多文件，这些文件就是运行一个Cypress测试的必要文件。

在这些文件中，注意：

e2e文件夹，就是以前我们的IntegrationTest文件夹。

下面1， 2 这些就是测试文件夹，注意这些文件夹下的测试文件后缀名，现在都叫**.cy.js了。

然后你随便找个.cy.js文件打开看：


  describe('关注iTesting， 学好Cypress', () => {
    it(() => {
      // 老配方老味道，这里不多讲
      // 看过书的知道，这个代码组织方式不是最佳实践，最佳实践在书上：）
      cy.contains('Pay electric bill')
        .parent()
        .find('input[type=checkbox]')
        .check()
    })

我们随便在Cypress最新的交互式运行器上（不确定Cypress官方还叫不叫这个名了，这个更像一个dashboard），选择一个测试用例运行下。