本篇属于《Playwright 教程》系列，偏向新手与基础能力强化。
本篇目标：让读者第一次“写出能长期稳定运行的表单自动化脚本”。
目录
-
1. 为什么表单测试最容易踩坑 -
2. 项目准备（快速可复制的 Demo） -
3. 表单自动化的正确打开方式 -
4. 输入类操作的最佳实践 -
5. 常见错误与避坑方案 -
6. 表单校验（错误提示 / 必填项 / 交互校验） -
7. 完整可运行示例（可直接复制运行） -
8. 小结：如何写出长期稳定的表单测试
1. 为什么表单测试最容易踩坑？
表单通常包含：
-
• 输入框（input、textarea） -
• 下拉框（select、div 模拟组件） -
• 单选、多选按钮 -
• 校验提示 -
• 提交按钮（可能 disabled / loading） -
• 前端校验 + 后端校验
新手最常看到以下报错：
-
• ❌ Locator not found -
• ❌ Element is not visible -
• ❌ Element is not enabled -
• ❌ Timeout 5000ms -
• ❌ 断言文本匹配失败
本篇内容就是为了解决这些问题。
2. 环境准备：一个可以直接跑的 Demo
创建示例文件：form_demo.html
<!DOCTYPE html>
<html>
<body>
<h2>注册表单</h2>
<label>用户名：</label>
<input id="username" type="text" />
<p id="username-msg" style="color:red;display:none;">用户名至少 3 个字符</p>
<label>密码：</label>
<input id="password" type="password" />
<p id="password-msg" style="color:red;display:none;">密码至少 6 位</p>
<button id="submit" disabled>提交</button>
<script>
const username = document.querySelector("#username");
const password = document.querySelector("#password");
const submit = document.querySelector("#submit");
function validate() {
let ok = true;
if (username.value.length < 3) {
document.querySelector("#username-msg").style.display = "block";
ok = false;
} else {
document.querySelector("#username-msg").style.display = "none";
}
if (password.value.length < 6) {
document.querySelector("#password-msg").style.display = "block";
ok = false;
} else {
document.querySelector("#password-msg").style.display = "none";
}
submit.disabled = !ok;
}
username.addEventListener("input", validate);
password.addEventListener("input", validate);
submit.onclick = () => alert("提交成功！");
</script>
</body>
</html>
3. Playwright：表单自动化的正确打开方式
创建 test_form.py
from playwright.sync_api import sync_playwright, expect
def test_form_demo():
with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("file:///YOUR_PATH/form_demo.html")
# 输入用户名
page.fill("#username", "tom")
# 输入密码
page.fill("#password", "123456")
# 提交按钮变为可点击
expect(page.locator("#submit")).to_be_enabled()
page.click("#submit")
browser.close()
请将 YOUR_PATH 替换为你的 HTML 文件路径。
4. 输入类操作的最佳实践
(1) 避免 click + fill，而是直接 fill
❌ 不推荐：
page.click("#username")
page.fill("#username", "tom")
✔ 推荐：
page.fill("#username", "tom")
(2) 对于模拟输入行为，用 type
page.type("#password", "123456", delay=50)
适合测试真实输入速度导致的校验变化。
(3) clear 的正确姿势
page.locator("#username").fill("")
避免键盘删除方式导致校验触发不稳定。
5. 常见错误与避坑方案
(1) 元素可见但不可点
原因：按钮被 disabled。
expect(page.locator("#submit")).to_be_enabled()
(2) 输入过快导致校验未触发
解决：强制等待事件触发。
page.fill("#username", "tom")
page.wait_for_timeout(100) # 让校验逻辑触发
(3) 错误提示的断言方式
❌ 不推荐：
assert page.inner_text("#username-msg") == "用户名至少 3 个字符"
✔ 推荐：
expect(page.locator("#username-msg")).to_be_visible()
6. 表单校验：如何断言前端提示？
场景：输入短密码，确认提示出现。
page.fill("#password", "123")
expect(page.locator("#password-msg")).to_be_visible()
expect(page.locator("#submit")).to_be_disabled()
非常适合教学示例。
7. 完整可运行示例（可直接 Copy-Paste）
from playwright.sync_api import sync_playwright, expect
def test_form_validation():
with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
page.goto("file:///YOUR_PATH/form_demo.html")
# 1. 输入不合规内容
page.fill("#username", "ab")
page.fill("#password", "123")
expect(page.locator("#username-msg")).to_be_visible()
expect(page.locator("#password-msg")).to_be_visible()
expect(page.locator("#submit")).to_be_disabled()
# 2. 输入合规内容
page.fill("#username", "tom")
page.fill("#password", "123456")
expect(page.locator("#submit")).to_be_enabled()
browser.close()
8. 小结：如何写稳定的表单自动化测试？
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
如果觉得本教程和本公众号对你有帮助，还请 点个赞，关个注，下次更新不迷路