Cypress 自动化测试学习使用

2019-10-11 admin

安装

mkdir cypress-start

npm install

# 进入创建的项目目录
cd /your/project/path
cd cypress-start

npm install cypress --save-dev

yarn add

cd /your/project/path
cd cypress-start

yarn add cypress --dev

打开运行cpress

./node_modules/.bin/cypress open

或者使用npm bin

$(npm bin)/cypress open

或者使用npx

npx cypress open

或者使用yarn

yarn run cypress open

开始使用

  1. 创建一个sample_spec.js文件.
  2. 查看 Cypress 更新我们的spec文件列表.
  3. 登录 Cypress 交互模式.

在 cypress/integration 目录下创建一个新的文件

touch {your_project}/cypress/integration/sample_spec.js

一旦我们创建了这个文件,Cypress测试引擎会立马在Integration Tests列表中显示出来。Cypress会监视你的spec文件,有任何的修改和更新都会立马显示出来。 即使我们还没有写任何的测试也没有关系。点击sample_spec.js,我们会看到Cypress会自动打开浏览器并运行测试脚本。不过此时会看到 No tests found in your file:/usr/local/proj/cypress-start/cypress/integration/sample\_spec.js的提示。

编写一个简单的测试

  1. 编写第一个通过的测试.
  2. 编写第一个失败的测试.
  3. 关注 Cypress 实时加载.

sample_spec.js文件中书写如下代码:

describe('My First Test', function() {
  it('Does not do much!', function() {
    expect(true).to.equal(true)
  })
})

当你保存文件之后会发现,浏览器自动重新加载了。立马就会呈现出测试的结果。 My first test shown passing in the Test Runner 尽管我们没有做一些实际的事情,但是这个测试是通过的。

接下来让我们来编写第一个失败的测试。

describe('My First Test', function() {
  it('Does not do much!', function() {
    expect(true).to.equal(false)
  })
})

同样的,一旦我们保存文件,浏览器立马就会刷新并呈现出一个成功和一个失败的测试结果。 Failing test

从代码语法中我们能看出来

这是Cypress所依赖库的一部分。

写一个实际的测试用例

通常测试都分三个阶段:

  1. 设置应用的状态.
  2. 做一些动作.
  3. 断言当前应用的状态.

通俗来说就是我们设置应用的一个初识状态,然后我们做一些操作来改变这个状态值,然后再来判断结果是不是跟我们预期的一样。

接下来我们根据以下几个步骤,通过Cypress来逐步实现:

  1. 访问一个网页。
  2. 查找网页上的一个元素。
  3. 对这个元素进行操作。
  4. 断言页面的内容。

第 1 步: 访问一个网页

cy.visit() 的使用很简单,我们以访问百度首页为例:

 describe('My First Test', function() {
   it('Visits the baidu', function() {
   //   cy.visit('https://example.cypress.io')
     cy.visit('http://www.baidu.com')
   })
 })

保存文件之后打开Cypress Test Runner就会发现,浏览器里会自动打开百度首页。需要值得注意的是我们的测试,最好是对我们可控的网站进行测试。

第 2 步: 查询页面元素

使用contains来查找包含参数内容的元素:

describe('My First Test', function() {
    it('Visits the baidu', function() {
        cy.visit('http://www.baidu.com');
        cy.contains('百度一下');
    })
})

我们会发现测试通过了。如果我们把cy.contains('百度一下')修改为cy.contains('百度一下XXX')保存文件,就会发现等待一段时间之后提示测试失败。

第 3 步: 点击一个元素

我们在第二步已经获取到了一个元素,只需要在该元素上进行点击操作即可:

describe('My First Test', function() {
    it('Visits the baidu', function() {
        cy.visit('http://www.baidu.com');
        cy.contains('百度一下').click();
    })
})

由于百度首页的百度一下按钮在输入框没有输入任何值得时候点击,页面只是会重新加载一下,没有其他的改变,所以不太好进行断言。所以我们希望在输入框中输入一些内容,然后再点击按钮,最后再进行断言。

第 4 步: 进行断言

由于百度首页的百度一下按钮在输入框没有输入任何值得时候点击,页面只是会重新加载一下,没有其他的改变,所以不太好进行断言。所以我们希望在输入框中输入一些内容,然后再点击按钮,最后再进行断言。

describe('My First Test', function() {
    it('Visits the baidu', function() {
        cy.visit('http://www.baidu.com');
        cy.get('#kw').should(($kw) => {
            $kw.val('cypress')
        });
        cy.contains('百度一下').click();
        cy.url().should('include', '/s?');
    })
})

另外可以对输入框单独的进行断言。通过调用type方法来对获取到的输入框进行值的填充。

describe('My First Test', function() {
    it('Visits the baidu', function() {
        cy.visit('http://www.baidu.com');
        cy.get('#kw')
            .type('cypress')
            .should('have.value', 'cypress');
    })
})

以上就是一个简单的测试用例。

个人认为Cypress比较好的地方在于可调试性非常之好。Time travel、Snapshots、Page events、Console output这些都能够在Cypress 打开的浏览器左侧看到。以上只是一些简单的使用。需要进行深入了解的话查阅官方文档

[转载]原文链接:https://segmentfault.com/a/1190000020644878

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77078.html

文章标题:Cypress 自动化测试学习使用

相关文章
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
使用axios发送post请求,body传送数据格式form和json区别
先来看看这两个种传送格式的写法 1.form格式,将Content-Type类型设置为application/x-www-form-urlencode,POST请求时将data序列化,提交的数据会按照 key1=val1&key2=...
2018-07-25
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
在 Microsoft Azure 中使用 MEAN 堆栈基于开放数据协议
网络开发人员通常构建伟大的应用程序在客户端使用JavaScript和ASP(c#或Visual Basic . NET)在服务器端。 但是如果你能使用一个共同的语言来构建应用程序的所有层堆栈,从浏览器和服务器端业务处理服务层,甚至在数据库查...
2015-11-12
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML <div clas...
2017-03-17
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { "list": [ { pagePath: "pages/index/main", iconPath: &...
2018-05-25
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
AngularJS:何时应该使用Directive、Controller、Servic
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制...
2015-11-11
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> exp...
2017-03-13
回到顶部