zoukankan      html  css  js  c++  java
  • Cypress测试用例(中文文档)

    e2e测试实例:

    测试地址:https://example.cypress.io/commands/actions

    官方项目:https://github.com/cypress-io/cypress-example-kitchensink

    1.actions.spec.js

    /// <reference types="Cypress" />
    
    context('Actions', () => {
      // 访问线上网站
      beforeEach(() => {
        cy.visit('https://example.cypress.io/commands/actions')
      })
    
      // https://on.cypress.io/interacting-with-elements
    
      it('.type() - 表单输入', () => {
        // 判断输入:邮件
        cy.get('.action-email')
          .type('111@email.com').should('have.value', '111@email.com')
    
          // 输入类型: 特殊字符序列
          .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
          .type('{del}{selectall}{backspace}')
    
          // 输入类型: 关键修饰符:这些是等效的
          .type('{alt}{option}') //these are equivalent
          .type('{ctrl}{control}') //these are equivalent
          .type('{meta}{command}{cmd}') //these are equivalent
          .type('{shift}')
    
          // 输入类型:将每次按键延迟0.1秒
          .type('每次按键延迟0.1秒', { delay: 100 })
          .should('have.value', '每次按键延迟0.1秒')
         // 获取焦点后输入
        cy.get('.action-disabled')
          .type('键入之前忽略错误检查', { force: true })
          .should('have.value', '键入之前忽略错误检查')
      })
    
      it('.focus() - 获取焦点', () => {
        // 获取焦点:判断是否表成黄色样式
        cy.get('.action-focus').focus()
          .should('have.class', 'focus')
          .prev().should('have.attr', 'style', 'color: orange;')
      })
    
      it('.blur() - 失去焦点', () => {
        // 失去焦点是否变成红色边框
        cy.get('.action-blur').type('About to blur').blur()
          .should('have.class', 'error')
          .prev().should('have.attr', 'style', 'color: red;')
      })
    
      it('.clear() - 清空内容', () => {
        // 清空内容判断是否为空
        cy.get('.action-clear').type('清空内容判断是否为空')
          .should('have.value', '清空内容判断是否为空')
          .clear()
          .should('have.value', '')
      })
    
      it('.submit() - 表单提交', () => {
        // 找到指定输入内容:提交
        cy.get('.action-form')
          .find('[type="text"]').type('HALFOFF')
        cy.get('.action-form').submit()
          .next().should('contain', 'Your form has been submitted!')
      })
    
      it('.click() - 点击', () => {
        // https://on.cypress.io/click
        cy.get('.action-btn').click()
    
        // You can click on 9 specific positions of an element:
        //  -----------------------------------
        // | topLeft        top       topRight |
        // |                                   |
        // |                                   |
        // |                                   |
        // | left          center        right |
        // |                                   |
        // |                                   |
        // |                                   |
        // | bottomLeft   bottom   bottomRight |
        //  -----------------------------------
    
        // 获取画布:在不同位置进行点击
        cy.get('#action-canvas').click()
    
        cy.get('#action-canvas').click('topLeft')
        cy.get('#action-canvas').click('top')
        cy.get('#action-canvas').click('topRight')
        cy.get('#action-canvas').click('left')
        cy.get('#action-canvas').click('right')
        cy.get('#action-canvas').click('bottomLeft')
        cy.get('#action-canvas').click('bottom')
        cy.get('#action-canvas').click('bottomRight')
    
        // 获取画布坐标进行点击
        // that controls where the click occurs :)
    
        cy.get('#action-canvas')
          .click(80, 75) // click 80px on x coord and 75px on y coord
          .click(170, 75)
          .click(80, 165)
          .click(100, 185)
          .click(125, 190)
          .click(150, 185)
          .click(170, 165)
    
        // 通过传递多个元素来单击多个元素:true
        cy.get('.action-labels>.label').click({ multiple: true })
    
        // 单击之前忽略错误检查
        cy.get('.action-opacity>.btn').click({ force: true })
      })
       // 双击
      it('.dblclick() -双击', () => {
        // https://on.cypress.io/dblclick
    
        // Our app has a listener on 'dblclick' event in our 'scripts.js'
        // that hides the div and shows an input on double click
        cy.get('.action-div').dblclick().should('not.be.visible')
        cy.get('.action-input-hidden').should('be.visible')
      })
    
      it('.check() - 多选', () => {
        // https://on.cypress.io/check
    
        // By default, .check() will check all
        // matching checkbox or radio elements in succession, one after another
        cy.get('.action-checkboxes [type="checkbox"]').not('[disabled]')
          .check().should('be.checked')
    
        cy.get('.action-radios [type="radio"]').not('[disabled]')
          .check().should('be.checked')
    
        // .check() accepts a value argument
        cy.get('.action-radios [type="radio"]')
          .check('radio1').should('be.checked')
    
        // .check() accepts an array of values
        cy.get('.action-multiple-checkboxes [type="checkbox"]')
          .check(['checkbox1', 'checkbox2']).should('be.checked')
    
        // Ignore error checking prior to checking
        cy.get('.action-checkboxes [disabled]')
          .check({ force: true }).should('be.checked')
    
        cy.get('.action-radios [type="radio"]')
          .check('radio3', { force: true }).should('be.checked')
      })
    
      it('.uncheck() - 取消选中', () => {
        // https://on.cypress.io/uncheck
    
        // 默认情况下,.uncheck()将取消选中所有匹配项
        // 一个接一个的复选框元素
        cy.get('.action-check [type="checkbox"]')
          .not('[disabled]')
          .uncheck().should('not.be.checked')
    
        // .uncheck() 接受1个值参数:'checkbox1'
        cy.get('.action-check [type="checkbox"]')
          .check('checkbox1')
          .uncheck('checkbox1').should('not.be.checked')
    
        // .uncheck() 接受一个数组:['checkbox1', 'checkbox3']
        cy.get('.action-check [type="checkbox"]')
          .check(['checkbox1', 'checkbox3'])
          .uncheck(['checkbox1', 'checkbox3']).should('not.be.checked')
    
        // 取消检查之前忽略错误检查
        cy.get('.action-check [disabled]')
          .uncheck({ force: true }).should('not.be.checked')
      })
    
      it('.select() - 下拉选择', () => {
        // https://on.cypress.io/select
    
        // 选择具有匹配文本内容的选项:label
        cy.get('.action-select').select('apples')
    
        cy.get('.action-select-multiple')
        .select(['apples', 'oranges', 'bananas'])
    
        // 选择具有匹配值的选项:value
        cy.get('.action-select').select('fr-bananas')
    
        cy.get('.action-select-multiple')
          .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
      })
    
      it('.scrollIntoView() - 调整滚动条位置', () => {
        // https://on.cypress.io/scrollintoview
    
      //通常所有这些按钮都是隐藏的, 
      //因为它们不在
      //父母的可见区域 
      //(我们需要滚动才能看到它们)
        cy.get('#scroll-horizontal button')
          .should('not.be.visible')
    
        // 将按钮滚动到视图中,就像用户已经滚动一样
        cy.get('#scroll-horizontal button').scrollIntoView()
          .should('be.visible')
    
        cy.get('#scroll-vertical button')
          .should('not.be.visible')
    
        // 处理所需的滚动方向
        cy.get('#scroll-vertical button').scrollIntoView()
          .should('be.visible')
    
        cy.get('#scroll-both button')
          .should('not.be.visible')
    
        // 向右和向下滚动
        cy.get('#scroll-both button').scrollIntoView()
          .should('be.visible')
      })
    
      it('.trigger() - 进度条触发位置', () => {
        // https://on.cypress.io/trigger
          //与范围输入(滑块)交互 
          //我们需要设置其值并触发 
          //事件以表示已更改 
          //在这里,我们调用jQuery的val()方法进行设置 //该值并触发'change'事件
        cy.get('.trigger-input-range')
          .invoke('val', 25)
          .trigger('change')
          .get('input[type=range]').siblings('p')
          .should('have.text', '25')
      })
    
      it('cy.scrollTo() - 滚动到指定方位', () => {
    
        // https://on.cypress.io/scrollTo
    
        // You can scroll to 9 specific positions of an element:
        //  -----------------------------------
        // | topLeft        top       topRight |
        // |                                   |
        // |                                   |
        // |                                   |
        // | left          center        right |
        // |                                   |
        // |                                   |
        // |                                   |
        // | bottomLeft   bottom   bottomRight |
        //  -----------------------------------
    
        // if you chain .scrollTo() off of cy, we will
        // scroll the entire window
        cy.scrollTo('bottom')
    
        cy.get('#scrollable-horizontal').scrollTo('right')
    
        // or you can scroll to a specific coordinate:
        // (x axis, y axis) in pixels
        cy.get('#scrollable-vertical').scrollTo(250, 250)
    
        // or you can scroll to a specific percentage
        // of the (width, height) of the element
        cy.get('#scrollable-both').scrollTo('75%', '25%')
    
        // control the easing of the scroll (default is 'swing')
        cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })
    
        // control the duration of the scroll (in ms)
        cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
      })
    })
  • 相关阅读:
    mySQL部分疑问和小结(orale)
    Java技术中的三大特性
    Java调用DB的存储过程
    Android Http异步请求,Callback
    android Handler的使用(一)
    Android之ContextMenu的使用方法以及与OptionMenu的区别(转)
    git 把文件从 版本管理中移除 andorid版本
    在GIT 中增加忽略文件夹与文件
    玩转Android---组件篇---Intent(意图)
    Android Activity和Intent机制学习笔记
  • 原文地址:https://www.cnblogs.com/wheatCatcher/p/13614416.html
Copyright © 2011-2022 走看看