Playwright for Python：基础用法

Playwright for Python：基础用法

 写在前面

Playwright for Python：安装及初步使用

自动化交流

Playwright可以与HTML输入元素进行交互，例如文本输入框、复选框、单选按钮、下拉选项等。它可以模拟鼠标点击、输入字符、按键和快捷键，还可以上传文件并将焦点设置到元素上。

注意：本文只讲解同步方式，不讲解异步方式。
from playwright.sync_api import sync_playwright

一、文本输入 Text input

使用locator.fill()是填写表单字段最简单的方法。它会将焦点定位到元素，并触发一个带有输入文本的输入事件。它适用于、</code>和<code>[contenteditable]</code>元素。 <pre data-index="0" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;"># 文本输入框 page.get_by_role("textbox").fill("Peter") # 日期输入框 page.get_by_label("Birth date").fill("2020-02-02") # 时间输入框 page.get_by_label("Appointment time").fill("13:15") # 当地时间输入框 page.get_by_label("Local time").fill("2020-03-02T05:15") <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li></ul></pre> <h3><a name="t2"></a><a id="_Checkboxes_and_radio_buttons_28"></a>二、复选框和单选框 Checkboxes and radio buttons</h3> 使用<code>locator.set_checked()</code>是选中或取消选择复选框或<a href="https://so.csdn.net/so/search?q=%E5%8D%95%E9%80%89%E6%8C%89%E9%92%AE&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%8D%95%E9%80%89%E6%8C%89%E9%92%AE&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"单选按钮\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%8D%95%E9%80%89%E6%8C%89%E9%92%AE&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"单选按钮\"}"}" data-tit="单选按钮" data-pretit="单选按钮">单选按钮</a>最简单的方法。该方法可用于<code>input[type=checkbox]</code>、<code>input[type=radio]</code>和<code>[role=checkbox]</code>元素。 <pre data-index="1" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;"># 勾选checkbox page.get_by_label('I agree to the terms above').check() # 断言checkbox被选中了 assert page.get_by_label('Subscribe to newsletter').is_checked() is True # 选中单选框 page.get_by_label('XL').check() <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <h3><a name="t3"></a><a id="_Select_options_42"></a>三、下拉选择框 Select options</h3> 使用<code>locator.select_option()</code>在<code><select></code>元素中选择一个或多个选项。你可以通过指定选项的值或标签来进行选择。可以同时选择多个选项。 <pre data-index="2" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;"># 单选，选中value page.get_by_label('Choose a color').select_option('blue') # 单选，选中label page.get_by_label('Choose a color').select_option(label='Blue') # 多选 page.get_by_label('Choose multiple colors').select_option(['red', 'green', 'blue']) <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <h3><a name="t4"></a><a id="_Mouse_click_55"></a>四、鼠标点击 Mouse click</h3> <pre data-index="3" class="set-code-hide prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;"># 通用点击 page.get_by_role("button").click() # 双击 page.get_by_text("Item").dblclick() # 右击 page.get_by_text("Item").click(button="right") # Shift + click page.get_by_text("Item").click(modifiers=["Shift"]) # 鼠标悬浮在元素上 page.get_by_text("Item").hover() # 点击左上角 page.get_by_text("Item").click(position={ "x": 0, "y": 0}) # 强制点击 page.get_by_role("button").click(force=True) # Programmatic click page.get_by_role("button").dispatch_event('click') <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><div class="hide-preCode-box"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li></ul></pre> <h3><a name="t5"></a><a id="__Type_characters_82"></a>五、输入字符 Type characters</h3> 在大多数情况下，你应该使用<code>locator.fill()</code>方法来输入文本。请参考上面的文本输入部分。只有在页面上存在特殊的键盘处理时，才需要手动输入字符。 <pre data-index="4" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;"># 通过class定位，输入Hello World! page.locator('#area').type('Hello World!') <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre> <h3><a name="t6"></a><a id="__Keys_and_shortcuts_90"></a>七、按键和快捷操作 Keys and shortcuts</h3> <pre data-index="5" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;"># 点击 Enter page.get_by_text("Submit").press("Enter") # 发送 Control+Right组合键 page.get_by_role("textbox").press("Control+ArrowRight") # 键盘按 “$”符号 page.get_by_role("textbox").press("$") <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre> <code>locator.press()</code>方法将焦点放在所选元素上并产生一个单一的按键输入。它接受键盘事件的<code>keyboardEvent.key</code>属性中发出的逻辑按键名称： <pre data-index="6" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;">Backquote, Minus, Equal, Backslash, Backspace, Tab, Delete, Escape, ArrowDown, End, Enter, Home, Insert, PageDown, PageUp, ArrowRight, ArrowUp, F1 - F12, Digit0 - Digit9, KeyA - KeyZ, etc. <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> <ul><li>你还可以指定一个单个字符，比如"a"或"#"来产生相应的按键输入。</li><li>同时也支持以下修改键的快捷方式：Shift、Control、Alt、Meta。</li><li>小写的"a"和大写的"A"是不一样的操作。</li></ul> <pre data-index="7" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;"># <input id=name> page.locator('#name').press('Shift+A') # <input id=name> page.locator('#name').press('Shift+ArrowLeft') <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre> <ul><li> 还支持“Control+o”或“Control+Shift+T”等快捷方式。当使用修改键时，修改键会被按下并保持，同时在按下后继键时也发挥作用。 </li><li> 请注意，如果需要大写字母A，你仍然需要指定Shift-A。Shift-a会产生一个小写的字符，就好像你已经打开了CapsLock键一样。 </li></ul> <h3><a name="t7"></a><a id="__Upload_files_126"></a>八、上传文件 Upload files</h3> 你可以使用locator.set_input_files()方法选择要上传的输入文件。它的第一个参数应该指向一个具有"type"属性为"file"的输入元素。可以在数组中传递多个文件。如果某些文件路径是相对路径，它们将相对于当前工作目录进行解析。如果传入一个空数组，则会清除已选择的文件。 <pre data-index="8" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;"># 上传单个文件 page.get_by_label("Upload file").set_input_files('myfile.pdf') # 上传多个文件 page.get_by_label("Upload files").set_input_files(['file1.txt', 'file2.txt']) # 移除所有的文件 page.get_by_label("Upload file").set_input_files([]) # 从内存上传缓存区 page.get_by_label("Upload file").set_input_files( files=[ {"name": "test.txt", "mimeType": "text/plain", "buffer": b"this is a test"} ], ) <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li></ul></pre> 如果你没有手动获取输入元素（因为它是动态创建的），你可以通过处理page.on(“filechooser”)事件或使用相应的等待方法来进行操作： <pre data-index="9" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;">with page.expect_file_chooser() as fc_info: page.get_by_label("Upload file").click() file_chooser = fc_info.value file_chooser.set_files("myfile.pdf") <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> <h3><a name="t8"></a><a id="__Focus_element_156"></a>九、聚焦元素 Focus element</h3> 对于处理焦点事件的动态页面，你可以使用<code>locator.focus()</code>函数将指定元素聚焦。 <pre data-index="10" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;">page.get_by_label('password').focus() <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> <h3><a name="t9"></a><a id="_Drag_and_Drop_163"></a>十、拖拽 Drag and Drop</h3> 你可以使用locator.drag_to()方法执行拖放操作。该方法将会： <ul><li>悬停在要拖动的元素上。</li><li>按下鼠标左键。</li><li>移动鼠标到接收拖放的元素上。</li><li>松开鼠标左键。</li></ul> <pre data-index="11" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;">page.locator("#item-to-be-dragged").drag_to(page.locator("#item-to-drop-at")) <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 如果你想对拖动操作进行精确控制，可以使用较低级别的方法，比如<code>locator.hover()</code>、<code>mouse.down()</code>、<code>mouse.move()</code>和<code>mouse.up()</code>。 <pre data-index="12" class="set-code-show prettyprint"><code class="prism language-python has-numbering" onclick="mdcp.signin(event)" style="position: unset;">page.locator("#item-to-be-dragged").hover() page.mouse.down() page.locator("#item-to-drop-at").hover() page.mouse.up() <div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre> 注意：如果你的页面依赖于dragover事件的触发，你需要至少进行两次鼠标移动才能在所有浏览器中触发该事件。为了可靠地执行第二次鼠标移动，你需要重复执行mouse.move()或locator.hover()两次。操作顺序如下：悬停在拖动元素上，按下鼠标，悬停在放置元素上，再次悬停在放置元素上，松开鼠标。 </div> </div> </li> <li class="list-group-item ul-li"> 相关阅读: <a href="/Article/Index/1322919">Xposed项目配置</a> <a href="/Article/Index/1312141">stm32无人机-飞行力学原理</a> <a href="/Article/Index/1138153">配电站房监控系统方案</a> <a href="/Article/Index/1122688">Redhat(10)-防火墙-文件管理-JINJA2模板-Cron-文件权限-NTP-autofs</a> <a href="/Article/Index/1308817">如何将Docker与Kubernetes集成，实现云原生应用程序</a> <a href="/Article/Index/1423361">ASEMI高压二极管CL08-RG210参数，CL08-RG210封装</a> <a href="/Article/Index/1442710">多线程概述</a> <a href="/Article/Index/885589">springboot+学校运动会信息管理毕业设计-附源码231058</a> <a href="/Article/Index/1521421">OSI七层模型&TCP四层模型横向对比</a> <a href="/Article/Index/1265511">异地容灾系统和数据仓库中数据同步的设计软件的功能模型</a> </li> <li class="list-group-item from-a mb-2"> 原文地址：https://blog.csdn.net/FloraCHY/article/details/132692605 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <a href="/Article/Index/888177">十款代码表白小特效一个比一个浪漫赶紧收藏起来吧！！！</a> <a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> </li> </ul> </div> </div> </div>     <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a> <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" />京公网安备 11010502049817号</a> </div> </div> </div> </div> </nav>   <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script>   </body> </html>

写在前面

一、文本输入 Text input