HoRain 云小助手个人主页⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。目录⛳️ 推荐页面导航1. 打开网页page.goto实例2. 页面刷新page.reload3. 前进 / 后退page.goBack / page.goForward4. 等待页面加载元素定位1. CSS 选择器2. XPath 选择器3. 文本内容定位4. 属性定位5. 定位策略最佳实践实例基础交互1. 点击操作page.click实例2. 输入文本fill vs type实例3. 键盘操作实例4. 鼠标操作实例完整实例模拟登录并截图实例常用 API 汇总表页面导航页面导航是最常见的操作Playwright 提供了多个 API 来打开、刷新和控制页面的跳转。1. 打开网页page.gotoawait page.goto(https://example.com);常用参数url要访问的地址timeout超时时间默认 30 秒waitUntil等待页面加载的条件load等待load事件页面和资源全部加载完domcontentloaded等待 DOM 内容加载完networkidle等待网络空闲实例await page.goto(https://example.com, { waitUntil: domcontentloaded });2. 页面刷新page.reload刷新当前页面。await page.reload({ waitUntil: networkidle });3. 前进 / 后退page.goBack/page.goForward模拟浏览器的前进、后退按钮。await page.goto(https://example.com); await page.goto(https://playwright.dev); await page.goBack(); // 返回 example.com await page.goForward(); // 前进到 playwright.dev4. 等待页面加载有时需要显式等待页面加载某个元素Playwright 提供了智能等待机制。await page.waitForLoadState(networkidle); // 等待网络空闲 await page.waitForSelector(#main-content); // 等待元素出现元素定位要与页面交互首先要定位到目标元素。Playwright 提供了多种选择器。1. CSS 选择器最常用的定位方式和前端开发一致。await page.click(#login-button); // 通过 id await page.click(.btn-primary); // 通过 class await page.click(form button); // 通过层级关系2. XPath 选择器通过 XPath 表达式定位元素。await page.click(//button[text()登录]); await page.click(//input[nameusername]);XPath 更灵活但可读性较差不推荐作为首选。3. 文本内容定位通过元素的可见文本进行定位。await page.click(text登录); await page.click(button:has-text(提交));4. 属性定位直接使用属性来选择。await page.fill(input[nameemail], testexample.com); await page.click([data-testsubmit-button]);5. 定位策略最佳实践优先使用唯一且稳定的选择器如data-testid、data-test属性避免依赖动态的 id 或 class 名使用page.getByRole、page.getByText等可读性更好的方法Playwright 5.x 推荐实例await page.getByRole(button, { name: 提交 }).click();await page.getByPlaceholder(请输入用户名).fill(admin);基础交互Playwright 支持多种与元素交互的方式涵盖点击、输入、键盘和鼠标操作。1. 点击操作page.clickawait page.click(#submit);可选参数buttonleft | right | middle默认左键clickCount点击次数双击时设为 2modifiers键盘组合键如[Control]实例await page.click(#submit, { button: right }); // 右键点击await page.dblclick(#submit); // 双击2. 输入文本fillvstypefill(selector, value)清空输入框并输入新值推荐大多数情况使用type(selector, text)模拟逐字输入带延迟更贴近真实用户实例await page.fill(input[nameusername], test_user);await page.type(input[namesearch], playwright, { delay: 200 });3. 键盘操作press模拟按键keyboard.type连续输入文本keyboard.press按下某个键可带组合键实例await page.press(input[nameusername], Enter);await page.keyboard.type(Hello World!);await page.keyboard.press(ControlA); // 全选await page.keyboard.press(Backspace); // 删除4. 鼠标操作Playwright 提供了完整的鼠标控制hover鼠标悬停mouse.move(x, y)移动到坐标mouse.click(x, y)点击坐标mouse.down / mouse.up按下/释放鼠标键dragAndDrop拖拽元素Playwright 1.18实例await page.hover(#menu); // 悬停await page.mouse.move(100, 200); // 移动到坐标await page.mouse.click(120, 220); // 点击坐标await page.dragAndDrop(#item1, #dropzone); // 拖拽到目标区域完整实例模拟登录并截图下面是一个完整的 Playwright 脚本演示了导航、定位、输入、点击等基本操作。实例const { chromium } require(playwright);(async () {// 1. 启动浏览器并创建一个新页面const browser await chromium.launch({ headless: false });const page await browser.newPage();// 2. 导航到登录页面await page.goto(https://github.com/login);console.log(当前页面标题${await page.title()});// 3. 元素定位和输入// 定位用户名输入框并输入用户名await page.locator(#login_field).fill(your_username);// 定位密码输入框并输入密码await page.locator(#password).fill(your_password);// 4. 点击登录按钮// 使用 .getByRole() 是一种更健壮的定位方式await page.getByRole(button, { name: Sign in }).click();// 5. 等待页面导航完成确保登录成功await page.waitForURL(https://github.com/);// 6. 截图保存确认登录状态await page.screenshot({ path: github_homepage.png });console.log(登录成功并已截图);// 7. 关闭浏览器await browser.close();})();运行方式在项目目录下保存代码为 github_login.js。在终端中执行 node github_login.js。常用 API 汇总表分类方法 / 属性说明页面导航page.goto(url[, options])打开页面page.reload([options])刷新页面page.goBack([options])后退page.goForward([options])前进page.waitForLoadState([state])等待页面加载状态元素定位page.locator(selector)通用定位器page.getByRole(role, options)根据角色定位page.getByText(text)根据文本定位page.getByPlaceholder(text)根据 placeholder 定位page.getByLabel(text)根据 label 定位基础交互page.click(selector[, options])点击元素page.dblclick(selector)双击page.fill(selector, value)输入文本清空后填入page.type(selector, text[, options])模拟逐字输入page.press(selector, key)在元素上按键page.keyboard.type(text)键盘输入page.keyboard.press(key)键盘按键含组合键page.hover(selector)悬停page.mouse.move(x, y)移动鼠标page.mouse.click(x, y[, options])坐标点击page.dragAndDrop(src, dest)拖拽元素❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧