《最新出炉》系列入门篇-Python+Playwright自动化测试-40-录制生成脚本

一体娱人 發表於 2024-4-24 09:59:00

《最新出炉》系列入门篇-Python+Playwright自动化测试-40-录制生成脚本

<h3>1.简介</h3>
各种自动化框架都会有脚本录制功能， playwright这么牛叉当然也不例外。很早之前的selenium、Jmeter工具，发展到每种浏览器都有对应的录制插件。今天我们就来看下微软自动化框架playwright是如何录制脚本的。很多小伙伴或者童鞋们会觉得奇怪，怎么现在才将录制生成脚本啊，要是早点讲解和分享，我还费什么劲，揪头发写代码啊。宏哥这里说一下：这么做的目的就是为了录制生成脚本打基础的。要不然开始直接上手就录制了，就算生成脚本你也不知道什么意思，更不用说脚本中有错误需要你调试修改脚本了。playwright 可以支持自动录制生成脚本，也就是说只需要在页面上点点点，就可以自动生成对应的脚本了。
<h3>2.启动脚本自动录制</h3>
1.在CMD命令行中，使用如下命令，打开自动录制功能：
<div class="cnblogs_code">
<pre>playwright codegen</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116134219714-545213584.png" alt="" loading="lazy">
2.执行该命令后，程序会自动打开两个窗口，一个是浏览器窗口，您可以在其中与要测试的网站进行交互，另一个是 Playwright Inspector 窗口，您可以在其中记录测试、复制测试、清除测试以及更改测试语言。随着我们在浏览器窗口中进行手动操作，在Playwright Inspector界面中会自动生成手动操作对应的自动化代码。如下图所示：
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116135202498-441417978.png" alt="" loading="lazy">
3.在Playwright Inspector界面的Target选项中，可以切换编程语言：Python、Java、Node.js、.NET C#。如下图所示：
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116135319108-2139852955.png" alt="" loading="lazy">
4.在浏览器界面中，当把鼠标放置在某个区域上，会自动提示出定位该位置的选择器代码，使用起来非常方便。如下图所示：
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116135507279-2045833690.png" alt="" loading="lazy">
<h3>3.关闭脚本自动录制</h3>
<h4>3.1方法一</h4>
录制完成后，手动关掉浏览器即可。
<h4>3.2方法二</h4>
在CMD命令行中，使用快捷键Ctrl+C，然后输入Y，关闭自动录制功能，如下图所示：
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116140658518-314581074.png" alt="" loading="lazy">
<h3>4.自动保存录制脚本到本地文件</h3>
如果直接使用“playwright codegen”命令启动脚本录制，虽然在录制的过程中会自动生成脚本，但关掉浏览器后，生成的脚本也被自动关掉了。这样就再也找不回来了，白白辛苦半天。
如果想将生成的脚本自动保存在文件中，可以使用如下命令启动脚本录制：
<div class="cnblogs_code">
<pre>playwright codegen -o 本地文件名</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116141146015-897439966.png" alt="" loading="lazy">
使用“-o”命令指定一个本地文件，在脚本录制完成后，自动生成的脚本会保存在该文件中。
<h3>5.启动浏览器时，自动打开指定页面</h3>
如果未指定访问的页面时，录制命令自动打开一个空白页面。但我们可以使用如下命令，让浏览器在启动后，自动打开一个指定页面。
<div class="cnblogs_code">
<pre>playwright codegen 指定打开的网址 -o script.py</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116141312401-67428130.png" alt="" loading="lazy">
保存到本地的文件：
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116150733051-1827553142.png" alt="" loading="lazy">
<h3>6.项目实战</h3>
<h4>6.1同步生成脚本</h4>
宏哥这里以百度搜索“北京-宏哥”为例。一个完整的搜索流程代码生成如下：
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116150415585-375846183.png" alt="" loading="lazy">
参开代码：
<div class="cnblogs_code">
<pre>from playwright.sync_api import Playwright, sync_playwright, expect

def run(playwright: Playwright) -> None:
browser = playwright.chromium.launch(headless=False)
context = browser.new_context()
page = context.new_page()
page.goto("https://www.baidu.com/")
page.locator("#kw").click()
page.locator("#kw").fill("北京-宏哥")
page.get_by_role("button", name="百度一下").click()

# ---------------------
 context.close()
browser.close()

with sync_playwright() as playwright:
run(playwright)</pre>
</div>
<h4>6.2异步生成脚本</h4>
1.启动自动录制脚本。
2.在Target切换到异步，如下图所示：
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116144124630-2102731080.png" alt="" loading="lazy">
3.开始录制：一个完整的搜索流程代码生成如下：
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116144412766-200160661.png" alt="" loading="lazy">
参开代码：
<div class="cnblogs_code">
<pre>import asyncio

from playwright.async_api import Playwright, async_playwright, expect

async def run(playwright: Playwright) -> None:
browser = await playwright.chromium.launch(headless=False)
context = await browser.new_context()
page = await context.new_page()
await page.goto("https://www.baidu.com/")
await page.locator("#kw").click()
await page.locator("#kw").fill("北京-宏哥")
await page.get_by_role("button", name="百度一下").click()

# ---------------------
 await context.close()
await browser.close()

async def main() -> None:
async with async_playwright() as playwright:
await run(playwright)

asyncio.run(main())</pre>
</div>
<h4>6.3pytest框架生成脚本</h4>
如果你是写自动化测试用例，还能自动生成 pytest 框架的代码，太牛叉了。。。
1.启动自动录制脚本。
2.在Target切换到Pytest，如下图所示：
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116144618154-1549880842.png" alt="" loading="lazy">
3.开始录制：一个完整的搜索流程代码生成如下：
<img src="https://img2023.cnblogs.com/blog/1232840/202311/1232840-20231116144753261-1599084156.png" alt="" loading="lazy">
 参开代码：
<div class="cnblogs_code">
<pre>from playwright.sync_api import Page, expect

def test_example(page: Page) -> None:
page.goto("https://www.baidu.com/")
page.locator("#kw").click()
page.locator("#kw").fill("北京-宏哥")
page.get_by_role("button", name="百度一下").click()</pre>
</div>
<h3> 7.扩展</h3>
<h4 id="录制相关命令操作">7.1录制相关命令操作</h4>
playwright还有很多录制的命令操作，有兴趣的可以自己试一下。相关命令参数如下：
1.codegen在浏览器中运行并执行操作
<div class="cnblogs_code">
<pre>playwright codegen playwright.dev</pre>
</div>
2.Playwright 打开一个浏览器窗口，其视口设置为特定的宽度和高度，并且没有响应，因为需要在相同条件下运行测试。 使用该--viewport选项生成具有不同视口大小的测试。
<div class="cnblogs_code">
<pre>playwright codegen --viewport-size=800,600 playwright.dev</pre>
</div>
3.<code>--device</code> 使用设置视口大小和用户代理等选项模拟移动设备时记录脚本和测试。 模拟移动设备iPhone11，注意：device的值必须用双引号，并且区分大小写
<div class="cnblogs_code">
<pre>playwright codegen --device="iPhone 11" playwright.dev </pre>
</div>
4.模拟配色
<div class="cnblogs_code">
<pre>playwright codegen --color-scheme=dark playwright.dev</pre>
</div>
5.模拟地理位置、语言和时区
<div class="cnblogs_code">
<pre>playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com</pre>
</div>
6.保留经过身份验证的状态 运行codegen以在会话结束时--save-storage保存cookie和localStorage 。这对于单独记录身份验证步骤并在稍后的测试中重用它很有用。
执行身份验证并关闭浏览器后，auth.json将包含存储状态。
<div class="cnblogs_code">
<pre>playwright codegen --save-storage=auth.json</pre>
</div>
运行--load-storage以消耗先前加载的存储。这样，所有的cookie和localStorage都将被恢复，使大多数网络应用程序进入身份验证状态。
<div class="cnblogs_code">
<pre>playwright open --load-storage=auth.json my.web.app
playwright codegen --load-storage=auth.json my.web.app
# Perform actions in authenticated state.</pre>
</div>
<h4 id="pagepause-断点调试">7.2page.pause() 断点调试</h4>
如果您想在某些非标准设置中使用 codegen（例如，使用browser_context.route()），可以调用page.pause()，这将打开一个带有 codegen 控件的单独窗口。这个相比大家在宏哥之前注释的代码里看到过，主要是用来调试代码的。
<div class="cnblogs_code">
<pre>from playwright.sync_api import sync_playwright

with sync_playwright() as p:
# Make sure to run headed.
browser = p.chromium.launch(headless=False)

# Setup context however you like.
context = browser.new_context() # Pass any options
context.route('**/*', lambda route: route.continue_())

# Pause the page, and start recording manually.
page = context.new_page()
page.pause()</pre>
</div>
<h3>8.小结</h3>
今天这一篇主要讲解和分享了录制的启动、关闭和完整录制流程以及其他命令的录制。 好了，时间不早了，关于playwright的录制先介绍讲解到这里，感谢您耐心的阅读！！！

</div>
<div id="MySignature" role="contentinfo">
<div id="MySignature" style="display: block">
<div style="font-size: 13px; border: 1px dashed rgb(45, 161, 45); padding: 10px 15px; background-color: rgb(248, 248, 248)">
<label style="font-weight: bold">
    为了方便大家在移动端也能看到我分享的博文，现已注册个人微信公众号，扫描左下方二维码即可，欢迎大家关注，提前解锁更多测试干货！有时间会及时分享相关技术博文。
</label>
 
<label style="font-weight: bold">
    为了方便大家互动讨论相关技术问题，刚刚建立了咱们的专门的微信群交流互动群，群内会分享交流测试领域前沿知识。请您扫描中间的微信二维码进群
</label>
 
<label style="font-weight: bold">
    为了方便大家互动讨论相关技术问题，现已组建专门的微信群，由于微信群满100，请您扫描右下方宏哥个人微信二维码拉你进群
<label style="font-weight: bold; color: red; font-size: 15px">
（请务必备注：已关注公众号进群）平时上班忙（和你一样），所以加好友不及时，请稍安勿躁~
</label>
，欢迎大家加入这个大家庭，我们一起畅游知识的海洋。
</label>
 
    感谢您花时间阅读此篇文章,如果您觉得这篇文章你学到了东西也是为了犒劳下博主的码字不易不妨打赏一下吧，让博主能喝上一杯咖啡，在此谢过了！
 
    如果您觉得阅读本文对您有帮助，请点一下左下角

“推荐”

按钮，您的
<label style="font-weight: bold; color: red; font-size: 15px">
“推荐”
</label>
将是我最大的写作动力！另外您也可以选择

【

关注我

】

，可以很方便找到我！
 
    本文版权归作者和博客园共有，来源网址：

https://www.cnblogs.com/du-hong

欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利！
</div>
<div style="text-align: center; margin-top: 10px">

公众号(关注宏哥)&NonBreakingSpace; &NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace; &NonBreakingSpace; &NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace; &NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace; &NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
微信群(扫码进群) &NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace; &NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace; &NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace; &NonBreakingSpace;&NonBreakingSpace;
&NonBreakingSpace;&NonBreakingSpace;&NonBreakingSpace; &NonBreakingSpace;&NonBreakingSpace;客服微信

<img style="width: 200px;padding-right: 50px;" alt="个人微信公众号" src="https://img2018.cnblogs.com/common/1741949/201911/1741949-20191119095948011-608816619.png">
<img style="width: 200px;padding-right: 65px;" alt="微信群" src="https://img2024.cnblogs.com/blog/1232840/202506/1232840-20250610113707419-637869921.png">
<img style="width: 200px" alt="个人微信" src="https://img2018.cnblogs.com/common/1741949/201911/1741949-20191106101257091-849954564.png">
</div>
</div> 
来源：https://www.cnblogs.com/du-hong/p/17835463.html

頁: [1]

琼殿技术论坛's Archiver

《最新出炉》系列入门篇-Python+Playwright自动化测试-40-录制生成脚本