Cypress简易入门教程（下）-阿里云开发者社区

Cypress简易入门教程（下）

2023-02-13 196

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Cypress简易入门教程（下）

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