Actions

//输入一个Dom元素
it('.type() - type into a DOM element', () => 
    cy.get('.action-email')
      .type('fake@email.com').should('have.value', 'fake@email.com')
      // 输入特殊字符序列
      .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
      .type('{del}{selectall}{backspace}')

      // 输入关键修饰语
      .type('{alt}{option}') //这些是一样的
      .type('{ctrl}{control}') //这些是一样的
      .type('{meta}{command}{cmd}') //这些是一样的
      .type('{shift}')

      // 延迟每个按键0.1秒
      .type('slow.typing@email.com', { delay: 100 })
      .should('have.value', 'slow.typing@email.com')

    cy.get('.action-disabled')
      // 输入之前检查忽略错误
      // 比如输入是可见的或者是禁用的
      .type('disabled error checking', { force: true })
      .should('have.value', 'disabled error checking')
  })

//聚焦
it('.focus() - focus on a DOM element', () => {
    cy.get('.action-focus').focus()
      .should('have.class', 'focus')   //聚焦后，出现了一个focus的类
      .prev().should('have.attr', 'style', 'color: orange;')//前一个元素
  })

//失焦    pre()前一个元素
it('.blur() - blur off a DOM element', () => {
    cy.get('.action-blur').type('About to blur').blur()
      .should('have.class', 'error')  //失焦后，出现一个error的类
      .prev().should('have.attr', 'style', 'color: red;') //前一个元素有红色的style
  })

//清空  
it('.clear() - clears an input or textarea element', () => {
    cy.get('.action-clear').type('Clear this text')
      .should('have.value', 'Clear this text')  //have.value有值
      .clear()
      .should('have.value', '')
  })

//提交一个表   next()下一个元素、 submit()提交表单
it('.submit() - submit a form', () => {
    cy.get('.action-form')
      .find('[type="text"]').type('HALFOFF')

    cy.get('.action-form').submit()  //表单的submit()方法。用在自己的系统，提交后，却刷新了浏览器  （page Load）,可能我们的页面写的比较复杂，所以还是用click()吧
      .next().should('contain', 'Your form has been submitted!')
  })

//Dom元素点击事件，多个位置，坐标轴位置，{ multiple: true }点击多个元素，{ force: true }点击前忽略错误
 it('.click() - click on a DOM element', () => {
    cy.get('.action-btn').click()
    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')//底右边

    cy.get('#action-canvas')
      .click(80, 75) //点击x轴80px和y轴75px
      .click(170, 75)
      .click(80, 165)
      .click(100, 185)
      .click(125, 190)
      .click(150, 185)
      .click(170, 165)

    // 点击多个元素
    cy.get('.action-labels>.label').click({ multiple: true })

    // 点击前检查忽略错误
    cy.get('.action-opacity>.btn').click({ force: true })
  })

//双击，然后被双击的那个元素就hidden了，有一个新的input类出现了
it('.dblclick() - double click on a DOM element', () => {
    //  在 'scripts.js'中有一个监听 'dblclick'事件
    cy.get('.action-div').dblclick().should('not.be.visible')
    cy.get('.action-input-hidden').should('be.visible')
  })

//右击
it('.rightclick() - right click on a DOM element', () => {
    // 在 'scripts.js'中有一个监听 'contextmenu'事件（上下文菜单：是当用户在网页上右键单击鼠标时显示的菜单,通常包含一些快捷操作,如复制、粘贴、打印等。）
    // that hides the div and shows an input on right click
    cy.get('.rightclick-action-div').rightclick().should('not.be.visible')
    cy.get('.rightclick-action-input-hidden').should('be.visible')
  })

//check  type为redio或checkbox的元素
it('.check() - check a checkbox or radio element', () => {
    //  默认情况下，check()会选中所有的
    //  继承选择checkbox或者redio,一个接着另一个（元素没有disabled的）
    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()接受一个值参数
    cy.get('.action-radios [type="radio"]')
      .check('radio1').should('be.checked')

    // .check() 接受一组值
    cy.get('.action-multiple-checkboxes [type="checkbox"]')
      .check(['checkbox1', 'checkbox2']).should('be.checked')

    //  在check之前忽略错误检查
    cy.get('.action-checkboxes [disabled]')
      .check({ force: true }).should('be.checked')

    cy.get('.action-radios [type="radio"]')
      .check('radio3', { force: true }).should('be.checked')
  })
  //【备注】uncheck()同此方法

//通过text、value属性值select；选多个值，断言选择的值invoke（val）方法，返回多元素对应的值,再调用should('deep.equal',['','',''....])断言；should('include','')包含..值
it('.select() - select an option in a <select> element', () => {
	//首先没有元素是选中的
    cy.get('.action-select')
      .should('have.value', '--Select a fruit--')
    // 1、select文本内容
    cy.get('.action-select').select('apples')
    // 断言apples值是选中的
    // 注意在html中每个值都以 "fr-"开头   （value="fr-apples"）
    cy.get('.action-select').should('have.value', 'fr-apples')
	
    cy.get('.action-select-multiple')
      .select(['apples', 'oranges', 'bananas'])
      // 当拿多个value值时, 先用invoke "val" 方法  jquery中val方法是用于返回或设置被选元素的value属性
      .invoke('val')
      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])

    // 2、select通过匹配value值
    cy.get('.action-select').select('fr-bananas')
      // 选择了之后立即断言所选择的value值是有的
      .should('have.value', 'fr-bananas')

    cy.get('.action-select-multiple')
      .select(['fr-apples', 'fr-oranges', 'fr-bananas'])
      .invoke('val')
      .should('deep.equal', ['fr-apples', 'fr-oranges', 'fr-bananas'])

    //include，断言选中的value值包含oranges
    cy.get('.action-select-multiple')
      .invoke('val').should('include', 'fr-oranges')
  })

//滚动到某个元素出现在可视范围
it('.scrollIntoView() - scroll an element into view', () => {
    // 通常所有这些按钮都是隐藏的，看不到
    // because they're not within  因为他们没有在父级可视区域，我们需要滚动才能看到他们
    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')
    // Cypress处理所需的滚动方向
    cy.get('#scroll-vertical button').scrollIntoView()
      .should('be.visible')

    cy.get('#scroll-both button')
      .should('not.be.visible')
    // Cypress之道向右下滚动
    cy.get('#scroll-both button').scrollIntoView()
      .should('be.visible')
  })

//滑块事件触发tigger()方法、invoke('val',xx)设置value的方法
it('.trigger() - trigger an event on a DOM element', () => {
    //  通过一个范围的输入交互（滑块）
    //  我们需要设置值&触发事件去通知他交互
    //  通过invoke调用val方法获取value的值，触发change事件，
    cy.get('.trigger-input-range')
      .invoke('val', 25)  //设置value为25
      .trigger('change')  //拿到滑块的值，触发change事件
      .get('input[type=range]').siblings('p') //同级别的p元素（兄弟姐妹元素）
      .should('have.text', '25')
  })

//移动窗口或元素到一个位置，可以移动到9个具体的位置
 it('cy.scrollTo() - scroll the window or element to a position', () => {
    //  -----------------------------------
    // | topLeft        top       topRight |
    // |                                   |
    // |                                   |
    // |                                   |
    // | left          center        right |
    // |                                   |
    // |                                   |
    // |                                   |
    // | bottomLeft   bottom   bottomRight |
    //  -----------------------------------
    //  .scrollTo()方法移动整个窗口
    cy.scrollTo('bottom')

    cy.get('#scrollable-horizontal').scrollTo('right')

    // 滚动到一个特定坐标（x轴（像素），y轴（像素））
    cy.get('#scrollable-vertical').scrollTo(250, 250)

    // 移动到元素一个宽或高的特定的百分比
    cy.get('#scrollable-both').scrollTo('75%', '25%')

    // 控制滚动的缓和（默认是摆动）  linear（线性的）
    cy.get('#scrollable-vertical').scrollTo('center', { easing: 'linear' })

    //  控制滚动的持续时间（用ms）
    cy.get('#scrollable-both').scrollTo('center', { duration: 2000 })
  })