微软自动化神器Playwright（一）之环境搭建及脚本录制

　　一、前言
　　半年前，偶然在视频号刷到某机构正在直播讲解Playwright框架的使用，就看了一会，感觉还不错，便被种草，就想着自己有时间也可以自己学一下，这一想着就半年多过去了。
　　读到这，你可能就去百度这东西到底是干啥用的？
　　细心的同学，可能会发现，关于Playwright基于Python语言的博文真的是一搜一大把，相对而言Java却少得可怜。
　　这不最近又看到某号主，一直在更新关于Playwright基于Python语言的文章，这又再次勾起了我的学习欲望。
　　要做就做和比人不一样的，那我就写个关于Java系列的就好了。二、Playwright是什么？
　　微软开源自动化测试工具Playwright，支持主流浏览器，包括：Chrome、Firefox、Safari等，同时支持以无头模式、有头模式运行，并提供了同步、异步的API，可以结合主流测试框架使用，并且支持浏览器端的自动化脚本录制等功能。
　　特点：跨浏览器：Playwright支持所有现代渲染引擎，包括Chromium、WebKit和Firefox；跨平台：在Windows、Linux和MacOS上进行本地或CI、无头或有头测试；跨语言：在TypeScript、JavaScript、Python、。NET、Java中使用PlaywrightAPI；测试移动网络：适用于Android和MobileSafari的GoogleChrome原生移动仿真。相同的渲染引擎适用于您的桌面和云端。
　　官网地址：
　　https：playwright。dev
　　GitHub地址：
　　https：github。commicrosoftplaywright
　　通俗的讲：就是一款主流的自动化测试工具，可以跨平台、跨语言、开源、支持分布式、拥有成熟的社区及学习文档，主要用于接口和web自动化测试。三、开发环境搭建
　　网上都是关于Python的环境好搭建及安装，各种pipinstall。。。。。。
　　我就不做重复的事了，那我们就来演示下Java的开发环境搭建就好了1、开发环境搭建
　　添加pom文件，如下所示：lt；？xmlversion1。0encodingUTF8？projectxmlnshttp：maven。apache。orgPOM4。0。0xmlns：xsihttp：www。w3。org2001XMLSchemainstancexsi：schemaLocationhttp：maven。apache。orgPOM4。0。0http：maven。apache。orgxsdmaven4。0。0。xsdmodelVersion4。0。0modelVersiongroupIdorg。examplegroupIdexamplesartifactIdversion0。1SNAPSHOTversionnamePlaywrightClientExamplesnamepropertiesproject。build。sourceEncodingUTF8project。build。sourceEncodingpropertiesdependenciesdependencygroupIdcom。microsoft。playwrightgroupIdplaywrightartifactIdversion1。25。0versiondependencydependenciesbuildpluginsplugingroupIdorg。apache。maven。pluginsgroupIdmavencompilerpluginartifactIdversion3。1versionconfigurationsource1。8sourcetarget1。8targetconfigurationpluginpluginsbuildproject
　　添加Example。java，示例代码如下：packageorg。example；importcom。microsoft。playwright。；publicclassExample｛publicstaticvoidmain（String〔〕args）｛try（PlaywrightplaywrightPlaywright。create（））｛Browserbrowserplaywright。chromium（）。launch（）；Pagepagebrowser。newPage（）；page。navigate（https：www。cnblogs。comlongronglang）；System。out。println（page。title（））；｝｝｝
　　运行这个类会下载Playwright包并安装适用于Chromium、Firefox和WebKit的浏览器二进制文件，如下所示：
　　image。png
　　image。png2、第一个程序
　　打开首页并截图，示例代码如下：packageorg。example；importcom。microsoft。playwright。；importjava。nio。file。Paths；publicclassWebKitScreenshot｛publicstaticvoidmain（String〔〕args）｛try（PlaywrightplaywrightPlaywright。create（））｛Browserbrowserplaywright。webkit（）。launch（）；Pagepagebrowser。newPage（）；page。navigate（https：www。cnblogs。comlongronglang）；page。screenshot（newPage。ScreenshotOptions（）。setPath（Paths。get（example。png）））；｝｝｝
　　运行结果：
　　image。png
　　说明：
　　默认情况下，Playwright以无头模式运行浏览器。要查看浏览器UI，需在启动浏览器时传递headlessfalse标志，关于API及具体参数部分会在后续文章中更新。四、脚本录制1、录制环境的安装
　　和很多自动化测试工具一样，Playwright也是可以录制并生成脚本的。
　　那么接下来将演示如何进行脚本的录制（我个人是不喜欢录制的），此处操作只为有需要的人。
　　由于之前做的electron桌面应用环境开发，依赖node。js运行环境，而Playwright也是完美支持node。js，那我将用node环境给大家演示。
　　确认node环境及版本：
　　nodev
　　image。png
　　安装：npminitynpmiDplaywrighttest
　　image。png2、如何录制
　　使用Playwright无需写一行代码，我们只需手动操作浏览器，它会录制我们的操作，然后自动生成代码脚本。
　　输入如下命令，开启录制
　　如下所示：npxplaywrightcodegenhttps：www。cnblogs。comlongronglang（测试的网址）
　　image。png
　　image。png
　　在playwrightinspector中选择你需要语言：
　　这里以Java为例，如下所示：
　　image。png
　　操作中会有页面相关定位提示，点击结束录制，并复制生成脚本，如下所示：
　　image。png
　　image。png
　　关于元素定位，可以用自带的验证工具验证元素定位表达式，如下图所示：
　　image。png3、生成脚本
　　生成代码如下所示：packageorg。example；importcom。microsoft。playwright。；importcom。microsoft。playwright。options。；importstaticcom。microsoft。playwright。assertions。PlaywrightAssertions。assertThat；importjava。util。；publicclassExample｛publicstaticvoidmain（String〔〕args）｛try（PlaywrightplaywrightPlaywright。create（））｛Browserbrowserplaywright。chromium（）。launch（newBrowserType。LaunchOptions（）。setHeadless（false））；BrowserContextcontextbrowser。newContext（）；OpennewpagePagepagecontext。newPage（）；Gotohttps：www。cnblogs。comlongronglangpage。navigate（https：www。cnblogs。comlongronglang）；ClickmainContenttextpython自动化测试系列教程page。locator（mainContenttextpython自动化测试系列教程）。click（）；assertThat（page）。hasURL（https：www。cnblogs。comlongronglangp16667125。html）；ClicksbTitleTextpage。locator（sbTitleText）。click（）；ClicksbTitleTextpage。locator（sbTitleText）。click（newLocator。ClickOptions（）。setButton（MouseButton。RIGHT））；ClicksbTitleTextpage。locator（sbTitleText）。click（）；Click。onOffpage。locator（。onOff）。click（）；Click。onOffpage。locator（。onOff）。click（）；｝｝｝
　　说明：
　　从上面可以看到，录制的脚本会自动带英文注释，而且是可以通过浏览器可以看到运行效果的。
　　回放脚本如下所示：将生成脚本，粘贴到IDEA中，点击运行如下：
　　20220907230447078。gif
　　这个框架执行速度有些慢，首次运行比较耗时，其他感觉还好。
　　到此关于Playwright开发环境搭建及脚本的录制已完成，有兴趣的同学可以自行尝试。五、写在最后
　　不是你加了几个技术交流群，改了个测试开发备注，就是测开了，至于会到什么程度，自己心里还没数吗？
　　给新同学的建议是，不盲目执着于测开，去直接学开发，主要是可以学到思路和处理问题的能力。
　　个人觉得，学习始终是自己的事，无关他人，做自己。
　　不管基础如何，有想改变自己的决心，就没有学不会的东西不是吗？
　　写这篇文章，纯属技痒和想学习下新技术，后期会写这系列的文章或者教程吧，感兴趣的同学可文末留言，或者加我好友一起交流学习。