Part 使用 Cursor 和 Claude 與 Playwright 建立自動化測試-Python教學-PHP中文網

第 1 部分連結

第 4 部分

這是該專案的 Github 原始碼儲存庫：https://github.com/joegiglio/cursor2-kb

已經有一段時間了......

上次我們交談時，遊標似乎崩潰了，檔案結構的索引已損壞。經過 23 天的修復後，我很高興地報告，問題似乎終於解決了！使用者介面仍然很奇怪，並且在一段時間後似乎會因某種類型的記憶體洩漏而變慢，這可以透過重新啟動來修復。但至少現在它正在對正確的文件進行更改，並且我沒有面臨神秘損壞的文件索引。

在等待修復時，我注意到許多 Cursor 用戶抱怨 Cursor 和/或 Claude 的不穩定。是的，它有時會起作用，而且當它起作用時令人印象深刻，但它是一個由移動部件組成的黑盒子，在幕後不斷更新並且結果不一致。

我決定把幫助台專案放在一邊，想看看是否可以建立一個知識庫應用程式。這可能會更簡單一些 - 不需要即時更新或複雜的整合點。

我使用了我最熟悉的相同技術堆疊 - Python、Flask 和 Bootstrap 以及 SQLite 資料庫。一切都進展順利，直到我遇到了「資料庫遷移」的障礙。與前一章類似，它產生了 SQLite 不喜歡的約束程式碼，並引發了錯誤：

Exception during DB migration:
 raise ValueError("Constraint must have a name")
ValueError: Constraint must have a name

登入後複製

這對克勞德來說應該很容易修復，但它開始螺旋式上升，我最終從頭開始重建我的資料庫。我將這歸咎於我在調試flask-migrate方面缺乏經驗，但克勞德無法在不擦除資料庫並重新開始的情況下清理混亂。

Part Using Cursor and Claude to Create Automated Tests with Playwright

一切安頓下來後，我最終得到了一個功能齊全的知識庫系統，以及管理面板、暗/亮模式、搜尋（僅使用 SQL 查詢）和測試資料產生器。它是用 Quill 建構的，Quill 是一個開源文字編輯器，支援格式和圖像。

Part Using Cursor and Claude to Create Automated Tests with Playwright

我說「主要是功能性的」是因為我故意不讓身份驗證或多租戶變得複雜。我透過基本的 Flask 路由和 CRUD 操作使架構保持簡單。還沒有 API…也許我會在第 2 階段重新審視這些功能。

當我添加功能時，我一直注意到 Claude 會修復一件事，但會破壞另一件事 - 就像真正的開發人員一樣。此外，CSS 和 JavaScript 散佈在程式碼中。有時，新增文章可行，但編輯不起作用，反之亦然。有時文章格式化程式碼會到處出現，我必須請克勞德清理它。它正在變得打地鼠。

這個專案變得足夠複雜，需要測試自動化，這在上一章中進行了簡要討論。在大多數公司中，量化寬鬆的預算很少，而且大多數開發人員討厭編寫測試，所以也許人工智慧可以提供幫助？

我在 Selenium 和 Cucumber 方面擁有豐富的經驗，但已經有一段時間了。 Playwright 一直受到關注，據說對定位器和重試有更好的處理能力，所以我要求 Claude 創建一些 Playwright 測試。 VS-Code Playwright 擴充功能似乎都假設您使用的是 Javascript，而且它們沒有對 Python 的直接支持，因此我需要像動物一樣從終端機運行測試。

Part Using Cursor and Claude to Create Automated Tests with Playwright

[提示]

我想使用 Playwright 和 Python 在這個專案中新增端對端瀏覽器測試。我希望測試使用固定裝置來播種必要的數據，然後在每次測試運行結束時刪除數據。測試需要自行清理，並且不要留下測試資料。如果您可以將其配置為在執行測試時設定測試資料庫，那就更好了。請讓我知道要安裝哪些函式庫，透過查看產品的主要功能為前 10 個場景建立測試，並讓我知道如何從 Cursor 中執行這些測試。

[/提示]

第一次嘗試非常好，提供了有關如何安裝必要庫的說明。測試的文件結構似乎也很準確，甚至透過更改視口大小添加了響應能力測試。不錯…但我不喜歡它產生的最初一組測試，所以我要求它進一步完善：

[提示]

該產品尚未實現身份驗證。請不要為這些功能建立測試。相反，專注於管理功能，例如建立、編輯和刪除主題；新增、編輯和刪除文章。此外，也要專注於最終用戶功能，例如搜尋和查看文章。查看程式碼找出產品的前 10 個功能並為它們建立測試。

[/提示]

下一批測試看起來好一點，但仍然沒有管理功能。

[提示]

大多數測試看起來都不錯，但我在 @admin.html 檔案中沒有看到任何管理功能。我們需要有新增、編輯、刪除主題和新增、編輯、刪除文章的測試。

[/提示]

現在看起來它是正確的並創建了程式碼來測試以下應用程式場景：

Part Using Cursor and Claude to Create Automated Tests with Playwright

這些看起來都是很好的起點。現在讓我們來看看克勞德的執行指令是否正確。嗯，不幸的是沒有…

[提示]

我按照您的說明執行測試，但遇到了一些問題。
我打開一個新終端並運行命令“FLASK_ENV=testingflask run”，然後運行“pytesttests/e2e/”。我發現以下問題：

當我導航到主頁時，我看到的數據與之前看到的數據相同。好像沒有切換到測試資料庫。

異常：載入conftest '/Users/joe/cursor2-kb/tests/e2e/conftest.py'時出現匯入錯誤。 test/e2e/conftest.py:12：在 from models import 主題、文章 ModuleNotFoundError：沒有名為「models」的模組

[/提示]

Claude 創建了一個 models.py 文件，複製了 app.py 文件中的程式碼，我質疑為什麼......

此應用程式的初始程式碼全部在 app.py 檔案中完成，包括模型。這工作正常，但可能會給您留下一個笨拙的單文件應用程式。最佳實踐是將模型和路由與配置分開，這就是克勞德帶我去的地方，儘管它花了很長的時間：

[提示]

您提出的 models.py 檔案看起來像是複製 app.py 中的程式碼。使用 app.py 中的模型是否更有意義？

[/提示]

[回覆]

實際上，情況正好相反 - 我們應該將模型從 app.py 移到 models.py 中，以遵循關注點分離原則。這是 Flask 應用程式中的常見模式，其中：
app.py 處理應用程式配置和初始化
models.py 包含所有資料庫模型
路線通常位於單獨的藍圖檔案

[/回覆]

很公平。就這樣吧！

嗯，沒那麼快。仔細檢查後...

[提示]

我喜歡你分離 models.py 檔案的地方，但你也從 app.py 檔案中刪除了所有路由。我在任何其他文件中都沒有看到它們。他們就這樣走了…

[/提示]

現在 Claude 將所有路線從 app.py 檔案中取出，並將它們移到一個單獨的藍圖檔案中。它正在進行太多的架構更改，我希望它能夠恢復……當心那些想要重寫一切的出色的新開發人員！儘管建議的更改被認為是專業 Flask 程式碼庫的最佳實踐，但在測試到位之前我不會相信這些更改，以便我們可以驗證它們是否正常運作。

[提示]

我知道使用藍圖是專業級 Flask 程式碼的首選方法。然而，我現在不太願意進行這樣的重構。我首先嘗試進行端到端測試。然後我們可以看一下項目結構。請不要將路由移出 app.py 檔案。

[/提示]

Part Using Cursor and Claude to Create Automated Tests with Playwright

遊標嘗試恢復，但合併 UI 是一片綠色和紅色的海洋，我對這項變更感到不舒服。新策略：讓我們進行一些簡單的劇作家測試，然後逐步改進它們。也許這樣會更好…

我隱藏了建議的測試列表，因為我喜歡它的發展方向，然後關閉 Cursor Composer 視窗並啟動一個新的 Composer，我相信它會刪除以前的 Composer 的所有內容。

讓我們從一個更簡單的起點再試一次。無論如何，迭代開發通常是最好的。

[提示]

我想使用 Playwright 和 Python 在這個專案中新增端對端瀏覽器測試。請讓我知道要安裝哪些函式庫，透過查看產品的主要功能為前 10 個場景建立測試，並讓我知道如何從 Cursor 中執行這些測試。

[/提示]

這次我們遇到了類似的問題，克勞德想要測試尚不存在的功能。是時候罵克勞德了！

[提示]

我看到您正在為身份驗證功能建立測試。雖然我們有一個登入頁面，但它只是一個佔位符，並沒有實際的功能。它甚至沒有允許任何人登入的欄位。請再次檢查項目代碼並提出 Playwright 的前 10 個測試場景。

[/提示]

這導致 Claude 道歉並圍繞主頁上的搜尋功能創建了一堆測試場景。我希望不要手動提供我想要的測試，而是希望它透過查看程式碼來找到功能。但運氣不好，所以我回去了：

[提示]

這看起來更好，但過於專注於搜尋。我們需要對以下功能進行測試：搜尋、建立主題、編輯主題、刪除主題、建立文章、編輯文章、刪除文章、查看文章以及一些響應式測試，以確保一切在不同的螢幕解析度下看起來都正常。

[/提示]

我們已經開始螺旋式上升......它為更多測試創建了基本框架，但它對將存在的數據做出了太多假設。不要做任何假設。這就是為什麼最好有一個預先播種的測試資料庫，但我們最終會努力實現這一目標。現在…

[提示]

其中一些測試假設某些連結有效且某些內容存在。如果刪除文章或主題，情況可能並非如此。請透過建立所需的資料來使每個測試自包含，然後在測試完成時將其刪除。

[/提示]

所以現在克勞德又回來創造賽程了！我想如果你想做正確的事，就沒有辦法解決這個問題......

另一個問題是使用「測試主題」和「測試文章」等測試字串，如果我們執行平行測試（這是加速執行的常見方法），它們可能會發生衝突。我希望測試使用隨機數據，因此我提示：

[提示]

主題名稱、文章名稱和文章內容請使用隨機資料。新增外語字元測試也是一個好主意，以確保它們在瀏覽和搜尋過程中顯示正常。

[/提示]

Part Using Cursor and Claude to Create Automated Tests with Playwright

我有一種感覺，我們將需要更多的調整，但這看起來是一個非常合理的開始。克勞德回傳以下內容：

進行了以下更改：
使用Faker產生多種語言的隨機資料
新增針對多語言內容的特定測驗
驗證各種字元集的正確顯示
使用非拉丁字元測試搜尋功能
驗證顯示中沒有字元編碼問題
測試多種語言的內容創建
現在測試驗證您的應用程式是否已正確處理：
日文 (日本文)
中文 (中文)
韓文 (한국어)
俄語 (Русский)
以及常規英文內容
每個測試都會創建自己的隨機資料並自行清理，使測試更加可靠和獨立。

這些是創建的測試：

Part Using Cursor and Claude to Create Automated Tests with Playwright

現在運行它們。首先，我需要安裝 Claude 指示我做的 faker 庫......

我獲得了一堆不同的標誌和選項來運行測試。根據先前的經驗，所有這些說明看起來都是正確的，但我將使用Claude 創建的pytest.ini 文件，並傳遞一些用於詳細輸出、螢幕截圖和減慢測試執行的標誌，以便我可以遵循沿著視覺…

Part Using Cursor and Claude to Create Automated Tests with Playwright

現在運行pytest測試/e2e/來實際運行測試！

所有測試都因相同錯誤而失敗：

Exception during DB migration:
 raise ValueError("Constraint must have a name")
ValueError: Constraint must have a name

登入後複製

在 pytest.ini 中，base_url 設定為 http://localhost:5000，這對我來說看起來很正確。

我不明白為什麼失敗，所以我問克勞德。他做了一些小調整，然後建議我將 pytest.ini 檔案移至專案的 ROOT 目錄，並移出他最初放置該檔案的 test/e2e 目錄。我反駁了這一點，他說那裡很好。好吧…

他也建議我在測試中使用絕對 URL，而不是 INI 檔案和文字裝置中設定的 URL。錯誤的。我也反駁了這一點，他同意並修復了它。在這裡失去信心......

完成這些更改後，我再次運行測試，現在我看到瀏覽器打開並轉到基本 URL，即知識庫的主頁，但所有測試仍然失敗。我和 Claude 又進行了幾輪，看起來根頁面問題可能已經解決，但現在我們失敗了：

playwright._impl._errors.Error: Protocol error (Page.navigate): Cannot navigate to invalid URL

登入後複製

這看起來更像是定位器問題。

[提示]

現在 test_admin.py 中的所有管理測試都因以下錯誤而失敗：admin_page.fill("#topic-title", data["title"])。這不是正確的定位器。請修復。

[/提示]

Claude 修復了一項測試，但其他測試仍然因定位器錯誤而失敗。我說得更明確了：

[提示]

除了 test_create_topic 之外，@test_admin.py 中的其餘測試都因定位器錯誤而失敗。請檢查測試中的所有定位器並更正它們。

[/提示]

Claude 做了一些更改，現在我們又遇到了另一個定位器問題…

[提示]

現在所有測試都失敗了：
測試/e2e/test_admin.py::test_create_topic[chromium] - AssertionError：定位器預計可見

[/提示]

很明顯，我們會在這裡待一段時間，在克勞德進行必要的修復時，我們會不停地轉來轉去。同樣明顯和不幸的是，克勞德沒有應用程式和頁面元素的正確上下文，而我不必非常明確。僅僅要求克勞德「查看程式碼並創建測試」是不夠的。您需要非常熟悉功能和頁面結構，以便您可以繼續使用。

Claude 在使用pytest.ini 和conftest.py 設定測試架構方面很有幫助，但即便如此，它仍然需要進行一些調整才能運行基本測試，而無需立即運行失敗。

專案在前端使用 Bootstrap 以及 Javascript 確認和模式對話框。如果原始碼中有多個模式，而只有一個模式可見，這是一種常見的設計模式，那麼克勞德似乎很難處理這些。經過多次迭代並用偽代碼引導，我們最終達成了理解並通過了測試。

透過這些測試，Claude 對定位器的名稱做出了許多假設，其中大部分在原始程式碼中不存在。只有在明確告訴它查看某些文件之後它才能夠清理，但為什麼要做出假設呢？也許我一開始就沒有提供它正確的文件？我仍然不確定這一切應該如何運作。

有時它似乎可以訪問整個項目，而其他時候我需要更明確。如果它需要訪問文件，它應該詢問，而不僅僅是創建廢話代碼。請記住，每次來回都會花費您的 API 積分。

除了大量測試失敗之外，即使我在 pytest.ini 文件中傳遞標誌，我還遇到屏幕截圖未保存的問題。克勞德給了我一些排列，但沒有一個能解決問題。我查看了劇作家文檔，仍然沒有解決方案。這似乎是「應該很容易解決」的另一個問題，但你可以輕鬆地銷毀一打克勞德的請求，但很快就會一事無成。我現在將繼續使用 Claude 建議的解決方法。

在花了太多時間與Claude 進行調整之後，我現在只有兩個測試通過，第三個測試一開始是通過的，但由於測試代碼和固定代碼之間的一些衝突，最終以失敗告終。調試變得很累，我感覺我正在進行循環對話。我已經到了這樣的地步：我只是盲目地合併建議的程式碼更改並希望出現奇蹟。

在本章前面，我的目的是建立一個測試工具，用於播種和刪除測試資料以及可重複使用的固定裝置和函數，以保持資料和測試程式碼的乾淨。這些意圖早已成為泡影，現在我只想通過測試，我稍後會嘗試清理它們。如果其中任何一個聽起來很熟悉，請告訴我......

即使是看起來像啟動時最大化瀏覽器視窗這樣簡單的事情也被證明是太困難了。 Claude 嘗試使用 Python 和 Javascript，但行不通。他不知道為什麼，Stack Overflow 上的天才已經回答過這個問題好幾次了，他們的建議也不行。我的猜測是檔案之間存在一些程式碼衝突，但我對程式碼的了解還不足以立即弄清楚。 當你需要人工智慧時它在哪裡！？

我發現一些產生的測試程式碼有多個expect/assert。我相信每個測試只有一個斷言是最佳實踐，但知道這並不總是現實的情況，特別是當測試是新的並且您還不信任它們時。

我發現自己是一名“及時工程師”，試圖找出如何將事情推向正確的方向。由於我自己沒有編寫任何產品程式碼，因此我不熟悉其內部工作原理，並希望 Claude 能夠拿起它並運行它。畢竟是他寫的，不過他好像記性不太好。他給你的錢足夠讓你開始，但肯定不足以讓你問一次並收錢。

讓生活變得更輕鬆的是使用 API 來呼叫建立和刪除資料的 CRUD 函數，讓端對端測試僅測試其預期功能。如果您曾經為軟體應用程式編寫過自動化測試，那麼這個測試項目的缺點和缺少的功能可能聽起來太熟悉了。在真正開始測試產品功能之前，您通常最終必須解決產品缺點。您可能還記得在第一章中，我打算建立 API-First 產品，但很快就失控了。如果沒有 API，也許直接 SQL 呼叫對於設定和拆卸更有意義。

如果您在另一個專案中進行自動化測試，並且熟悉新專案的程式碼和頁面結構，複製/貼上/調整可能會比此處概述的 Claude Playwright 方法更快地幫助您。至少這樣你會對程式碼有一定的熟悉，並且可以有信心地進行調整。截至目前（2024 年 11 月），我發現要求 Claude 與 Playwright 一起產生端對端測試是一項痛苦的練習。

Part Using Cursor and Claude to Create Automated Tests with Playwright