上回我們安裝了Cypress相關的套件，並且用Cypress開啟了我們要測試的網頁，今天我們就先來初步的了解基本的語法。

結構

首先，我們先來看看上回的範例語法，如下：

describe('empty spec', () => {
  it('passes', () => {
    cy.visit('https://ithelp.ithome.com.tw/')
  })
})

describe在最外層，裡面有一層it，最後執行cy.visit，基本結構列表如下：

• describe (測試內容)
• context (測試情境/分類)
• it (階段)

我們嘗試將各部分的敘述文字改寫，語法如下：

describe('我們的Cypress測試腳本', () => {
  context('首頁測試', () => {
    it('測試Header', () => {
      cy.visit('https://ithelp.ithome.com.tw/')
    })
  })
})

執行之後我們可以看到左方列表會幫我們把各個測試內容及階段都列出來，如下圖所示：

生命週期

在測試中常會遇到需要用到生命週期的內容，例如，我可能需要在每一個測試執行前後做某件事情，Cypress基本生命週期列表如下：

• before (運行測試前只會執行一次)
• beforeEach (運行每個測試前都會執行一次)
• after (運行測試後只會執行一次)
• afterEach (運行每個測試後都會執行一次)

常用命令

接著我整理出了一些比較常用的命令，如下：

• cy.visit：照訪網站
• cy.get：取得元件
• cy.type：填入資料
• cy.should：驗證資料
• cy.click：點擊物件

其他常用命令

• .blur()：使聚焦的 DOM 元素模糊。
• .focus()：專注於 DOM 元素。
• .clear()：清除輸入或文本區域的值。
• .check()：選中復選框或收音機。
• .uncheck()：取消選中復選框。
• .select()：在一個中選擇一個。
• .dblclick()：雙擊一個 DOM 元素。
• .rightclick()：右鍵單擊 DOM 元素。

以上命令就足夠我們做一些基本的Cypress測試腳本，後續我們就來看看如何使用這些命令做測試。

更多小知識，我們下次見~~