End-to-End Testing

從零打造前端效能監控系統 | 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 工具比較:選誰好?

比較 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 讀書會 · 留言


利用 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 讀書會 · 留言


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 端對端測試 閱讀筆記 讀書會 · 留言


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

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

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


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 讀書會 · 留言