系列：奇幻塔防開發實錄：用 Claude 打造一款有靈魂的塔防遊戲今日工具：Claude Code ／ Claude Cowork ／ Playwright...
前面五篇我們依序介紹了參數化測試、Global Setup 與 storageState、多角色與 worker 專屬帳號，以及 Global Teardown...
前兩篇介紹了用 setup project 在所有測試開始前先完成登入，並把登入狀態存起來，讓測試不必特別處理登入。 不過測試跑完之後，這些檔案還留在那裡；如果...
上一篇用 setup project 搭配 storageState，讓所有測試只登入一次。不過目前所有測試用的都是同一個身分：demo。 實際上一個系統通常不...
前面我們用 Fixture 處理登入，在每支測試開始前，fixture 會先幫它登入好，測試裡不用再重複寫登入步驟。不過在這個做法下，每一支測試還是各自登入了一...
上一篇設計參數化的資料表時提到，預期值要選穩定的資料：分類和品名是寫死在資料產生器裡的，所以可以放心斷言「Animals 分類一定有 Cat Nose」；但庫存...
在講 Worker 的那篇，我們為了觀察測試怎麼被分配到各個 worker，用一個 for 迴圈一次產生了「觀察 1」到「觀察 6」六支測試。當時沒有特別解釋為...
前兩篇分別讓 AI 生成測試，然後說明測試失敗時怎麼用 trace 找出失敗原因。今天是第三個緩衝日，讓我們練習實際用AI生成測試然後用 trace 找出失敗原...
上一篇讓 AI 生成測試的時候，我們提過一個原則：測試失敗時，先看 Call log 和 Trace Viewer，但錯誤訊息通常只有一兩行，例如「等了 5 秒...
在自動化測試的學習歷程中，許多人第一次嘗試使用 AI（如 Claude、ChatGPT）幫忙寫 Playwright 測試時，最常採用的方式就是直接把網址或簡單...
今天我們會來處理檔案上傳跟下載功能的測試，Orders 清單右上角有 react-admin 的 ExportButton，按下後會匯出 CSV；這是一個可以直...
在 Day 17 我們處理了下拉選單和 Dialog／Modal的測試：它們會蓋住畫面，但元素仍在原本的網頁裡。Day 18 的 iframe 則是在同一個分頁...
今天我們會說明怎麼對iframe做測試，本來的 react-admin demo 裡並沒有iframe，所以我們會先加上一個很小的iframe頁面，外層是 Re...
今天要處理下拉選單展開的選項、跳出來的對話框，這些元素有個共同點：它們的 DOM 不是放在觸發它的那顆按鈕底下，而是被 React 的 Portal 丟到 &l...
從 Day 11 到 Day 15，我們介紹了 Playwright 的 Fixture 機制與 Worker 平行化原理：從基本的 fixture 自動注入登...
上一篇我們把測試共用的層級釐清後，實作出了組合 C:只共用 Context，但每支測試各自開新的 Page。這樣既能維持只登入一次的優勢，又能保有測試之間的畫面...
上一篇我們介紹了 Worker 的運作原理：每個 Worker 都是獨立的 Node.js 程序，彼此的記憶體完全不共享；而 fullyParallel: tr...
昨天我們有簡單介紹 worker-scoped fixture，但沒有特別說明 worker 到底是什麼，今天我們就來詳細介紹 Worker 跟他的平行執行原理...
Day 11 我們用 test.extend() 打造了第一個自訂 Fixture loggedInPage，成功讓登入流程自動化。但改寫完的 CRUD 測試，...
還記得 Day 6 介紹 Page Object Model 時，我們把登入步驟都搬到 LoginPage 類別，雖然登入邏輯集中管理了，但每寫一支新測試，還是...
前面的幾天我們討論了如何抓取畫面元素、怎麼把測試包成一組，但還沒好好介紹expect有哪些用法、什麼時候該用哪一種，還有什麼時候必須要加上 await。 什麼是...
從 Day 5 到 Day 8，我們花了不少篇幅在討論「如何準確抓到畫面上的元素」。今天我們要來看看 Playwright Test 提供了哪些好用的控制項。...
Day 5 我們認識了 Playwright 的幾種基本定位方法（getByRole、getByText、getByLabel、getByTestId），也在...
經過前面 6 天的學習，今天我們會用目前學到的觀念（Playwright 基礎架構、Locator 定位策略、POM 頁面物件模式），挑戰一個貼近真實工作情境的...
在 Day 5 的測試程式中我們用 beforeEach 把重複的登入邏輯搬出測試本身，但如果我們開啟了另一個新的測試檔案，同樣的登入程式碼是不是又要再複製貼上...
Day 4 我們體驗了 Playwright 內建的 Codegen 錄製工具，看到它能在我們操作畫面的同時，自動生成 page.getByRole(...)...
前面我們手刻了一支登入測試，一行一行寫 page.goto、page.fill、page.click。除了自己手寫這些測試程式碼外，Playwright 其實有...
Day 2 我們裝好環境、寫了第一支登入的測試，程式碼裡出現了 Page 這個參數，也在 npx playwright test 執行時看到瀏覽器自動被打開。在...
今天我們要把 Playwright 安裝起來，確認環境沒問題後，就來撰寫第一支測試。 前置需求 開始之前先確認電腦有 Node.js（建議 LTS 版本，18...
這次選定的主題是 Playwright 端對端測試（E2E Testing），主要是工作上剛好碰到，而且之前因為工作忙，一直沒什麼機會把之前學得比較零散的基礎整...
蘋果章魚MichaelHo1203
budongcapy
iThome鐵人賽
看影片追技術