对网页page整体和元素的操作
一、对page整体进行操作
1、打开网页
page.goto(‘url’，timeout，{waitUntil}，headless=true) #访问网址
-
url：要访问的地址
-
timeout：超时时间，默认 30 秒
-
waitUntil：等待页面加载的条件
-
’load’：等待 load 事件（页面和资源全部加载完）
-
‘domcontentloaded’：等待 DOM 内容加载完
-
’networkidle’：等待网络空闲
-
headless：false表示显示浏览器
2、刷新页面
page.reload({waitUntil:’networkidle’})#等到网络空闲，刷新完成
3、前进后退页面
page.goto(‘https://example.com’);
page.goto(‘https://playwright.dev’);
page.goBack(); // 返回 example.com
page.goForward(); // 前进到 playwright.dev
二、对page元素进行操作
1、点击操作（page.click）
page.click(’#submit’);
page.click(’#submit’, { button:‘right’ }); // 右键点击
page.dblclick(’#submit’); // 双击
可选参数：
-
button：’left’| ‘right’ | ‘middle’（默认左键）
-
clickCount：点击次数（双击时设为 2）
-
modifiers：键盘组合键（如 [‘Control’]）
2、输入文本（fill vs type）
page.fill(‘input[name=“username”]’,’test_user’);
page.type(‘input[name=“search”]’,‘playwright’, { delay: 200 });
fill(selector, value)：清空输入框并输入新值（推荐，大多数情况使用）
type(selector, text)：模拟逐字输入（带延迟，更贴近真实用户）
3、键盘操作
page.press(‘input[name=“username”]’,‘Enter’);
page.keyboard.type(‘Hello World!’);
page.keyboard.press(‘Control+A’); // 全选
page.keyboard.press(‘Backspace’); // 删除
-
press：模拟按键
-
keyboard.type：连续输入文本
-
keyboard.press：按下某个键（可带组合键）
4、鼠标操作
page.hover(’#menu’); // 悬停
page.mouse.move(100, 200); // 移动到坐标
page.mouse.click(120, 220); // 点击坐标
page.dragAndDrop(’#item1’, ‘#dropzone’); // 拖拽到目标区域
-
hover：鼠标悬停
-
mouse.move(x, y)：移动到坐标
-
mouse.click(x, y)：点击坐标
-
mouse.down / mouse.up：按下/释放鼠标键
-
dragAndDrop：拖拽元素（Playwright1.18+）
5、表单处理
5.1 输入框操作
page.fill(’#username’,‘admin’); // 清空并输入
page.type(’#search’, ‘Playwright’, {delay: 100 }); // 模拟逐字输入
5.2 下拉菜单选择
通过 value
await page.selectOption(’#country’, ‘china’);
通过标签文本
await page.selectOption(’#country’, { label: ‘United States’ });
通过 index
await page.selectOption(’#country’, { index: 2 });
5.3 复选框和单选框
勾选复选框
await page.check(’#agree’);
取消勾选
await page.uncheck(’#subscribe’);
点击单选框
await page.check(‘input[type=“radio”][value=“male”]’);
5.4 文件上传
直接上传文件
await page.setInputFiles(’#upload’,’example.png’);
上传多个文件
await page.setInputFiles(’#upload’,[‘a.png’, ‘b.png’]);
清空文件
await page.setInputFiles(’#upload’, []);
5.5 表单提交
await page.click(‘button[type=“submit”]’);//点击提交按钮进行提交
await page.press(’#form input[name=“email”]’,‘Enter’);//直接触发表单提交事件
弹窗和对话窗
Playwright 可以捕获并处理浏览器原生弹窗（alert, confirm, prompt），以及自定义模态框。
Alert 处理
page.once(‘dialog’, async dialog => {
console.log(dialog.message()); // 打印弹窗内容
await dialog.accept(); // 点击 “确定”});
page.click(’#show-alert’);
Confirm 处理
page.once(‘dialog’, async dialog => {
console.log(dialog.message());
await dialog.dismiss(); // 点击 “取消”});
await page.click(’#show-confirm’);
Prompt 处理
page.once(‘dialog’, async dialog => {
console.log(dialog.message());
await dialog.accept(‘Playwright’); // 输入内容并确认});
await page.click(’#show-prompt’);
自定义模态框
自定义模态框（如 Bootstrap / Ant Design）其实就是普通 DOM 元素，可以直接用定位 + 交互的方式关闭或输入。
await page.click(’#open-modal’);
await page.fill(’.modal input[name=“name”]’, ‘Test User’);
await page.click(’.modal button.confirm’);