介紹
Cypress 是一款 e2e 測試工具。每當我們寫好一個組件或者一個頁面之後，我們會想對整體做一個測試。
在不使用工具的情況下，我們會開啓 browser，然後做一系列點擊、滾動、填 form 等等交互，然後觀察看看是否全部運行正常，這就是 e2e 測試。
而藉助 Cypress，我們可以把這套測試流程寫成代碼封裝起來。讓它變成自動化測試。若以後代碼修改了，我們就不需要人工測試（費勁）。
參考
YouTube – Cypress in a Nutshell
Cypress 環境
Cypress 的環境是獨立於我們程序的。我們甚至可以用 Cypress 測試別人的程序，比如測試 google.com。
Cypress 基於 Node.js，只要 Node.js 就可以了，不需要 Webpack、Vite 之類的。
當然我們也可以把 Cypress 和我們的程序放到一塊。它們也不衝突。
Get Started
create project
創建一個項目。這裏我用 Vite TypeScript。你可以用其它的，Cypress 只要有 Node.js 就可以了。
寫一個簡單的頁面
.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form autocomplete="off"> <input name="firstName" placeholder="First Name" required> <input name="lastName" placeholder="Last Name"> <button>Submit</button> <p class="thank-you">Thank you! We have received your enquiry.</p> </form> <script type="module" src="./home.ts"></script> </body> </html>
.scss
@use '../module/reset'; body { height: 100vh; display: flex; justify-content: center; align-items: center; form { min-width: 320px; display: flex; flex-direction: column; gap: 16px; input { border-radius: 4px; border: 1px solid black; padding: 16px; } button { border-radius: 4px; background-color: pink; color: red; padding: 20px; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; } .thank-you { line-height: 1.5; &:not(.shown) { display: none; } } } }
.ts
import './home.scss'; document.querySelector('form')!.addEventListener('submit', e => { e.preventDefault(); document.querySelector('.thank-you')!.classList.add('shown'); });
運行
yarn run vite
效果
install cypress
yarn add cypress --dev
添加 cypress 到 tsconfig.json
"compilerOptions": { "types": [ "cypress" ] },
如果是 vite 的話，inclde 也需要添加 cypress folder
運行
yarn run cypress open
它會打開一個 App
進入 E2E Testing。
for 第一次，它會創建一些 folder and file
folder and file
選一個 browser 做測試
創建第一個 test file
文件的位置
write test
describe('test form', () => {
it('common use', () => {
cy.visit('https://192.168.1.152:4200/src/home/home.html'); // 訪問我們的程序頁面
cy.get('.thank-you').should('not.be.visible'); // 檢查 thank you message 必須是 hidden
cy.get('input[name="firstName"]').type('Derrick'); // 查找 input firstName 輸入 'Derrick'
cy.get('input[name="lastName"]').type('Yam');
cy.get('button').click(); // 點擊 submit
cy.get('.thank-you').should('be.visible'); // 檢查 thank you message 必須是 shown
});
});
Cypress 的測試代碼一般上都是 UI 操作。然後檢查 UI 的變化。當然它也可以發 request 檢查資料是否輸入到 database 等等。
反正人怎麼 test 它就怎麼 test 就對了啦。
測試結果
它會一行一行跑，去操作 UI。並且檢查 UI display 是否正確。
注: Cypress 的 event 都是模擬的，比如 click 它是通過 JavaScript 觸發的。有一個插件 cypress-real-events 可以實現 real click 和 keyboard tab。