昨天簡介如何安裝 cypress、將 GUI 介面跑起來，並說明各個資料夾的意義。今天要來簡介 cypress 撰寫端對端測試的方法。

抓取元素

在抓取 DOM 元素上，可以 data-cy 來表示：

• index.html

<button data-cy="submit">
  Submit
</button>

• test.cy.js

cy.get('[data-cy="submit"]')

造訪網址

需要造訪一個網址，可以使用 cy.visit()

describe('My First Test', () => {
  it('Visits ithome web', () => {
    cy.visit('https://ithelp.ithome.com.tw/2023ironman/event');
  });
});

contains

而想尋找某元素包含「什麼內容」或「tag 標籤」，可以用 cy.contains()

cy.get('.animal-list').contains('dog');

特定內容

要尋找「含有某些內容的特殊 DOM 元素」，可使用 cy.within()

cy.get('.form').within(() -> {
  // 尋找 class 為 .form 的元素內，class 為 apple-list 的元素
  cy.get('.apple-list');
})

根元素

要尋找該元素的「根元素」，可以用 cy.root()，預設的根元素是 document

cy.root().should('match', 'html');

describe/it、生命週期鉤子

cypress 同其他測試一般，也有 describe()、it() 以作為測試的範圍鏈；且也有生命週期鉤子：before、after、beforeEach、afterEach

常見測試要素

cypress 大部分的測試，用到 commmand（命令）加上 assertions（斷言），cypress 用的斷言庫是 Chai，所以可以去看我們在 Day12 所介紹到的使用方式使用。

其他常見的 command 如下：

.blur()
.clear()
.submit()
.click()
.dblclick()
.rightclick()
.check()
.uncheck()
.select()
.scrollIntoView()
.scrollTo()
.trigger()