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.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)、对元素选择，比如

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")
          })
      })
    })
   }) */

原文地址：https://blog.csdn.net/yinghuochong124/article/details/114582431

Cypress简易入门教程

相关推荐