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('[e-mail]').should('have.value', '[e-mail]')

      // 輸入類型： 特殊字符序列
      .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 })
  })
})