前言 今天我們要聊聊工作中遇到的一個問題。我們需要撰寫測試來驗證前端需求的正確性(也就是UI/UX)。於是我們想，E2E測試非常適合，但是因為環境和經費種種因素...
現學現賣 上一篇學了Cypress的語法與用法直接做幾個簡單的練習吧 練習一: 簡易counter 首先我們自己寫一個簡易的頁面，用data-test 這個屬性...
經歷了上個章節的安裝，總之是先將Cypress的環境給建置起來了接下來這個章節要來探討Cypress的寫法與語法 所謂的e2e測試到底是怎麼運作起來的呢？我們來...
上個章節探討了單元測試是針對單個function、或是局部小功能的測試這一篇要來了解&學習關於E2E測試是什麼、要怎麼運行 E2E測試簡介 E2E測...
昨天提到，目前已有許多測試工具支援視覺回歸測試，今天會詳細介紹如何使用其中一種測試工具，也就是 Day20 提到的 Cypress Plugin Snapsho...
介紹完 Cypress 使用方法後，由於它真的是一個上手難度低且非常好用的端對端測試框架，今天要來介紹好用的外掛。 Cypress Real Events 鑑於...
昨天簡介如何安裝 cypress、將 GUI 介面跑起來，並說明各個資料夾的意義。今天要來簡介 cypress 撰寫端對端測試的方法。 抓取元素 在抓取 DOM...
Cypress 的 官方文件 寫得頗詳細。首先在專案中安裝 Cypress： npm install cypress --dev-save 接著，開啟它的圖形...
今天要講前端測試金字塔頂層的端對端測試（E2E test）。端對端測試與前端整合測試的差異在於: 框架的選用前端整合測試使用 Jest、Mocha.js 等...
NX 的 Next 模板在建立時已經預設有 Jest 跟 React Testing Library ，可以直接寫測試。 import { render } f...
因為這邊開發的是 Component，所以這次會用 Cypress Component Testing。 Setup 設置專案在 apps/ 底下。 E2E...
前言 專案開發後期會進入 QA 測試階段，其中免不了各種手動點擊切換頁面或迴歸測試等，每個功能都要人工進到畫面中看一遍有沒有問題，這樣不僅工作量大重複性高，且當...
此篇為番外，為選入本篇的原因為 Cypress 的功能與 End to End 測試的方式多元且複雜，此篇僅能做初步的介紹，因此放於番外作補充。 與單元測試...
前情提要 前兩天，我們開始為 Vue.js • TodoMVC 攥寫 E2E 測試，並分別在 Cypress 實戰之 Todo MVC (上) 完成了 C...
前情提要 昨天，我們為了讓大家更加了解 Cypress 的語法以及要如何攥寫 E2E 測試，所以開始規劃為 Vue.js • TodoMVC 攥寫 E2E 測...
在經過前兩天簡單的介紹 Cypress，現在我想透過一個實際的範例來讓大家更加了解 Cypress 以及到底如何攥寫 E2E 測試。 Vue3 E2E Te...
今天這篇文章主要會介紹 Cypress 的基本結構以及常見的語法，那我們馬上開始吧！ 基本結構 Cypress 的測試基本結構是由 Test Group, Te...
What's Cypress Cypress 是 Vue.js 官方推薦的一個 E2E Testing Library，也是這次 E2E Testing 主題所...
平常都用慣 TypeScript 版的 Cypress，但這兩天都用 JavaScript 在寫測試，令我有點不太習慣。 雖然 JS 版或 TS 版的差別並沒...
大家如果對於昨天的 E2E 測試如果沒有什麼問題的話，今天就來為我們的被保人表單撰寫 E2E 測試吧！ 實作開始 撰寫測試前的準備昨天有說過了，今天就不再贅...
經過這兩天的介紹，相信大家對於 Cypress 應該已經有了一定程度的理解，有沒有人已經開始用它來寫測試了呢？ 今天就讓我帶著大家用 Cypress 來為我們...
昨天跟大家初步地分享了 Cypress 怎麼安裝、 Cypress 的資料夾結構 、 Cypress Test Runner 有哪些功能、和 Cypress...
艾瑞卡
一宵三筵
Boolean Cat
Jasper
HelloKayac
ShawnWu
Peter Chen
Mia Yang
Leo
iThome鐵人賽
看影片追技術