介紹完 Cypress 使用方法後，由於它真的是一個上手難度低且非常好用的端對端測試框架，今天要來介紹好用的外掛。

Cypress Real Events

鑑於在使用 cypress 的 command 時，發現找不到 cy.hover() 的方法。於是，發現可以使用此套件來辦到 hover 事件。

安裝 npm install cypress-real-events --save-dev
即可使用 realHover 來辦到。

cy.get("button").realHover();

此套件還提供許多滑鼠、鍵盤原生事件，例如 realMouseUp、realPress('Tab') 等。

Cypress File Upload

一個用來在 HTML 上執行檔案上傳的套件。

安裝 npm install cypress-file-upload --save-dev
並於 cypress/support 中 import

即可執行檔案上傳

cy.get('[data-cy="file-input"]')
  .attachFile('test.json');

Cypress localStorage commands

有時，使用者會想要測試 localStorage 的存儲，便可以使用此套件。

安裝 npm install cypress-localstorage-commands --save-dev
並於 cypress/support 中 import

使用

cy.getLocalStorage(item);
cy.setLocalStorage(item, value);
cy.removeLocalStorage(item);

Cypress Plugins Snapshot

若更動到設計稿且肉眼看不出細微差異，就需要截圖比對。可以使用 Cypress Plugins Snapshot 的截圖功能。

安裝 npm install cypress-plugin-snapshots --save-dev
並於 cypress/support 中 import

即可使用

it('take a img snapshot', () => {
  cy.visit('https://test.com')
    .then(() => {
      cy.get('.main')
        .toMatchImageSnapshot();
    });
});

Cypress Axe

Cypress 亦具備 Assibility 檢視的套件。

安裝npm install cypress-axe --save-dev
並於 cypress/support 中 import

需要於每筆測試載入、造訪網址後，初始化 cy.injectAxe()
例如：

beforeEach(() => {
  cy.visit('http://localhost:8080')
  cy.injectAxe()
})

才可使用 cy.checkA11y 等功能。

it('check button confirm to A11y', () => {
  cy.get('button').click()
  cy.checkA11y()
})

Cypress Mochawesome Testing Report

在執行完測試，想要產生測試報告時，可使用此套件。
安裝 npm install cypress-mochawesome-reporter --save-dev
並於 cypress/support 中 import

即會於 npm run 完測試後，自動產生測試報告。

總結

Cypress 是個強大的端對端測試框架，尚有許多外掛在 npm 上供使用。此處僅舉幾個常用的。上述提到的 snapshot 會在之後 Visual Test 的章節做更詳細的說明；而 Cypress Axe，則與後續章節中的 Accessibility Test 相關聯；最後提到的 Testing Report 也會於後續篇章做闡述。