专栏首页用户6517667的专栏Cypress简易入门教程

Cypress简易入门教程

1 Windows下安装

1.1方法一

1)安装node.js(https://nodejs.org/en/download/),根据版本选择32位或64位。

2)确认ndejs和npm是否安装上:

C:\Users\xiang>node -v
v12.18.0
C:\Users\xiang>npm -v
6.14.

3)生成package.json(假设准备安装在c:\Cypress>)

C:\Users\xiang>cd c:\Cypress
C:\Cypress>npm init

4)安装Cypress

C:\Cypress>npm install cypress --save-dev

我按照这种方法安装失败。

1.2方法二

1)安装yarn (https://yarnpkg.com/en/docs/install#windows-stable)

2)确认yarn是否安装上

C:\Users\xiang>yarn -v
1.22.4

3)安装Cypress

C:\Users\xiang>cd c:\Cypress
C:\Cypress>yarn add cypress --dev

2. 运行

2.1方法一

C:\Cypress\node_modules\.bin>cypress open

2.2方法二

C:\Cypress>yarn run cypress open

2.3 方法三(我经常用的方法)

配置C:\Cypress\package.json

{
  "license": "ISC",
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  },
  "devDependencies": {
    "cypress": "^4.8.0"
  }
}

打开运行控制器

C:\Cypress>yarn run cypress open

运行默认路径下的所有测试代码

C:\Cypress>yarn run cypress run

默认路径为C:\Cypress\cypress\integration,可以通过

{
  …
"integrationFolder": "cypress/integration/demo",
…
}

改变默认路径,上述代码中默认路径改为

C:\Cypress\cypress\integration\demo

3测试框架

  • before():相当于unittest中的def setUp(cls)方法或者Junit的@Before方法标签;
  • after():相当于unittest中的 def teardown(cls) 方法或者Junit的 @Before方法标签;
  • beforeEach() : 相当于unittest中的def setUpClass(cls) 方法或者Junit的@BeforeClass方法标签;
  • afterEach() : 相当于unittest中的def tearDownClass(cls) 方法或者Junit的@AfterClass方法标签。

4 GUI测试代码案例

4.1 第一个测试代码

测试电子商务系统登录程序

describe('login',function(){
  const username = 'cindy'
  const password = '123456'
  context('测试电子商务网站',function(){
    it('登录成功,调到商品列表页面',function(){
      cy.visit('http://127.0.0.1:8000')
      cy.get('input[name=username]').type(username)
      cy.get('input[name=password]').type(password)
      cy.get('form').submit()
      //断言
      cy.url().should('include','/goods_view')
      cy.get('title').should('contain','电子商务系统')
     })  
    })
})

4.2元素查找 - get

<input type="text" class="s_ipt" name="wd" id="kw" maxlength="100" autocomplete="off">
  • 根据元素 id 查找
cy.get('#kw')
  • 根据元素名称查找
cy.get('input[name="wd"]')
  • 根据元素的类名查找
cy.get('.s_ipt')
  • 根据CSS selector查找、
cy.get('input[maxlength ="100"]')

4.3元素查找 – contains

  • 根据元素文本查找
cy.contains('value')  
  • 根据元素属性及其文本查找
cy.get('div[name="ele-name"]').contains('value')
  • 使用正则匹配元素文本以查找
cy.get('.class-name').contains(/[0-9]*/)

4.4 操作

  • type(String)、输入,比如
cy.get('#kw'). type('Testing')
  • click()、点击,比如
cy.get('.btn'). click ()
  • clear()、清空input或textarea的内容,比如
cy.get('.ant-input').clear()
  • submit()、提交表单,比如
cy.get('.ant-form').submit()
  • dblclick()、元素双击,比如
cy.get('.ant-btn').dblclick()
  • rightclick()、元素右击,比如
cy.get('.ant-btn').rightclick()
  • select(String)、对<select>元素选择,比如
cy.get('.ant-select').select('apples')
  • check()、勾选checkbox,比如
cy.get('.ant-checkbox').check()
  • Uncheck、反选 checkbox,比如
cy.get('.ant-checkbox').uncheck()
  • scrollIntoView()、如果某个元素不在当前可视范围,可以滑动至可视范围,比如
cy.get('#id').scrollIntoView()
  • scrollTo(String)、指定位置滑动,比如
cy.scrollTo('bottom')、cy.get('#id').scrollTo(250, 250)

4.5 鼠标操作

  • 鼠标悬停事件:
cy.get('button').trigger('mouseover')
  • 鼠标按下:
cy.get('button').trigger('mousedown')
  • 鼠标抬起:
cy.get('button').trigger('mouseleave')
cy.get('button').trigger('mouseup')
  • 鼠标长按事件:
cy.get('button').trigger('mousedown')
cy.wait(1000)
cy.get('button').trigger('mouseleave')
  • 鼠标拖拽事件
cy.get('[data-cy=draggable]')
  .trigger('mousedown', { which: 1, pageX: 600, pageY: 100 })
  .trigger('mousemove', { which: 1, pageX: 600, pageY: 600 })
  .trigger('mouseup')
describe('baidu',function(){
  context('测试百度网站',function(){
    it('查询成功',function(){
      cy.visit('https://www.baidu.com')
      cy.get('input[name=wd]').type("软件测试")
      cy.get('#su').click()
      cy.get('title').should('contain','百度搜索')
     }) 
    it('进入高级查询成功',function(){
      cy.get('a[name=tj_settingicon]').trigger('mouseover')
      cy.get('.bdpfmenu').should('exist')
     })  
  })
})

4.6 断言

  • 针对长度的断言
cy.get('li.selected').should('have.length',3)
  • 正对类的断言
cy.get('from').fijd('input').should('not.have.class','disabled')
  • 针对值断言
cy.get('textarea').should('have.value','3testing')
  • 针对文本内容的断言
cy.get('a').parent('span.help').should('contain','click me')
  • 针对元素可见与否的断言
cy.get('button').should('be.visible')
  • 针对元素存在与否的断言
cy.get('#loading').should('not.exist')
  • 针对元素状态的State的断言
cy.get(':radio').should('be.checked')
  • 针对CSS的断言
cy.get('.completed').should('have.css','text-decoration','line-through')

4.7 跨iframe操作

describe('login',function(){
  context('测试啄木鸟软件咨询网',function(){
    it('点击我的介绍成功',function(){
      cy.visit('http://www.3testing.com')
      cy.get('#head',{timeout: 2000})
            .then($iframe => {
                cy.wrap($iframe.contents().find("#introduce"));
            })
            .then($btn => {
                cy.wrap($btn).click()
            });
      //断言
      cy.url().should('include','introduce.html')
      cy.get('title').should('contain','啄木鸟软件测试咨询网-顾翔介绍')
     })  
  })
})

4.8 多窗口操作

Cypress不支持多窗口操作。

5 API测试

5.1 普通API测试

describe('login',function(){
  const username = 'cindy'
  const password = '123456'
  const producturl="http://127.0.0.1:8000/login_action/"
  cy.request({
        method: 'POST',
        url: producturl,
        body: {
          username: username
          password: password
}
      })
  })

5.2 CSRF token API测试

describe('login',function(){
  const username = 'cindy'
  const password = '123456'
  const producturl="http://127.0.0.1:8000/login_action/"
    Cypress.Commands.add('loginByCSRF', (csrfToken) => {
    cy.request({
        method: 'POST',
        url: producturl,
        failOnStatusCode: false, // 不要失败,这样我们才能断言
        form: true, // 我们正在提交一份常规表格
        body: {
          username,
          password,
          csrfmiddlewaretoken: csrfToken // 将此作为主体的一部分插入
        }
      })
  })
  // csrf在返回的html中,我测试的Django产品的CSRF token用这种方法
  it('策略#1:从HTML解析令牌', function(){
    // 如果我们不能改变我们的服务器代码以使解析CSRF令牌变得更容易,
    // 我们可以简单地使用cy.request来获取登录页面,然后解析HTML内容
    // 以找到嵌入在页面中的CSRF令牌
    cy.request(producturl)
      .its('body')
      .then((body) => {
        //我们可以用Cypress.$解析字符串主体,从而使我们能够轻松地查询到它
    cy.log(body)
        const $html = Cypress.$(body)
        const csrf  = $html.find("input[name=csrfmiddlewaretoken]").val()
    cy.loginByCSRF(csrf)
          .then((resp) => {
            expect(resp.status).to.eq(200)
      expect(resp.body).to.contain("Company 2017")
          })
      })
    })
  })
/*
  // 如果csrf在响应头中
  it('策略#2:从响应头解析令牌', function(){
    // 如果我们将csrf令牌嵌入到响应头中,那么我们就可以更容易地提取它,
    // 而不必深究最终的HTML
    cy.request(producturl)
      .its('headers')
      .then((headers) => {
        const csrf = headers['csrftoken']
    cy.log(csrf)
        cy.loginByCSRF(csrf)
          .then((resp) => {
            expect(resp.status).to.eq(200)
            expect(resp.body).to.contain("Company 2017")
          })
      })
    })
   }) */

本文分享自微信公众号 - 软件测试培训(iTestTrain),作者:顾翔

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 测试开发之路--Flask 之旅 (四):登录与权限控制

    接着上一篇,我们现在拥有了使用数据库的能力并使用Flask-Security针对Flask-SQLAlchemy的扩展完成了对User和Role表的维护。今天我...

    小老鼠
  • 接口自动化测试:快速敏捷迭代的业务类产品适合做接口自动化测试

    当前互联网产品迭代速度越来越快,现在很多业务类产品一周发两个版本,甚至更多。每次发版之前都需要对所有功能进行回归测试,在人力资源有限的情况下,做自动化测试很有必...

    小老鼠
  • 安全测试工具(连载2)

    AWVS即Acunetix WVS,全称Acunetix Web Vulnerability Scanner,它是一款常用的WEB应用程序安全测试工具,该工具可...

    小老鼠
  • Cypress初步使用

    Cypress是新一代前端测试框架,它基于node js。解决了开发人员和QA工程师在测试现代应用程序时面临的关键难点问题。   Cypress包含免费的、开源...

    赵云龙龙
  • 前端自动化测试实践05—cypress-e2e入门

    在 jest 单元测试中使用快照、API-mock 和 DOM 样式状态断言已经能够实现基础的 UI 测试,但是单元测试属于白盒测试,更关注数据的流动,而端到端...

    CS逍遥剑仙
  • Java面试集锦

                    特点:以线性方式存储,可以存放重复对象 , 有序【存入与取出顺序一致】

    杨校
  • 面向对象设计的设计模式(十二):享元模式

    这里我们使用《Objective-C 编程之道:iOS设计模式解析》里的第21章使用的例子:在一个页面展示数百个大小,位置不同的花的图片,然而这些花的样式只有6...

    用户2932962
  • Cypress系列(31)- title() 命令详解

    https://www.cnblogs.com/poloyy/category/1768839.html

    小菠萝测试笔记
  • 23种设计模式之享元模式

    上面定义中要求细粒度对象, 那么不可避免的使得对象数量多且性质相近, 我们将这些对象的信息分为两个部分: 内部状态和外部状态

    烟草的香味
  • Ubuntu安装Swftools的方法

    飞奔去旅行

扫码关注云+社区

领取腾讯云代金券