自動化測試

如何撰寫具彈性的測試程式 | 2024 WebConf Taiwan

如何撰寫具彈性的測試程式 | 2024 WebConf Taiwan

front end testing visual testing WebConf Taiwan AI ChatGPT Chromatic Claude Cypress Frontend Testing Guide Strategies and Practices Integration Test Jest Percy React Testing Library sharing Unit Test visual regression testing 單元測試 整合測試 自動化測試 視覺測試 · 留言


關於這本書《前端測試指南:策略與實踐》(Frontend Testing Guide: Strategies and Practices)

在前端領域,快節奏且不斷革新的開發環境下,如何能在迅速產出的同時保持高品質的程式碼成為一大挑戰,因此「測試」變得十分重要。選擇何種測試方式、如何撰寫和執行測試成為開發者必須深思的議題。缺乏測試的程式碼難以確保品質,而解決這個問題的關鍵在於建立適當的測試策略。因此想藉由這本書來分享我在前端測試領域所積累的實務經驗,希望能對大家有所啟發和幫助。

front end testing Frontend Testing Guide Strategies and Practices 前端測試指南:策略與實踐 單元測試 團隊合作 整合測試 端對端測試 自動化測試 視覺測試 AI ChatGPT Cypress DevOps End-to-End Testing GitHub Copilot Integration Test Jest Memori Mixtini Percy pre-commit pre-push React Testing Library sharing TDD team work Unit Test visual regression testing visual testing · 留言


在組織中推行單元測試 | 單元測試的藝術 第 3 版 | 閱讀筆記

「單元測試的藝術」讀書會 - 在組織中推行單元測試 (The Art of Unit Testing, 3e - Integrating unit testing into the organization) 閱讀筆記。

The Art of Unit Testing Unit Test front end testing team work 單元測試 自動化測試 團隊合作 軟技能 閱讀筆記 讀書會 · 留言


規劃測試策略 | 單元測試的藝術 第 3 版 | 閱讀筆記

「單元測試的藝術」讀書會 - 規劃測試策略 (The Art of Unit Testing, 3e - Developing a testing strategy) 閱讀筆記。

The Art of Unit Testing Unit Test front end testing front-end architecture team work 單元測試 自動化測試 團隊合作 閱讀筆記 讀書會 · 留言


隔離框架 | 單元測試的藝術 第 3 版 | 閱讀筆記

「單元測試的藝術」讀書會 - 隔離框架 (The Art of Unit Testing, 3e - Isolation Frameworks) 閱讀筆記。

The Art of Unit Testing Unit Test front end testing Jest TypeScript substitute.js 單元測試 自動化測試 閱讀筆記 讀書會 sharing · 留言


利用模擬物件進行互動測試 | 單元測試的藝術 第 3 版 | 閱讀筆記

「單元測試的藝術」讀書會 - 利用模擬物件進行互動測試 (The Art of Unit Testing, 3e - Interaction Testing Using Mock Objects) 閱讀筆記。

The Art of Unit Testing Unit Test front end testing Jest 單元測試 自動化測試 閱讀筆記 讀書會 sharing · 留言


利用 Stub 隔絕依賴 | 單元測試的藝術 第 3 版 | 閱讀筆記

在實作單元測試時,為了有效測試特定情境和條件,必須利用 stub 對給定的函式或模組進行隔絕依賴,目的是為了讓測試更加穩定,避免造成不穩定的測試結果。本文將會討論 stub 的目的、使用情境,以及如何透過不同的注入技術來隔絕依賴。

The Art of Unit Testing Unit Test front end testing Jest 單元測試 自動化測試 閱讀筆記 讀書會 sharing · 留言


你好,單元測試 | 單元測試的藝術 第 3 版 | 閱讀筆記

「單元測試的藝術」讀書會 - 你好,單元測試 (The Art of Unit Testing, 3e - A First Unit Test) 閱讀筆記。

The Art of Unit Testing Unit Test front end testing Jest React Testing Library 單元測試 自動化測試 閱讀筆記 讀書會 sharing · 留言


單元測試的基本概念 | 單元測試的藝術 第 3 版 | 閱讀筆記

「單元測試的藝術」讀書會 - 單元測試的基本概念 (The Art of Unit Testing, 3e - The Basics of Unit Testing) 閱讀筆記。

The Art of Unit Testing Unit Test Integration Test TDD front end testing Jest React Testing Library 單元測試 整合測試 自動化測試 閱讀筆記 讀書會 sharing · 留言


從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿

從零打造前端效能監控系統 | WebConf Taiwan 2023 逐字稿

Sentry Cypress Web Vitals Memori Loading Performance Rendering Performance Core Web Vitals 效能監控 Real User Monitoring GitHub Actions CI/CD Chrome DevTools End-to-End Testing Google Analytics Lighthouse Synthetic Monitoring active monitoring cypress.io passive monitoring 加載效能 效能調校 端對端測試 自動化測試 轉譯效能 sharing WebConf Taiwan 前端效能 系列文 · 留言


利用 Cypress 和 Sentry 測試前端效能

在自動化測試前端效能時,可能會考慮的解法有:(1) Lighthouse CI Action 或 web-vitals library + 丟到某個地方做資料儲存和 dashboard;另一個解法是 (2) 利用 Cypress + Sentry 來取得相關資訊並做呈現。這篇文章會針對 Cypress + Sentry 這個解法做說明,並比較兩種解法。

Sentry Cypress End-to-End Testing GitHub Actions Lighthouse Loading Performance Rendering Performance Synthetic Monitoring active monitoring Web Vitals Memori 轉譯效能 加載效能 效能監控 效能調校 CI/CD Core Web Vitals cypress.io lighthouse-cli 端對端測試 自動化測試 前端效能 系列文 · 留言


Visual Testing | MOPCON 2022 逐字稿

「Visual Testing」MOPCON 2022 逐字稿,歡迎搭配投影片與範例一同服用。

visual testing Storybook Percy MOPCON Mixtini Cypress Chromatic 自動化測試 打造高速網站,從網站指標開始!全方位提升使用者體驗與流量的關鍵 視覺測試 visual regression testing Unit Test Jest Integration Test GitHub Actions GitHub End-to-End Testing cypress.io CI/CD 端對端測試 整合測試 單元測試 趨勢科技 Trend Micro pull request sharing · 留言


Visual Testing:忽略特定元件

在動態內容的快照處理上有兩種方法,第一是事先塞入假資料,讓內容維持一致;第二是忽略這個會變動的元素區塊,本文要探討的是如何忽略特定元件。

visual testing Chromatic Storybook Mixtini 自動化測試 視覺測試 visual regression testing · 留言


Visual Testing:互動後的快照比對

若希望經過特定操作流程後,再做快照,可以嗎?

visual testing Chromatic Storybook Mixtini 自動化測試 視覺測試 visual regression testing · 留言


Visual Testing 工具比較:選誰好?

比較 Percy、Chromatic 與 jest-image-snapshot。

visual testing Chromatic Percy End-to-End Testing Storybook Cypress cypress.io visual regression testing 自動化測試 視覺測試 端對端測試 · 留言


在 Docker Container 跑 Visual Testing 之基本設定

Cypress + Docker + Chromatic ❤️

visual testing Docker Chromatic Cypress 自動化測試 視覺測試 End-to-End Testing 端對端測試 閱讀筆記 Cypress 讀書會 cypress.io visual regression testing 讀書會 · 留言


利用 Chromatic + Storybook 來做 Component-Level 的 Visual Testing

利用 Chromatic + Storybook 來做 Component-Level 的 Visual Testing。

visual testing Chromatic Storybook Percy Mixtini 自動化測試 視覺測試 CI/CD GitHub Actions 讀書會 閱讀筆記 Cypress Cypress 讀書會 visual regression testing · 留言


利用 Cypress 與 Percy 來做 Visual Testing

視覺測試 (visual testing) 是指利用工具自動檢測 UI 變更的一種測試方式。過去我們檢視 UI 的變更,常用的方法大致是 (1) 人眼 (截圖) 比對,比較本次更新與上一版或 mockup 的差異;(2) 工具 diff 由 unit test 或各種測試所產生的快照 (snapshot test)。但這兩種方式都無法很直覺很明確的在第一時間告訴我們到底改了什麼?若能產生指定頁面或元件的圖檔,並且標註更新的部份,這樣在 review 的時候,就更省時更便利了。

Percy Storybook visual testing Cypress 視覺測試 自動化測試 GitHub Actions visual regression testing CI/CD End-to-End Testing 端對端測試 讀書會 cron job cypress.io GitHub 閱讀筆記 Cypress 讀書會 · 留言


Pact:契約測試 (Contract Testing)

契約測試、消費者驅動的契約測試、實作契約測試的框架。

Pact contract testing microservice 契約測試 自動化測試 微服務 · 留言


Ch6 整合 (Integration)、效能 (Performance) 以及負載 (Load) 測試 | 可測試的 JavaScript (Testable JavaScript)

本文為「可測試的 JavaScript (Testable JavaScript)」第 6 章「整合 (Integration)、效能 (Performance) 以及負載 (Load) 測試」的閱讀筆記。

可測試的 JavaScript Testable JavaScript javascript 單元測試 自動化測試 整合測試 Cypress Lighthouse Unit Test Integration Test Chrome DevTools End-to-End Testing cypress.io 端對端測試 閱讀筆記 讀書會 · 留言


Ch4 單元測試 (Unit Tests) | 可測試的 JavaScript (Testable JavaScript)

本文為「可測試的 JavaScript (Testable JavaScript)」第 4 章「單元測試 (Unit Tests)」的閱讀筆記。

可測試的 JavaScript 單元測試 自動化測試 Testable JavaScript Unit Test javascript 閱讀筆記 讀書會 · 留言


Ch3 事件導向架構 (Event-Based Architectures) | 可測試的 JavaScript (Testable JavaScript)

本文為「可測試的 JavaScript (Testable JavaScript)」第 3 章「事件導向架構 (Event-Based Architectures)」的閱讀筆記。

可測試的 JavaScript 單元測試 自動化測試 OOP VSCode Testable JavaScript javascript Unit Test 物件導向程式設計 讀書會 閱讀筆記 · 留言


91 Unit Testing 單元測試實戰操練營 筆記 - 寫測試的正確姿勢

參加 91 Unit Testing 單元測試實戰操練營的簡單筆記。

單元測試 自動化測試 Jest Unit Test front end testing 趨勢科技 Trend Micro sharing · 留言


Ch2 複雜度(Complexity)| 可測試的 JavaScript (Testable JavaScript) 閱讀筆記

本文為「可測試的 JavaScript (Testable JavaScript)」第 2 章「複雜度(Complexity)」的閱讀筆記。

可測試的 JavaScript 單元測試 自動化測試 Testable JavaScript javascript Unit Test OOP 物件導向程式設計 VSCode 讀書會 閱讀筆記 · 留言


Ch1 可測試的 JavaScript 程式(Testable JavaScript)| 可測試的 JavaScript (Testable JavaScript) 閱讀筆記

本文為「可測試的 JavaScript (Testable JavaScript)」第 1 章「可測試的 JavaScript 程式(Testable JavaScript)」的閱讀筆記。

可測試的 JavaScript TDD BDD TWDD Agile DevOps Testable JavaScript javascript 單元測試 Unit Test 自動化測試 整合測試 Integration Test 讀書會 閱讀筆記 · 留言


整合 Jenkins 來自動做前端效能測試

本文會從基本的 Jenkins 安裝、設定開始,然後再說明如何整合 Jenkins 來自動做前端效能測試。

Jenkins CI/CD 自動化測試 吃什麼 · 留言


利用 Lighthouse 與 Puppeteer 對全站網頁做效能檢測並產生報表

本文主要是記錄如何在專案中簡易下指令來自動執行 Lighthouse 與 Puppeteer 做全站網頁的效能檢測、產生報表與其目錄。

Lighthouse Puppeteer End-to-End Testing 端對端測試 lighthouse-cli 自動化測試 效能調校 吃什麼 前端效能 系列文 · 留言


使用 Jest 對 Redux 做單元測試 - Reducer 篇

使用 Jest 對 Redux 的 reducer 做單元測試的簡單記錄。

Jest redux Unit Test 單元測試 自動化測試 · 留言


使用 Jest 對 Redux 做單元測試 - Action 篇

使用 Jest 對 Redux 的 action 做單元測試的簡單記錄。

Jest redux redux-mock-store redux-thunk Unit Test 自動化測試 單元測試 · 留言


Start your app the better way with Styled System

本文主要由此投影片「Start your app the better way with Styled System」之講稿改寫。本文會從 CSS 歷史開始談起,接著會來看過去我們在使用元件庫上遇到的問題,以及怎麼使用 Styled System 來解決這些問題。

styled-system styled-components CSS Modules CSS in JS BEM css End-to-End Testing 端對端測試 Media Query Modern Web Loading Performance Responsive Web Design react.js webpack 自動化測試 響應式網頁 加載效能 sharing · 留言


利用 Styled System 建立一個更好的 UI 元件庫!

利用 Styled System 建立一個更好的 UI 元件庫!

styled-system styled-components CSS Modules CSS in JS OOCSS BEM SMACSS css Bootstrap Critical Rendering Path End-to-End Testing 端對端測試 Loading Performance Media Query Modern Web Rendering Performance Responsive Web Design react.js webpack 加載效能 效能調校 自動化測試 轉譯效能 關鍵轉譯路徑 響應式網頁 sharing 趨勢科技 Trend Micro · 留言


前端工程師寫 Robot Framework,可以嗎?

前端工程師寫 Robot Framework,可以嗎?

Robot Framework Nightwatch WebdriverIO Selenium WebDriver End-to-End Testing 端對端測試 自動化測試 Selenium 趨勢科技 Trend Micro · 留言


The DevOps Handbook:奠定部署管線的基礎、實現快速可靠的自動化測試

「The DevOps Handbook」Ch9、10 筆記:奠定部署管線的基礎、實現快速可靠的自動化測試。

DevOps BDD TDD Unit Test End-to-End Testing 端對端測試 單元測試 自動化測試 讀書會 閱讀筆記 趨勢科技 Trend Micro · 留言


Nightwatch101:手牽手一起來學 Nightwatch!

本篇文章主要是將去年底今年初參加「2018 iT 邦幫忙鐵人賽」與後續在 VueJS 台灣 meetup 201803@五倍紅寶石所分享的文件做收納整理。

Nightwatch 自動化測試 End-to-End Testing 端對端測試 Selenium Selenium WebDriver 鐵人賽 2018鐵人賽 sharing Nightwatch101 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


2017 總回顧

這是我在 2017 年最值得聊聊的十件事 (*´∀`)~♥

年度回顧 鐵人賽 2018鐵人賽 北海道 日本 旅遊 職涯 Modern Web Nightwatch101 WorldGym End-to-End Testing Nightwatch Unit Test 單元測試 自動化測試 端對端測試 生活 · 留言


Nightwatch101 #30:總結

整理一下走到目前為止的想法。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium Selenium WebDriver Selenium IDE 鐵人賽 2018鐵人賽 Unit Test Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #29:Selenium IDE

Selenium IDE 可說是導入自動化測試的起手式。它很類似按鍵精靈,錄製好腳本後,執行腳本來自動完成文字輸入、點擊或跳頁等動作,確認執行動作皆如預期,若不符合預期狀況則停止並報錯,可協助確認 UI 功能是否正常執行,大大減低手動測試所花費的時間和精力。

Selenium IDE Selenium Nightwatch Nightwatch101 End-to-End Testing 端對端測試 鐵人賽 2018鐵人賽 自動化測試 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #28:獨立使用 ChromeDriver 跑測試

這篇要說明一個更輕巧簡便的測試方法-不經 Selenium Server 而獨立使用 Webdriver 來啟動測試的方法,以 ChromeDriver 為例。

Selenium WebDriver ChromeDriver Nightwatch Nightwatch101 Selenium End-to-End Testing 端對端測試 鐵人賽 2018鐵人賽 自動化測試 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #27:進階測試範例

綜合使用前面篇章所提到的內容-標籤、Page Objects 和客製化斷言,我們來做個範例...

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #26:客製化測試報告

由於在 nightwatch.conf.js 的 output_folder 設定了測試報告的路徑,因此在專案目錄底下可看到 reports 的資料夾,裡面的 JUnit XML 測試報告檔案即是按 group 所放置,像是這樣...

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #25:客製化斷言(Custom Assertions)

Nightwatch 允許開發者定義自己的斷言指令,擴充 `.assert` 和 `.verify` 命名空間。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #24:客製化指令(Custom Commands)

Nightwatch 允許開發者定義自己的客製化指令(Custom Commands),這對將常用的功能抽出來成為模組,很有幫助。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #23:使用 Sections 優化 Page Objects

Page Objects 預先定義一個頁面裡面的元素(element)、區塊(section)和命令(command),意即將一個網頁切分成許多個片段,然後利用物件把這些片段包裝起來使用,例如:將一個頁面區分為 header、footer 等,然後在測試程式中就用這樣的 header 或 footer 為單位操作 DOM element。

Nightwatch Nightwatch101 Selenium End-to-End Testing 端對端測試 鐵人賽 2018鐵人賽 自動化測試 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #22:Page Objects

Page Objects 預先定義一個頁面裡面的元素(Element)、區塊(Section)和命令(Command),意即將一個網頁切分成許多個片段,利用物件把這些片段包裝起來使用,例如:將一個頁面區分為 header、footer 等,然後在測試程式中就用這樣的 header 或 footer 為單位操作 DOM element。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #21:平行執行測試程式

本篇來看看 Nightwatch Test Runner 如何同時指定不同環境來跑測試、調整 Terminal Output 的顯示結果和經由 Test Workers 實現平行執行。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #20:禁跑特定測試(Disable Tests)

本篇要來聊聊禁跑特定 Test Suite 和 Test Case 的方法。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #19:依照標籤做測試(Test Tags)

Nightwatch 允許開發者使用標籤(tag)標記測試程式,在跑測試的時候可指定跑特定標籤的部份。使用標籤的好處是一個測試可有多個不同的標籤,不必受限於分類的唯一和垂直特性,相較有彈性。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #18:依照分組做測試(Test Groups)

Nightwatch 允許開發者將測試程式分組(group)測試,分組的方式就是將測試程式碼放進同一個資料夾,群組名稱即資料夾名稱。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #17:Nightwatch Test Runner

Nightwatch 提供 Command Line Test Runner,便於設定、跑測試和產生測試報告。本篇先來探討安裝方式的差異和如何針對單檔、多檔、單檔+資料夾進行測試。

Nightwatch Nightwatch101 Selenium End-to-End Testing 端對端測試 鐵人賽 2018鐵人賽 自動化測試 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #16:簡單測試範例

來個簡單範例-拿我們家新上線的功能-購物車和新版結帳頁來玩玩!

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #15:External Globals

隨著測試環境和加入功能愈來愈多元複雜,設定檔 `nightwatch.conf.js` 漸漸的就變成了一個龐然大物。大怪物來了 (☉д⊙) 來幫設定檔減肥 + 美化吧! (ノ◕ヮ◕)ノ*:・゚✧

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #14:Asynchronous Test Hooks

所有的鉤子(Test Hooks)-before[Each] 與 after[Each] method 都可以執行非同步(asynchronous)的動作。如果要執行非同步的動作,就要傳入 callback 作為第二個參數,並在最後執行這個 callback。若不呼叫這個 callback 會導致逾時錯誤(timout error)。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 單元測試 Unit Test Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #13:Test Hooks

Nightwatch 提供 before/after 與 beforeEach/afterEach 鉤子。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Chai BDD Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #12:BDD Verify

在上一篇 Assert 提到,.assert 和 .verify 的 library 基本上是做相同的事情,差別只在於斷言(assertion)失敗時的處理方式。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Chai BDD Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #11:BDD Assert

Nightwatch 斷言庫(Assertion Library)除了提供上一篇提到的 Expect 外,還有 Assert 和 Verify。在 Nightwatch 中,.assert 和 .verify 的 library 基本上是做相同的事情,差別只在於斷言失敗時的處理方式。

Nightwatch Nightwatch101 Selenium End-to-End Testing 端對端測試 鐵人賽 2018鐵人賽 自動化測試 Chai BDD Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #10:BDD Expect

Nightwatch 的 BDD Expect 是源自於 Chai 的 Expect API,並且只能用於網頁元素的比對。expect 比 assert 更有彈性和口語化,缺點是不能串起來(chain)使用。

Nightwatch Chai BDD End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 TDD Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #9:指令 Part 3

指令分為兩種-Nightwatch 提供的指令與開發者撰寫的客製化指令,以下繼續 Part 3,來聊聊與執行流程相關的指令。

Nightwatch 自動化測試 End-to-End Testing 端對端測試 Nightwatch101 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #8:指令 Part 2

指令分為兩種-Nightwatch 提供的指令與開發者撰寫的客製化指令,以下繼續 Part 2,來聊聊 Cookie、Window 和 Log 相關的指令。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #7:指令 Part 1

這篇 Part 1 先來看一些 UI 操作相關的指令,例如元素定位、設值、點擊和檢視是否存在或可見等。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 鐵人賽 2018鐵人賽 UTF-8 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #6:使用 Xpath 定位網頁元素

做 End-to-End Testing 的第一步就是抓到網頁的元素,而定位網頁元素有兩種方法「CSS Selector」和「Xpath」,在本篇使用 Xpath。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #5:使用 CSS Selector 定位網頁元素

做 End-to-End Testing 的第一步就是抓到網頁的元素,而定位網頁元素有兩種方法「CSS Selector」和「Xpath」,以下使用 CSS Selector。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #4:設定檔

Nightwatch 提供了 Command-line Test Runner,用來跑各種類型的測試,例如:指定測試環境、依群組或標籤或個別檔案、循序或平行執行等。其設定檔的預設名稱是 nightwatch.json 或 nightwatch.conf.js,如果兩者都出現,會優先選擇 nightwatch.conf.js,設定檔位置在這個專案的根目錄底下。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium Selenium WebDriver 鐵人賽 2018鐵人賽 base-64 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #3:環境建置

環境建置。

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #2:Nightwatch 與 Selenium Webdriver

介紹 Nightwatch、Selenium Webdriver 與運作原理。

Selenium WebDriver Nightwatch End-to-End Testing 端對端測試 Nightwatch101 Selenium 鐵人賽 2018鐵人賽 自動化測試 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch101 #1:使用 Nightwatch 實現 End-to-End Testing

這一系列 2018 鐵人賽「Nightwatch101:使用 Nightwatch 實現 End-to-End Testing」會有以下內容:Nightwatch 與 Selenium Webdriver、使用 CSS Selector和 Xpath 定位網頁元素、API(Commands、Expect、Assert、Verify)、Test Hooks、Nightwatch Test Runner、Page Objects、客製化指令與斷言、客製化測試報告、測試程式範例、Selenium IDE。希望大家不吝指教 :)

Nightwatch End-to-End Testing 端對端測試 自動化測試 Nightwatch101 Selenium Selenium WebDriver 鐵人賽 2018鐵人賽 Nightwatch101 2018 iT 邦幫忙鐵人賽 系列文 · 留言


Nightwatch.js

Nightwatch 是專門給網頁使用的自動化測試框架,它使用 W3C WebDriver 所提供的 API(過去稱為 Selenium WebDriver)來自動操作瀏覽器。好處是可簡化設定 CI(Continuous Integration,持續整合)的過程,自動執行 End-to-End 測試與單元測試。

Nightwatch Chai 單元測試 End-to-End Testing 端對端測試 自動化測試 Selenium Selenium WebDriver Unit Test 讀書會 · 留言


單元測試:Mocha、Chai 和 Sinon

單元測試:Mocha、Chai 和 Sinon。

Mocha Chai Sinon TDD 單元測試 BDD Unit Test 自動化測試 讀書會 · 留言


Selenium IDE

Selenium IDE 可協助確認 UI 功能是否正常執行,是導入自動化測試的起手式。它很類似按鍵精靈,錄製好腳本後,執行腳本來自動完成文字輸入、點擊或跳頁等動作,確認執行動作皆如預期,若不符合預期狀況則停止並報錯,大大減低手動測試所花費的時間和精力。

Selenium Selenium IDE 自動化測試 · 留言