一套能直接複用的 Playwright 提示詞大全

呢篇文章適合：

好多人第一次用 Playwright，最大嘅問題唔係「唔識寫 API」，而係：

所以我將常見嘅企業後台自動化場景，整理成咗一套 可以直接餵畀 AI 嘅 Playwright 提示詞模板。你只要替換幾個佔位符，就可以快速生成腳本。

呢套模板特別適合下面呢啲系統：

先約定一套統一變量，後面所有提示詞都可以重用。

{{BASE_URL}}             網站地址
{{LOGIN_PATH}}           登錄頁路徑
{{PAGE_PATH}}            業務頁面路徑
{{PAGE_NAME}}            頁面名稱
{{USERNAME_ENV}}         用戶名環境變量名
{{PASSWORD_ENV}}         密碼環境變量名
{{USERNAME_INPUT_HINT}}  用戶名輸入框提示詞
{{PASSWORD_INPUT_HINT}}  密碼輸入框提示詞
{{LOGIN_BUTTON_TEXT}}    登錄按鈕文字
{{BUTTON_TEXT}}          按鈕文字
{{KEYWORD}}              查詢關鍵字
{{SEARCH_INPUT_HINT}}    查詢輸入框提示詞
{{SEARCH_BUTTON_TEXT}}   查詢按鈕文字
{{FORM_FIELD_NAME}}      表單字段名
{{SUCCESS_TEXT}}         成功提示語
{{CREATE_BUTTON_TEXT}}   新增按鈕文字
{{DIALOG_TITLE}}         彈窗標題
{{SUBMIT_BUTTON_TEXT}}   提交按鈕文字
{{DETAIL_TARGET_TEXT}}   詳情目標文本
{{EDIT_BUTTON_TEXT}}     編輯按鈕文字
{{DELETE_BUTTON_TEXT}}   刪除按鈕文字
{{CONFIRM_BUTTON_TEXT}}  確認按鈕文字
{{UPLOAD_BUTTON_TEXT}}   上傳按鈕文字
{{EXPORT_BUTTON_TEXT}}   導出按鈕文字
{{IMPORT_BUTTON_TEXT}}   導入按鈕文字
{{MENU_TEXT}}            菜單名稱
{{ROLE_NAME}}            角色名稱
{{ERROR_TEXT}}           錯誤提示語

好多人畀 AI 嘅需求係咁樣：

幫我寫一個 Playwright 自動化測試。

呢種提示詞太虛，AI 淨係畀到你「偽代碼」。

真正高質素嘅提示詞，至少要明確：

所以你後面會見到，我嘅模板都強調幾件事：

呢個係總控版，適合你先畀 AI 生成一個「骨架腳本」。

提示詞 1：萬能母版

你現在是一個資深 Playwright 自動化測試工程師，請幫我為網站 {{BASE_URL}} 生成一個“可直接運行”的 Playwright 測試 demo，使用 JavaScript 編寫。
要求如下：
1. 如果當前目錄已經有 Playwright 項目，就複用現有配置；如果沒有，就補齊最小可運行項目結構。
2. 測試代碼寫成一個完整的 spec 文件，文件名清晰，例如 tests/{{PAGE_NAME}}.spec.js。
3. 所有關鍵步驟都加中文註釋，方便閲讀和二次修改。
4. 優先使用穩定定位方式：data-testid、getByRole、getByText、getByPlaceholder；不要優先使用容易失效的超長 CSS 路徑。
5. 增加基礎斷言：頁面標題正常、URL 正常、核心元素可見、無明顯報錯文案、主要內容區域渲染成功。
6. 如果頁面可能新開標籤頁，請兼容當前頁跳轉和 popup 兩種情況。
7. 如果網站需要登錄，請使用 .env 或 process.env 讀取賬號密碼，不要把真實密碼寫死在代碼裏。
8. 如果你無法真實訪問該網站，也請先生成“可運行模板”，把需要我替換的選擇器和文本集中標記成 TODO。
9. 最後告訴我運行命令，例如 npm test、npm run test:headed、npx playwright show-report。
10. 不要只給思路，要直接給完整代碼。
業務目標：
- 網站：{{BASE_URL}}
- 頁面：{{PAGE_NAME}}
- 核心動作：打開頁面、執行操作、檢查頁面顯示是否正常
- 需要覆蓋：登錄、查詢、表單、彈窗、結果校驗

下面係你現有模板，我順手做咗文章化整理。

提示詞 2：登入流程模板

請幫我為公司內部網站 {{BASE_URL}} 編寫一個 Playwright 登錄流程測試，使用 JavaScript，直接輸出完整可運行代碼。
登錄信息要求：
- 登錄頁：{{LOGIN_PATH}}
- 用戶名從 process.env.{{USERNAME_ENV}} 讀取
- 密碼從 process.env.{{PASSWORD_ENV}} 讀取
- 用戶名輸入框關鍵詞：{{USERNAME_INPUT_HINT}}
- 密碼輸入框關鍵詞：{{PASSWORD_INPUT_HINT}}
- 登錄按鈕文字：{{LOGIN_BUTTON_TEXT}}
測試步驟要求：
1. 打開登錄頁並等待頁面加載完成。
2. 校驗登錄頁標題、Logo、登錄表單是否正常顯示。
3. 輸入用戶名和密碼，點擊登錄按鈕。
4. 如果頁面有驗證碼、短信碼、二次確認，請在代碼裏預留 TODO 註釋，不要瞎編。
5. 登錄成功後斷言：URL 發生變化、首頁/工作台/菜單欄可見、當前用戶名或頭像可見。
6. 額外校驗頁面沒有“賬號或密碼錯誤”“系統異常”“請求失敗”等明顯錯誤提示。
7. 如果登錄成功，順便保存 storageState，方便後續複用登錄態。
8. 關鍵代碼必須加中文註釋。
9. 如果實際選擇器未知，請給我一個帶佔位符的模板版本，並把需要我替換的地方寫清楚。

提示詞 3：查詢 / 搜索 / 結果校驗模板

請幫我為網站 {{BASE_URL}} 的 {{PAGE_NAME}} 頁面編寫一個 Playwright 查詢測試，直接輸出完整可運行代碼。
頁面信息：
- 頁面地址：{{PAGE_PATH}}
- 查詢輸入框提示詞或標籤：{{SEARCH_INPUT_HINT}}
- 查詢按鈕文字：{{SEARCH_BUTTON_TEXT}}
- 查詢關鍵字：{{KEYWORD}}
測試步驟要求：
1. 進入 {{PAGE_NAME}} 頁面，檢查頁面標題、麪包屑、查詢區域是否正常顯示。
2. 在搜索框中輸入 {{KEYWORD}}，必要時再選擇下拉框、日期、狀態篩選項。
3. 點擊“{{SEARCH_BUTTON_TEXT}}”按鈕。
4. 等待 loading 消失，再校驗結果區域是否正常渲染。
5. 結果可能有兩種情況：有數據時表格/列表至少有一條記錄；無數據時空狀態文案正常顯示。兩種都要兼容。
6. 校驗結果中的關鍵列、關鍵文本、分頁、總數、無報錯提示是否正常。
7. 如有“重置”按鈕，也順便寫一個重置查詢條件並恢復默認狀態的斷言。
8. 代碼里加中文註釋，選擇器儘量穩健。

提示詞 4：表單新增 + 彈窗模板

請幫我為網站 {{BASE_URL}} 的 {{PAGE_NAME}} 頁面生成一個 Playwright 自動化腳本，場景是“點擊新增按鈕，打開彈窗/抽屜，填寫表單並提交”。
頁面信息：
- 頁面地址：{{PAGE_PATH}}
- 新增按鈕文字：{{CREATE_BUTTON_TEXT}}
- 彈窗標題：{{DIALOG_TITLE}}
- 需要填寫的字段：{{FORM_FIELD_NAME_1}}、{{FORM_FIELD_NAME_2}}、{{FORM_FIELD_NAME_3}}
- 提交按鈕文字：{{SUBMIT_BUTTON_TEXT}}
- 成功提示語：{{SUCCESS_TEXT}}
測試步驟要求：
1. 進入頁面後，先校驗列表區域和“{{CREATE_BUTTON_TEXT}}”按鈕可見。
2. 點擊新增按鈕，斷言彈窗或抽屜成功打開，標題為“{{DIALOG_TITLE}}”。
3. 填寫表單，文本框、下拉框、日期、單選框、複選框都請按常規 Playwright 寫法處理。
4. 提交前可增加必填項校驗；提交後等待成功提示“{{SUCCESS_TEXT}}”出現。
5. 斷言彈窗關閉或狀態恢復正常。
6. 回到列表頁後，校驗新建的數據出現在表格/列表中。
7. 如果頁面會彈出二次確認框，請一併處理並校驗按鈕點擊後的結果。
8. 整個腳本必須帶中文註釋，並儘量寫成我只替換字段名和按鈕名就能複用的模板。

提示詞 5：列表頁 + 詳情頁 + 返回模板

請幫我寫一個 Playwright 測試，驗證網站 {{BASE_URL}} 的 {{PAGE_NAME}} 頁面，從列表進入詳情，再返回列表的完整流程。
要求：
1. 打開 {{PAGE_PATH}} 頁面並確認列表加載完成。
2. 點擊第一條記錄或指定文本“{{DETAIL_TARGET_TEXT}}”進入詳情頁。
3. 同時兼容當前頁跳轉和新標籤頁打開兩種情況。
4. 在詳情頁校驗：標題、編號、狀態、正文區域、操作按鈕是否顯示正常。
5. 執行一個輕量交互，例如展開更多信息、打開預覽彈窗、切換標籤頁。
6. 返回列表頁後，再次確認列表仍然正常顯示，沒有白屏、報錯、空白數據。
7. 代碼直接給完整版本，包含中文註釋和必要斷言。

而家呢 5 個模板已經覆蓋咗基礎 CRUD 嘅一部分，但係企業後台真實場景遠遠唔止呢啲。

下篇，我哋會帶大家繼續學習實際應用場景下嘅提示詞模板合集，敬請期待~

連結：https://juejin.cn/post/7622964891183382528

本文係51Testing經授權轉載，轉載文章所包含嘅文字嚟自作者。如果因內容或版權等問題，請聯繫51Testing刪除。

這篇文章適合：

很多人第一次用 Playwright，最大的問題不是“不會寫 API”，而是：

所以我把常見的企業後台自動化場景，整理成了一套 可直接餵給 AI 的 Playwright 提示詞模板。你只要替換幾個佔位符，就可以快速生成腳本。

這套模板特別適合下面這些系統：

先約定一套統一變量，後面所有提示詞都能複用。

{{BASE_URL}}             網站地址
{{LOGIN_PATH}}           登錄頁路徑
{{PAGE_PATH}}            業務頁面路徑
{{PAGE_NAME}}            頁面名稱
{{USERNAME_ENV}}         用戶名環境變量名
{{PASSWORD_ENV}}         密碼環境變量名
{{USERNAME_INPUT_HINT}}  用戶名輸入框提示詞
{{PASSWORD_INPUT_HINT}}  密碼輸入框提示詞
{{LOGIN_BUTTON_TEXT}}    登錄按鈕文字
{{BUTTON_TEXT}}          按鈕文字
{{KEYWORD}}              查詢關鍵字
{{SEARCH_INPUT_HINT}}    查詢輸入框提示詞
{{SEARCH_BUTTON_TEXT}}   查詢按鈕文字
{{FORM_FIELD_NAME}}      表單字段名
{{SUCCESS_TEXT}}         成功提示語
{{CREATE_BUTTON_TEXT}}   新增按鈕文字
{{DIALOG_TITLE}}         彈窗標題
{{SUBMIT_BUTTON_TEXT}}   提交按鈕文字
{{DETAIL_TARGET_TEXT}}   詳情目標文本
{{EDIT_BUTTON_TEXT}}     編輯按鈕文字
{{DELETE_BUTTON_TEXT}}   刪除按鈕文字
{{CONFIRM_BUTTON_TEXT}}  確認按鈕文字
{{UPLOAD_BUTTON_TEXT}}   上傳按鈕文字
{{EXPORT_BUTTON_TEXT}}   導出按鈕文字
{{IMPORT_BUTTON_TEXT}}   導入按鈕文字
{{MENU_TEXT}}            菜單名稱
{{ROLE_NAME}}            角色名稱
{{ERROR_TEXT}}           錯誤提示語

很多人給 AI 的需求是這樣的：

幫我寫一個 Playwright 自動化測試。

這種提示詞太空了，AI 只能給你“偽代碼”。

真正高質量的提示詞，至少要明確：

所以你後面會看到，我的模板都強調幾件事：

這是總控版，適合你先讓 AI 生成一個“骨架腳本”。

提示詞 1：萬能母版

你現在是一個資深 Playwright 自動化測試工程師，請幫我為網站 {{BASE_URL}} 生成一個“可直接運行”的 Playwright 測試 demo，使用 JavaScript 編寫。
要求如下：
1. 如果當前目錄已經有 Playwright 項目，就複用現有配置；如果沒有，就補齊最小可運行項目結構。
2. 測試代碼寫成一個完整的 spec 文件，文件名清晰，例如 tests/{{PAGE_NAME}}.spec.js。
3. 所有關鍵步驟都加中文註釋，方便閲讀和二次修改。
4. 優先使用穩定定位方式：data-testid、getByRole、getByText、getByPlaceholder；不要優先使用容易失效的超長 CSS 路徑。
5. 增加基礎斷言：頁面標題正常、URL 正常、核心元素可見、無明顯報錯文案、主要內容區域渲染成功。
6. 如果頁面可能新開標籤頁，請兼容當前頁跳轉和 popup 兩種情況。
7. 如果網站需要登錄，請使用 .env 或 process.env 讀取賬號密碼，不要把真實密碼寫死在代碼裏。
8. 如果你無法真實訪問該網站，也請先生成“可運行模板”，把需要我替換的選擇器和文本集中標記成 TODO。
9. 最後告訴我運行命令，例如 npm test、npm run test:headed、npx playwright show-report。
10. 不要只給思路，要直接給完整代碼。
業務目標：
- 網站：{{BASE_URL}}
- 頁面：{{PAGE_NAME}}
- 核心動作：打開頁面、執行操作、檢查頁面顯示是否正常
- 需要覆蓋：登錄、查詢、表單、彈窗、結果校驗

下面是你現有模板，我順手做了文章化整理。

提示詞 2：登錄流程模板

請幫我為公司內部網站 {{BASE_URL}} 編寫一個 Playwright 登錄流程測試，使用 JavaScript，直接輸出完整可運行代碼。
登錄信息要求：
- 登錄頁：{{LOGIN_PATH}}
- 用戶名從 process.env.{{USERNAME_ENV}} 讀取
- 密碼從 process.env.{{PASSWORD_ENV}} 讀取
- 用戶名輸入框關鍵詞：{{USERNAME_INPUT_HINT}}
- 密碼輸入框關鍵詞：{{PASSWORD_INPUT_HINT}}
- 登錄按鈕文字：{{LOGIN_BUTTON_TEXT}}
測試步驟要求：
1. 打開登錄頁並等待頁面加載完成。
2. 校驗登錄頁標題、Logo、登錄表單是否正常顯示。
3. 輸入用戶名和密碼，點擊登錄按鈕。
4. 如果頁面有驗證碼、短信碼、二次確認，請在代碼裏預留 TODO 註釋，不要瞎編。
5. 登錄成功後斷言：URL 發生變化、首頁/工作台/菜單欄可見、當前用戶名或頭像可見。
6. 額外校驗頁面沒有“賬號或密碼錯誤”“系統異常”“請求失敗”等明顯錯誤提示。
7. 如果登錄成功，順便保存 storageState，方便後續複用登錄態。
8. 關鍵代碼必須加中文註釋。
9. 如果實際選擇器未知，請給我一個帶佔位符的模板版本，並把需要我替換的地方寫清楚。

提示詞 3：查詢 / 搜索 / 結果校驗模板

請幫我為網站 {{BASE_URL}} 的 {{PAGE_NAME}} 頁面編寫一個 Playwright 查詢測試，直接輸出完整可運行代碼。
頁面信息：
- 頁面地址：{{PAGE_PATH}}
- 查詢輸入框提示詞或標籤：{{SEARCH_INPUT_HINT}}
- 查詢按鈕文字：{{SEARCH_BUTTON_TEXT}}
- 查詢關鍵字：{{KEYWORD}}
測試步驟要求：
1. 進入 {{PAGE_NAME}} 頁面，檢查頁面標題、麪包屑、查詢區域是否正常顯示。
2. 在搜索框中輸入 {{KEYWORD}}，必要時再選擇下拉框、日期、狀態篩選項。
3. 點擊“{{SEARCH_BUTTON_TEXT}}”按鈕。
4. 等待 loading 消失，再校驗結果區域是否正常渲染。
5. 結果可能有兩種情況：有數據時表格/列表至少有一條記錄；無數據時空狀態文案正常顯示。兩種都要兼容。
6. 校驗結果中的關鍵列、關鍵文本、分頁、總數、無報錯提示是否正常。
7. 如有“重置”按鈕，也順便寫一個重置查詢條件並恢復默認狀態的斷言。
8. 代碼里加中文註釋，選擇器儘量穩健。

提示詞 4：表單新增 + 彈窗模板

請幫我為網站 {{BASE_URL}} 的 {{PAGE_NAME}} 頁面生成一個 Playwright 自動化腳本，場景是“點擊新增按鈕，打開彈窗/抽屜，填寫表單並提交”。
頁面信息：
- 頁面地址：{{PAGE_PATH}}
- 新增按鈕文字：{{CREATE_BUTTON_TEXT}}
- 彈窗標題：{{DIALOG_TITLE}}
- 需要填寫的字段：{{FORM_FIELD_NAME_1}}、{{FORM_FIELD_NAME_2}}、{{FORM_FIELD_NAME_3}}
- 提交按鈕文字：{{SUBMIT_BUTTON_TEXT}}
- 成功提示語：{{SUCCESS_TEXT}}
測試步驟要求：
1. 進入頁面後，先校驗列表區域和“{{CREATE_BUTTON_TEXT}}”按鈕可見。
2. 點擊新增按鈕，斷言彈窗或抽屜成功打開，標題為“{{DIALOG_TITLE}}”。
3. 填寫表單，文本框、下拉框、日期、單選框、複選框都請按常規 Playwright 寫法處理。
4. 提交前可增加必填項校驗；提交後等待成功提示“{{SUCCESS_TEXT}}”出現。
5. 斷言彈窗關閉或狀態恢復正常。
6. 回到列表頁後，校驗新建的數據出現在表格/列表中。
7. 如果頁面會彈出二次確認框，請一併處理並校驗按鈕點擊後的結果。
8. 整個腳本必須帶中文註釋，並儘量寫成我只替換字段名和按鈕名就能複用的模板。

提示詞 5：列表頁 + 詳情頁 + 返回模板

請幫我寫一個 Playwright 測試，驗證網站 {{BASE_URL}} 的 {{PAGE_NAME}} 頁面，從列表進入詳情，再返回列表的完整流程。
要求：
1. 打開 {{PAGE_PATH}} 頁面並確認列表加載完成。
2. 點擊第一條記錄或指定文本“{{DETAIL_TARGET_TEXT}}”進入詳情頁。
3. 同時兼容當前頁跳轉和新標籤頁打開兩種情況。
4. 在詳情頁校驗：標題、編號、狀態、正文區域、操作按鈕是否顯示正常。
5. 執行一個輕量交互，例如展開更多信息、打開預覽彈窗、切換標籤頁。
6. 返回列表頁後，再次確認列表仍然正常顯示，沒有白屏、報錯、空白數據。
7. 代碼直接給完整版本，包含中文註釋和必要斷言。

現在這 5 個模板已經覆蓋了基礎 CRUD 的一部分，但企業後台真實場景遠不止這些。

下篇，我們將帶領大家繼續學習實際應用場景下的提示詞模板合集，敬請期待~

連結：https://juejin.cn/post/7622964891183382528

本文為51Testing經授權轉載，轉載文章所包含的文字來源於作者。如因內容或版權等問題，請聯繫51Testing進行刪除