Cypress系列-編寫第一個用例

Cypress環境搭建

Cypress系列-使用yarn指令搭建cypress自動化測試環境

Cypress系列-使用npm指令搭建cypress環境

編寫第一個測試腳本

在cypress的項目目錄下，在integration檔案夾下建立一個first_test_demo.js檔案，寫入如下内容：

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
  })
})
           

然後在指令行視窗執行npx cypress open指令啟動cypress,在彈出的視窗中點選自己編寫的測試腳本檔案，運作後結果如下：

腳本執行結果：

接下來再複制下面的腳本，測試一下執行失敗的場景：

describe('My First Test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(false)
  })
})
           

将上面的腳本追加到之前的腳本後面，執行腳本的報告如下：

編寫第一個打開網站的腳本

可以使用以下的腳本去進行操作：

cy.visit('url')  #打開網址
cy.contains('content').click() #查找元素，然後進行點選
           

describe('第一個打開網站的case', () => {
    it('finds the content "type"', () => {
      // 打開網址
      cy.visit('https://example.cypress.io')
      
      // 查找頁面包含type的元素
      cy.contains('type').click()


      // 檢查目前頁面url是否包含 '/commands/actions'
      cy.url().should('include', '/commands/actions')


      // 擷取一個輸入框，然後輸入内容，并且校驗内容是否更新
      cy.get('.action-email')
        .type('[email protected]')
        .should('have.value', '[email protected]')
    })
  })