01、简介软开源自动化测试工具Playwright支持主流浏览器包括Chrome、Firefox、Safari 等同时支持以无头模式、有头模式运行并提供了同步、异步的 API可以结合主流测试框架使用并且支持浏览器端的自动化脚本录制等功能。特点· 跨浏览器Playwright 支持所有现代渲染引擎包括Chromium、WebKit 和 Firefox· 跨平台在 Windows、Linux 和 MacOS 上进行本地或 CI、无头或有头测试;· 跨语言在 TypeScript、JavaScript、Python、.NET、Java 中使用Playwright API;· 测试移动网络适用于 Android 和 Mobile Safari 的 Google Chrome 原生移动仿真。相同的渲染引擎适用于您的桌面和云端。通俗的讲 就是一款主流的自动化测试工具可以跨平台、跨语言、开源、支持分布式、拥有成熟的社区及学习文档主要用于接口和web自动化测试。02、安装 1.Java 开发环境搭建首先需要明确的是Java环境是使用maven管理项目的所以我们只需用在项目中找到对应的pom文件在其中添加如下内容dependencygroupIdcom.microsoft.playwright/groupIdartifactIdplaywright/artifactIdversion1.25.0/version/dependency就可以自动导入playwright。Ps因为maven的中央仓库是外网地址下载很慢需耐心等待或者在修改镜像站改为国内镜像。添加demo.java内容如下package org.example;import com.microsoft.playwright.*;publicclassExample{publicstaticvoidmain(String[] args){try (Playwright playwright Playwright.create()) {Browser browser playwright.chromium().launch();Page page browser.newPage(); page.navigate(https://www.cnblogs.com/longronglang); System.out.println(page.title());}}}运行这个类之后会下载下载 Playwright 包并安装适用于 Chromium、Firefox 和 WebKit 的浏览器二进制文件如下所示 2.Python开发环境搭建网上教程很多此处不做过多说明1. 安装Playwright依赖库Playwright支持Async\Await语法故需要Python3.7pip install playwright2. 安装Chromium、Firefox、WebKit等浏览器的驱动文件内置浏览器python -m playwright install03、脚本录制此章主要是介绍如何录制脚本提供给需要使用录制屏幕的人若是不喜欢觉得自己手写更方便的同学可以跳过此章。 1.录制环境安装如同常见的自动化测试工具一样playwright同样支持屏幕录制并生成脚本。因为录屏时需要node环境所以请提前安装。不会的同学请自行度娘本文不做详述。确认node环境及版本node -v安装npm init -ynpm i -D playwright/test2.录制录制是不需要写代码的只需要启动浏览器playwright就会帮我们生成脚本代码。输入如下命令即可启动开启录制模式npx playwright codegen https://www.baidu.com开启录屏模式Npx playwright open --viewport-size 19201080 https://www.baidu.comPs: 上文中的url 是我们需要录制的网站地址请根据实际使用情况自行配置。同样playwright是支持多语言的我们可以在录制界面随意切换自己需要的语言本文以Java为例其余不做演示。接下来我们只需要在浏览器中执行相关操作playwright就会把我们所有的操作记录下来。下图中为在首页的输入框中输入playwright并查询。当操作完成之后我们点击playwright的停止和复制就可以得到录制好的脚本我们把复制好的脚本粘贴到编辑器中点击运行该脚本通过运行后就证明我们录制的脚本没有问题可以保存。如果有则通过调整代码或者推倒重新录制即可解决。至此录制环境安装和脚本录制完成。可以到我的个人号annasea0928即可加入领取【转行、入门、提升、需要的各种干货资料】内含AI测试、 车载测试、AI大模型开发、银行测试、游戏测试、数据分析、AIGC…3.调试如图是playwright inspectior我们已经和它见过一次面了大家应该也不陌生。接下来详细的为大家介绍一下它它叫playwright inspectior是playwright框架自带的GUI工具可以帮助我们调试脚本3.1 如何启动playwright inspectior在脚本中添加page.pause()方法即可启动.Ps: 其他方法本文不做推荐后期请自行研究。3.2. 界面介绍1工具栏介绍2元素栏介绍如图所示当我们不确定页面某个元素位置怎么获取时可点击检测器然后在页面上点击该元素即可在输入框中展示该元素。也可以配合开发者小工具F12检测你的元素否正确。3.3. 如何调试当脚本出现问题之后我们就可以使用playwright inspectior做调试第一步在你的脚本代码中添加page.pause()方法运行脚本。第二步等待playwright inspectior成功启动之后我们就能使用工具栏 播放、停止、逐步播放来确定问题所在第三步当确定时元素位置错误我们就能使用元素检查器来确定正确的元素位置。04、常用方法介绍 1.创建浏览器对象.chromium().launch()方法就是指创建一个谷歌浏览器同样创建火狐就是.firefox().launch().setHeadless(false)方法是指在创建浏览器的时候选择无头浏览器true还是带头浏览器false。无头浏览器后台运行不在显示器显示脚本操作有头浏览器在显示器上展示脚本所有操作 2.创建浏览器上下文浏览器上下文对象是浏览器实例中一个类似于隐身模式的会话简单说就是该上下文资源是完全独立的与其他的上下文互不干扰所以在自动化测试中可以对每一个测试用例都单独开一个浏览器上下文。这对于多用户多场景的测试非常有用。 3.创建页面page就是浏览器中的标签页一个page对象就可以当前页面内容交互 4.常见页面操作事件这部分主要演示的常见页面操作例如文本输入、点击、键盘键入、上传文件、聚焦等等1、输入操作语法Locator.fill(value)使用场景文本框、日期/时间、日历控件等输入框page.locator(#kw).fill(playwright);2、点击操作语法Locator.click()适用场景单选框、复选框、按钮控件、常见可点击控件等等page.locator(#kw).click();3、单选框及复选框操作语法Locator.setChecked(checked)适用场景单选框、复选框//单选款 (选中已选中状态下无效)page.locator(.Volvo).setChecked(true);page.locator(.Volvo).check();System.out.println(page.locator(.Volvo).isChecked());//复选框选中已选中状态下无效page.locator(#checkbox [typecheckbox]:nth-child(7)).check();page.locator(#checkbox [typecheckbox]:nth-child(7)).setChecked(true);4、下拉控件操作语法Locator.selectOption(values[, options])适用场景下拉框操作//通过value值选择page.locator([nameselect]).selectOption(opel);//通过可见文本选择page.locator([nameselect]).selectOption(new SelectOption().setLabel(Audi));5、鼠标事件5、鼠标事件语法详见案例适用场景常见鼠标点击事件//常规单击page.locator(#mouse2).click();//双击page.locator(#mouse3).dblclick();//右键单击page.locator(#mouse5).click(new Locator.ClickOptions().setButton(MouseButton.RIGHT));//按住Shift键并单击page.locator(#mouse2).click(new Locator.ClickOptions().setModifiers(Arrays.asList(KeyboardModifier.SHIFT)));//悬停在元素上page.locator(#mouse1).hover();//单击左上角page.locator(#mouse1).click(new Locator.ClickOptions().setPosition(0, 0));//强制点击page.locator(#mouse2).click(new Locator.ClickOptions().setForce(true));//调度点击事件来触发点击page.locator(#mouse2).dispatchEvent(click);6、模拟键盘输入字符操作语法Locator.type(value)使用场景模拟键盘输入字符大多数时候Page.fill()可以满足要求。如不能输入时可以考虑键入字符操作。page.locator(#user).type(playwright);7、单元素键盘事件操作语法Locator.press(键盘事件)使用场景定位元素并产生单个键盘事件//模拟CtrlA 全选操作page.locator(#user).press(ControlA);//模拟回车操作 跳转到百度页面page.locator(.baidu).press(Enter);8、上传文件语法Locator.setInputFiles()使用场景上传一个或多个文件//上传一个文件page.locator(#load).setInputFiles(Paths.get(demo.md));// 上传多个文件page.locator(#load).setInputFiles(new Path[]{Paths.get(pom.xml), Paths.get(demo.md)});9、拖拽操作语法Locator.dragTo()使用场景常见元素拖动操作// 拖拽元素page.locator(#A).dragTo(page.locator(.container ul:nth-of-type(2)));10、悬浮操作语法Locator.hover()使用场景常见元素悬浮操作//悬浮page.locator(#action).hover();