通过前边两篇的学习，想必大家已经对iframe有了一定的认识和了解，今天这一篇主要是对iframe做一个总结，主要从iframe的操作（输入框、点击等等）和定位两个方面进行总结。
iframe 简单来说就是一个 html 嵌套了另外一个 html。在页面元素上最简单的识别方法，就是看你需要定位的元素外层有没有iframe的标签名称。
iframe就是我们常用的iframe标签：。iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多，主要区别在于对iframe标签定义的形式不同，例如定义iframe的长宽高。简单的一句话概括就是：iframe 就是HTML 中，用于网页嵌套网页的。 一个网页可以嵌套到另一个网页中，可以嵌套很多层。和俄罗斯套娃差不多吧。</p> <h3 id="3iframe定位">3.iframe定位</h3> <p>定位iframe 对象，总的来说有四种方法</p> <p>page.frame_locator(selector) #通过page对象直接定位iframe 对象，传selector 选择器参数 <br /> page.locator(selector).frame_locator(selector) #通过page对象定位某个父元素，通过locator定位frame_locator(selector) <br /> page.frame(name，url) #通过page对象直接定位iframe 对象，传name 或者url参数 <br /> page.query_selector(selector).content_frame() #通过query_selector方式，定位到元素，转成frame 对象</p> <p>page 对象还有2个跟frame 相关的方法</p> <p>page.frames #获取page对象全部iframes,包含page本身的frame对象 <br /> page.main_frame #获取page的main_frame （page对象本身也是一个frame对象）</p> <h3 id="4iframe的层级结构">4.iframe的层级结构</h3> <p>官网上写了个示例，可以快速查看iframe的层级结构，如下图所示：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/dc79e6ef-249b-4111-aab6-699b3c992da1.png" alt="" /></p> <p>仿照官方的示例，宏哥分别来查看一下QQ邮箱和163邮箱的frame的层级结构。</p> <h4 id="41qq邮箱的frame层级结构">4.1QQ邮箱的frame层级结构</h4> <p># coding=utf-8</p> <h1 id="1先设置编码，utf-8可支持中英文，如上，一般放在第一行">1.先设置编码，utf-8可支持中英文，如上，一般放在第一行</h1> <h1 id="2注释：包括记录创建时间，创建人，项目名称。">2.注释：包括记录创建时间，创建人，项目名称。</h1> <p>''' <br /> Created on 2023-07-23 <br /> <a rel="nofollow noopener noreferrer" href="https://github.com/author">@author</a>: 北京-宏哥 QQ交流群：705269076 <br /> 公众号：北京宏哥 <br /> Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe <br /> '''</p> <h1 id="3导入模块">3.导入模块</h1> <p>from playwright.sync_api import sync_playwright</p> <p>def dump_frame_tree(frame, indent): <br /> print(indent + frame.name + '@' + frame.url) <br /> for child in frame.child_frames: <br /> dump_frame_tree(child, indent + " ")</p> <p>with sync_playwright() as p: <br /> browser = p.chromium.launch(headless=False) <br /> page = browser.new_page() <br /> page.goto("https://mail.qq.com/") <br /> dump_frame_tree(page.main_frame, "") <br /> browser.close()</p> <p>运行代码后，可以看到QQ邮箱登录页面的frame层级结构如下：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/7a270eb9-7dff-43a4-83ec-51aee9ad7de8.png" alt="" /></p> <p>从控制台的输出结果可以看出：QQ邮箱主页面（主页面其实也可以看成一个iframe 对象）下有3个iframe，其中最后一个iframe下又嵌套了一层iframe。（可能是由于宏哥登录QQ缘故吧）</p> <h4 id="42163邮箱的frame-层级结构">4.2163邮箱的frame 层级结构</h4> <p># coding=utf-8</p> <h1 id="1先设置编码，utf-8可支持中英文，如上，一般放在第一行-1">1.先设置编码，utf-8可支持中英文，如上，一般放在第一行</h1> <h1 id="2注释：包括记录创建时间，创建人，项目名称。-1">2.注释：包括记录创建时间，创建人，项目名称。</h1> <p>''' <br /> Created on 2023-07-23 <br /> <a rel="nofollow noopener noreferrer" href="https://github.com/author">@author</a>: 北京-宏哥 QQ交流群：705269076 <br /> 公众号：北京宏哥 <br /> Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe <br /> '''</p> <h1 id="3导入模块-1">3.导入模块</h1> <p>from playwright.sync_api import sync_playwright</p> <p>def dump_frame_tree(frame, indent): <br /> print(indent + frame.name + '@' + frame.url) <br /> for child in frame.child_frames: <br /> dump_frame_tree(child, indent + " ")</p> <p>with sync_playwright() as p: <br /> browser = p.chromium.launch(headless=False) <br /> page = browser.new_page() <br /> page.goto("https://mail.163.com") <br /> dump_frame_tree(page.main_frame, "") <br /> browser.close()</p> <p>运行代码后，可以看到163邮箱登录页面的frame层级结构如下：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/963cc229-f648-4058-88ef-0ab365040224.png" alt="" /></p> <h3 id="5获取page对象的frame对象">5.获取page对象的frame对象</h3> <p>获取page对象的frame用到了以下3个基本方法</p> <p>page.main_frame #获取page对象本身的 frame 对象 <br /> page.frames #获取page对象全部frames 包含page本身的frame对象 <br /> frame.child_frames #获取frame下的全部子 frame 对象</p> <p>宏哥这里以163邮箱举例说明。</p> <h4 id="51代码设计">5.1代码设计</h4> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/bfe75998-e9f0-4cae-892f-1f6119e3d928.png" alt="" /></p> <h4 id="52参考代码">5.2参考代码</h4> <p># coding=utf-8</p> <h1 id="1先设置编码，utf-8可支持中英文，如上，一般放在第一行-2">1.先设置编码，utf-8可支持中英文，如上，一般放在第一行</h1> <h1 id="2注释：包括记录创建时间，创建人，项目名称。-2">2.注释：包括记录创建时间，创建人，项目名称。</h1> <p>''' <br /> Created on 2023-07-23 <br /> <a rel="nofollow noopener noreferrer" href="https://github.com/author">@author</a>: 北京-宏哥 QQ交流群：705269076 <br /> 公众号：北京宏哥 <br /> Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe <br /> '''</p> <h1 id="3导入模块-2">3.导入模块</h1> <p>from playwright.sync_api import sync_playwright</p> <p>with sync_playwright() as p: <br /> browser = p.chromium.launch(headless=False) <br /> page = browser.new_page() <br /> page.goto("https://mail.163.com/") <br /> print('获取page对象本身的frame对象') <br /> print(page.main_frame) <br /> print('获取page对象全部frames 包含page本身的frame对象 ') <br /> print(page.frames) <br /> print('获取page对象子frame ') <br /> print(page.main_frame.child_frames) <br /> browser.close()</p> <h4 id="53运行代码">5.3运行代码</h4> <p>1.运行代码，右键Run'Test'，控制台输出，如下图所示：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/17c3ff72-dc11-465c-91f9-5948cf56790c.png" alt="" /></p> <p>从以上控制台的运行结果可以看出，iframe 对象有2个重要的属性name和url, 可以直接打印出来看看</p> <p># coding=utf-8</p> <h1 id="1先设置编码，utf-8可支持中英文，如上，一般放在第一行-3">1.先设置编码，utf-8可支持中英文，如上，一般放在第一行</h1> <h1 id="2注释：包括记录创建时间，创建人，项目名称。-3">2.注释：包括记录创建时间，创建人，项目名称。</h1> <p>''' <br /> Created on 2023-07-23 <br /> <a rel="nofollow noopener noreferrer" href="https://github.com/author">@author</a>: 北京-宏哥 QQ交流群：705269076 <br /> 公众号：北京宏哥 <br /> Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe <br /> '''</p> <h1 id="3导入模块-3">3.导入模块</h1> <p>from playwright.sync_api import sync_playwright</p> <p>with sync_playwright() as p: <br /> browser = p.chromium.launch(headless=False) <br /> page = browser.new_page() <br /> page.goto("https://mail.163.com/") <br /> for frame in page.frames: <br /> print("name:"+frame.name+"| url:"+frame.url) <br /> browser.close()</p> <p>运行代码，右键Run'Test'，控制台输出，如下图所示：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/554ff66b-7294-4eec-9e9d-cf41a0823c23.png" alt="" /></p> <p>从以上控制台打印结果可以看出。iframe 元素的name和url属性，都会被作为那么属性打印出来，如果2个属性都没有，那么获取的name属性为空字符。</p> <h3 id="6pageframename，url-的使用">6.page.frame(name，url) 的使用</h3> <p>page.frame 和 page.frame_locator 使用差异</p> <p>page.frame_locator('') #返回的对象只能用locator() 方法定位元素然后click()等操作元素</p> <p>page.frame() 返回的对象能直接使用fill() 和 click() 方法</p> <p>page.frame(name，url) #方法可以使用frame的name属性或url属性定位到frame对象</p> <h4 id="61name属性定位iframe">6.1name属性定位iframe</h4> <p>定位iframe的name属性可以是iframe元素的name 或id属性。name 属性不能模糊匹配，只能绝对匹配字符串。</p> <p>（1）使用name属性定位示例。</p> <p>a.宏哥偶然发现一个在线的免费的demo网址：<a rel="nofollow noopener noreferrer" href="https://sahitest.com/demo">https://sahitest.com/demo</a> 很好用，今天就使用它来讲解定位frame。如下图所示：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/9cff87b0-8615-4ab9-859e-5fa9e46e594e.png" alt="" /></p> <p>b.参考代码，如下：</p> <p># coding=utf-8</p> <h1 id="1先设置编码，utf-8可支持中英文，如上，一般放在第一行-4">1.先设置编码，utf-8可支持中英文，如上，一般放在第一行</h1> <h1 id="2注释：包括记录创建时间，创建人，项目名称。-4">2.注释：包括记录创建时间，创建人，项目名称。</h1> <p>''' <br /> Created on 2023-08-13 <br /> <a rel="nofollow noopener noreferrer" href="https://github.com/author">@author</a>: 北京-宏哥 QQ交流群：705269076 <br /> 公众号：北京宏哥 <br /> Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe <br /> '''</p> <h1 id="3导入模块-4">3.导入模块</h1> <p>from playwright.sync_api import sync_playwright</p> <p>with sync_playwright() as p: <br /> browser = p.chromium.launch(headless=False) <br /> page = browser.new_page() <br /> page.goto("https://sahitest.com/demo/framesTest.htm") <br /> # name 属性定位 <br /> frame = page.frame(name="top") <br /> print(frame) <br /> browser.close()</p> <p>c.运行代码控制台输出，如下图所示：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/da115a75-4a9b-4c43-8f3e-9c2b02f7d06f.png" alt="" /></p> <p>（2）iframe元素没有name属性，有id属性，也可以用来定位的</p> <p>a.宏哥这里还用之前的html页面，进行演示。如下图所示：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/14a0204c-c085-414d-bc3e-f1bee8f8eb72.png" alt="" /></p> <p>b.参考代码，如下：</p> <p># coding=utf-8</p> <h1 id="1先设置编码，utf-8可支持中英文，如上，一般放在第一行-5">1.先设置编码，utf-8可支持中英文，如上，一般放在第一行</h1> <h1 id="2注释：包括记录创建时间，创建人，项目名称。-5">2.注释：包括记录创建时间，创建人，项目名称。</h1> <p>''' <br /> Created on 2023-08-13 <br /> <a rel="nofollow noopener noreferrer" href="https://github.com/author">@author</a>: 北京-宏哥 QQ交流群：705269076 <br /> 公众号：北京宏哥 <br /> Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe <br /> '''</p> <h1 id="3导入模块-5">3.导入模块</h1> <p>from playwright.sync_api import sync_playwright</p> <p>with sync_playwright() as p: <br /> browser = p.chromium.launch(headless=False) <br /> page = browser.new_page() <br /> page.goto("C:/Users/DELL/Desktop/test/iframe/index.html") <br /> # name 属性定位 <br /> frame = page.frame(name="frameA") <br /> print(frame) <br /> browser.close()</p> <p>c.运行代码控制台输出，如下图所示：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/3152d74e-3efb-4fa2-8aca-f2d9a507609f.png" alt="" /></p> <h4 id="62url属性定位iframe">6.2url属性定位iframe</h4> <p>url属性的值，就是我们看到页面上的src属性，可以支持模糊匹配。</p> <p>a.宏哥偶然发现一个在线的免费的demo网址：<a rel="nofollow noopener noreferrer" href="https://sahitest.com/demo">https://sahitest.com/demo</a> 很好用，今天就使用它来讲解定位frame。如下图所示：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/438d7069-a256-4b5a-9ae3-1d21219acad7.png" alt="" /></p> <p>b.参考代码，如下：</p> <p># coding=utf-8</p> <h1 id="1先设置编码，utf-8可支持中英文，如上，一般放在第一行-6">1.先设置编码，utf-8可支持中英文，如上，一般放在第一行</h1> <h1 id="2注释：包括记录创建时间，创建人，项目名称。-6">2.注释：包括记录创建时间，创建人，项目名称。</h1> <p>''' <br /> Created on 2023-08-13 <br /> <a rel="nofollow noopener noreferrer" href="https://github.com/author">@author</a>: 北京-宏哥 QQ交流群：705269076 <br /> 公众号：北京宏哥 <br /> Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe <br /> '''</p> <h1 id="3导入模块-6">3.导入模块</h1> <p>from playwright.sync_api import sync_playwright</p> <p>with sync_playwright() as p: <br /> browser = p.chromium.launch(headless=False) <br /> page = browser.new_page() <br /> page.goto("https://sahitest.com/demo/framesTest.htm") <br /> # name 属性定位 <br /> frame = page.frame(url="index.htm") <br /> print(frame) <br /> browser.close()</p> <p>c.运行代码控制台输出，如下图所示：</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2308/786bfe8d-ff06-4bc6-9238-d638551fe7c7.png" alt="" /></p> <h3 id="7pageframe_locatorselector">7.page.frame_locator(selector)</h3> <p>这个前边已经详细介绍过了，宏哥就是在这里总结一下，具体使用方法可以查看前边的iframe文章。</p> <h4 id="71基本语法">7.1基本语法</h4> <p>page.frame_locator(selector)</p> <h4 id="72使用示例">7.2使用示例</h4> <p>1.使用示例，可以直接定位到frame对象，继续定位元素操作</p> <p># 直接定位输入 <br /> page.frame_locator('[name="top"]').locator("#username").fill('北京-宏哥') <br /> page.frame_locator('[name="top"]').locator("#password").fill('123456')</p> <p>2.或者先定位到iframe对象，再通过frame对象操作，只需要定位到frame 对象，后面的元素定位操作都基本一样了。</p> <p># frame 对象操作 <br /> frame = page.frame_locator('[name="top"]') <br /> frame.locator("#username").fill('北京-宏哥') <br /> frame.locator("#password").fill('123456')</p> <p>3.也可以通过先定位外层的元素，再定位到frame对象，使用基本语法</p> <p>page.locator(selector).frame_locator(selector)</p> <h3 id="8不常用的方法">8.不常用的方法</h3> <p><strong>page.query_selector(selector).content_frame() 方法</strong> 是一个不太常用的方法，使用page.query_selector(selector)元素句柄的方式定位到iframe，然后使用content_frame() 方法切换到iframe对象上</p> <p>语法规则：</p> <p>page.query_selector(selector).content_frame()</p> <h4 id="81使用示例">8.1使用示例</h4> <p># query_selector 方法 <br /> iframe = page.query_selector('[src="down.html"]').content_frame() <br /> print(iframe)</p> <h3 id="9小结">9.小结</h3> <p>今天主要是对前边的iframe的相关知识做了一个总结以便更好地使用和学习。 好了，时间不早了，关于标签操作宏哥就今天就分享到这里。感谢你耐心地阅读。</p></div></div><div class="MuiGrid-root jss8 MuiGrid-item MuiGrid-grid-xs-true MuiGrid-grid-md-3"><div class="MuiTypography-root jss26 MuiTypography-body1"><div class="MuiTypography-root jss27 MuiTypography-body1"><canvas style="height:108px;width:108px" height="108" width="108"></canvas><div class="MuiTypography-root jss28 MuiTypography-body1"><p class="MuiTypography-root jss29 MuiTypography-body1">手机扫一扫</p><p class="MuiTypography-root jss29 MuiTypography-body1">移动阅读更方便</p></div></div></div><div class="MuiTypography-root jss9 MuiTypography-body1"><div class="MuiTypography-root jss30 MuiTypography-body1" style="height:150px"><div class="swiper-container jss32"><div class="swiper-pagination"></div><div class="swiper-wrapper"><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/aliyun"><img alt="阿里云服务器" class="jss31" src="https://article.cdnof.com/promotion/aliyun.jpg"/></a></div><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/tencent"><img alt="腾讯云服务器" class="jss31" src="https://article.cdnof.com/promotion/tencent.jpg"/></a></div><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/qiniu"><img alt="七牛云服务器" class="jss31" src="https://article.cdnof.com/promotion/qiniu.png"/></a></div></div></div></div></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiTypography-root jss33 MuiTypography-body1"><p class="MuiTypography-root jss34 MuiTypography-body1">你可能感兴趣的文章</p><div class="MuiList-root MuiList-padding" aria-label="main mailbox folders"><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><svg class="MuiSvgIcon-root MuiSvgIcon-colorError" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2V9h-2V7h4v10z"></path></svg></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/a42ecb70-706f-47d1-8ce5-8d64a9ee99ba">《最新出炉》系列初窥篇-Python+Playwright自动化测试-14-playwright操作iframe-番外篇</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 8c0 1.11-.9 2-2 2h-2v2h4v2H9v-4c0-1.11.9-2 2-2h2V9H9V7h4c1.1 0 2 .89 2 2v2z"></path></svg></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/e1bdb708-ea49-42a8-96ca-a3fa9d950227">Cookies 完全指南</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><svg class="MuiSvgIcon-root MuiSvgIcon-colorSecondary" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.01 3h-14c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 7.5c0 .83-.67 1.5-1.5 1.5.83 0 1.5.67 1.5 1.5V15c0 1.11-.9 2-2 2h-4v-2h4v-2h-2v-2h2V9h-4V7h4c1.1 0 2 .89 2 2v1.5z"></path></svg></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/99134c88-25ff-44d9-8c88-4351248a6cf2">《最新出炉》系列初窥篇-Python+Playwright自动化测试-12-playwright操作iframe-中篇</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">4</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/eccb5240-1e89-4d0a-851c-1f040f78be90">《最新出炉》系列初窥篇-Python+Playwright自动化测试-11-playwright操作iframe-上篇</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">5</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/612bf286-9ae8-4743-afaa-cca68e7da09e">seleniumUI自动化学习记录</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">6</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/8996f3dc-0a05-4044-bf8c-f5ddecb625e7">【PUPPETEER】初探之原生frame切换（四）</a></div><hr class="MuiDivider-root"/></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiButtonBase-root MuiListItem-root jss37 MuiListItem-gutters MuiListItem-button" tabindex="0" role="button" aria-disabled="false"><div class="MuiListItemIcon-root jss36"><p class="MuiTypography-root MuiTypography-body1">7</p></div><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss35 MuiTypography-colorInherit" target="_blank" href="https://v2as.com/article/a36589ef-6941-4854-ae3e-67e6efa3759c">Puppeteer学习笔记 （1）- 什么是Puppeteer</a></div></div></div></div></div></div></div></div><footer style="margin-top:30px"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-alignCenter">Copyright © <a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit" href="https://v2as.com" title="哇哦，有大量工具等你探索">V2AS | 问路</a> <!-- -->2024<!-- --> <!-- -->.</p><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-alignCenter"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit" rel="nofollow noopener noreferrer" href="https://beian.miit.gov.cn/">浙ICP备15029886号</a></p></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"article":{"article_id":"0ca6dbba-6093-4353-b203-3ea1efcd465a","title":"《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe-下篇","link":"","description":"1.简介\n通过前边两篇的学习，想必大家已经对iframe有了一定的认识和了解，今天这一篇主要是对iframe做一个总结，主要从iframe的操作（输入框、点击等等）和定位两个方面进行总结。\n2.iframe是什么？\niframe 简单来说就是一个 html 嵌套了另外一个 html。在页面元素上最简单的识别方法，就是看你需要定位的元素外层有没有iframe的标签名称。\niframe就是我们常用的i","image":"https://article.cdnof.com/2308/dc79e6ef-249b-4111-aab6-699b3c992da1.png","keywords":["frame","page","iframe","playwright","宏哥","browser","sync","定位","selector","locator"],"created_at":"2023-08-23T09:17:13.571Z","html":"\u003ch3 id=\"1简介\"\u003e1.简介\u003c/h3\u003e\n\u003cp\u003e通过前边两篇的学习，想必大家已经对iframe有了一定的认识和了解，今天这一篇主要是对iframe做一个总结，主要从iframe的操作（输入框、点击等等）和定位两个方面进行总结。\u003c/p\u003e\n\u003ch3 id=\"2iframe是什么？\"\u003e2.iframe是什么？\u003c/h3\u003e\n\u003cp\u003eiframe 简单来说就是一个 html 嵌套了另外一个 html。在页面元素上最简单的识别方法，就是看你需要定位的元素外层有没有iframe的标签名称。\u003c/p\u003e\n\u003cp\u003eiframe就是我们常用的iframe标签：\u003ciframe\u003e。iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多，主要区别在于对iframe标签定义的形式不同，例如定义iframe的长宽高。简单的一句话概括就是：iframe 就是HTML 中，用于网页嵌套网页的。 一个网页可以嵌套到另一个网页中，可以嵌套很多层。和俄罗斯套娃差不多吧。\u003c/p\u003e\n\u003ch3 id=\"3iframe定位\"\u003e3.iframe定位\u003c/h3\u003e\n\u003cp\u003e定位iframe 对象，总的来说有四种方法\u003c/p\u003e\n\u003cp\u003epage.frame_locator(selector) #通过page对象直接定位iframe 对象，传selector 选择器参数 \u003cbr /\u003e\npage.locator(selector).frame_locator(selector) #通过page对象定位某个父元素，通过locator定位frame_locator(selector) \u003cbr /\u003e\npage.frame(name，url) #通过page对象直接定位iframe 对象，传name 或者url参数 \u003cbr /\u003e\npage.query_selector(selector).content_frame() #通过query_selector方式，定位到元素，转成frame 对象\u003c/p\u003e\n\u003cp\u003epage 对象还有2个跟frame 相关的方法\u003c/p\u003e\n\u003cp\u003epage.frames #获取page对象全部iframes,包含page本身的frame对象 \u003cbr /\u003e\npage.main_frame #获取page的main_frame （page对象本身也是一个frame对象）\u003c/p\u003e\n\u003ch3 id=\"4iframe的层级结构\"\u003e4.iframe的层级结构\u003c/h3\u003e\n\u003cp\u003e官网上写了个示例，可以快速查看iframe的层级结构，如下图所示：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/dc79e6ef-249b-4111-aab6-699b3c992da1.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e仿照官方的示例，宏哥分别来查看一下QQ邮箱和163邮箱的frame的层级结构。\u003c/p\u003e\n\u003ch4 id=\"41qq邮箱的frame层级结构\"\u003e4.1QQ邮箱的frame层级结构\u003c/h4\u003e\n\u003cp\u003e# coding=utf-8\u003c/p\u003e\n\u003ch1 id=\"1先设置编码，utf-8可支持中英文，如上，一般放在第一行\"\u003e1.先设置编码，utf-8可支持中英文，如上，一般放在第一行\u003c/h1\u003e\n\u003ch1 id=\"2注释：包括记录创建时间，创建人，项目名称。\"\u003e2.注释：包括记录创建时间，创建人，项目名称。\u003c/h1\u003e\n\u003cp\u003e''' \u003cbr /\u003e\nCreated on 2023-07-23 \u003cbr /\u003e\n\u003ca rel=\"nofollow noopener noreferrer\" href=\"https://github.com/author\"\u003e@author\u003c/a\u003e: 北京-宏哥 QQ交流群：705269076 \u003cbr /\u003e\n公众号：北京宏哥 \u003cbr /\u003e\nProject: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe \u003cbr /\u003e\n'''\u003c/p\u003e\n\u003ch1 id=\"3导入模块\"\u003e3.导入模块\u003c/h1\u003e\n\u003cp\u003efrom playwright.sync_api import sync_playwright\u003c/p\u003e\n\u003cp\u003edef dump_frame_tree(frame, indent): \u003cbr /\u003e\n print(indent + frame.name + '@' + frame.url) \u003cbr /\u003e\n for child in frame.child_frames: \u003cbr /\u003e\n dump_frame_tree(child, indent + \" \")\u003c/p\u003e\n\u003cp\u003ewith sync_playwright() as p: \u003cbr /\u003e\n browser = p.chromium.launch(headless=False) \u003cbr /\u003e\n page = browser.new_page() \u003cbr /\u003e\n page.goto(\"https://mail.qq.com/\") \u003cbr /\u003e\n dump_frame_tree(page.main_frame, \"\") \u003cbr /\u003e\n browser.close()\u003c/p\u003e\n\u003cp\u003e运行代码后，可以看到QQ邮箱登录页面的frame层级结构如下：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/7a270eb9-7dff-43a4-83ec-51aee9ad7de8.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e从控制台的输出结果可以看出：QQ邮箱主页面（主页面其实也可以看成一个iframe 对象）下有3个iframe，其中最后一个iframe下又嵌套了一层iframe。（可能是由于宏哥登录QQ缘故吧）\u003c/p\u003e\n\u003ch4 id=\"42163邮箱的frame-层级结构\"\u003e4.2163邮箱的frame 层级结构\u003c/h4\u003e\n\u003cp\u003e# coding=utf-8\u003c/p\u003e\n\u003ch1 id=\"1先设置编码，utf-8可支持中英文，如上，一般放在第一行-1\"\u003e1.先设置编码，utf-8可支持中英文，如上，一般放在第一行\u003c/h1\u003e\n\u003ch1 id=\"2注释：包括记录创建时间，创建人，项目名称。-1\"\u003e2.注释：包括记录创建时间，创建人，项目名称。\u003c/h1\u003e\n\u003cp\u003e''' \u003cbr /\u003e\nCreated on 2023-07-23 \u003cbr /\u003e\n\u003ca rel=\"nofollow noopener noreferrer\" href=\"https://github.com/author\"\u003e@author\u003c/a\u003e: 北京-宏哥 QQ交流群：705269076 \u003cbr /\u003e\n公众号：北京宏哥 \u003cbr /\u003e\nProject: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe \u003cbr /\u003e\n'''\u003c/p\u003e\n\u003ch1 id=\"3导入模块-1\"\u003e3.导入模块\u003c/h1\u003e\n\u003cp\u003efrom playwright.sync_api import sync_playwright\u003c/p\u003e\n\u003cp\u003edef dump_frame_tree(frame, indent): \u003cbr /\u003e\n print(indent + frame.name + '@' + frame.url) \u003cbr /\u003e\n for child in frame.child_frames: \u003cbr /\u003e\n dump_frame_tree(child, indent + \" \")\u003c/p\u003e\n\u003cp\u003ewith sync_playwright() as p: \u003cbr /\u003e\n browser = p.chromium.launch(headless=False) \u003cbr /\u003e\n page = browser.new_page() \u003cbr /\u003e\n page.goto(\"https://mail.163.com\") \u003cbr /\u003e\n dump_frame_tree(page.main_frame, \"\") \u003cbr /\u003e\n browser.close()\u003c/p\u003e\n\u003cp\u003e运行代码后，可以看到163邮箱登录页面的frame层级结构如下：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/963cc229-f648-4058-88ef-0ab365040224.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch3 id=\"5获取page对象的frame对象\"\u003e5.获取page对象的frame对象\u003c/h3\u003e\n\u003cp\u003e获取page对象的frame用到了以下3个基本方法\u003c/p\u003e\n\u003cp\u003epage.main_frame #获取page对象本身的 frame 对象 \u003cbr /\u003e\npage.frames #获取page对象全部frames 包含page本身的frame对象 \u003cbr /\u003e\nframe.child_frames #获取frame下的全部子 frame 对象\u003c/p\u003e\n\u003cp\u003e宏哥这里以163邮箱举例说明。\u003c/p\u003e\n\u003ch4 id=\"51代码设计\"\u003e5.1代码设计\u003c/h4\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/bfe75998-e9f0-4cae-892f-1f6119e3d928.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch4 id=\"52参考代码\"\u003e5.2参考代码\u003c/h4\u003e\n\u003cp\u003e# coding=utf-8\u003c/p\u003e\n\u003ch1 id=\"1先设置编码，utf-8可支持中英文，如上，一般放在第一行-2\"\u003e1.先设置编码，utf-8可支持中英文，如上，一般放在第一行\u003c/h1\u003e\n\u003ch1 id=\"2注释：包括记录创建时间，创建人，项目名称。-2\"\u003e2.注释：包括记录创建时间，创建人，项目名称。\u003c/h1\u003e\n\u003cp\u003e''' \u003cbr /\u003e\nCreated on 2023-07-23 \u003cbr /\u003e\n\u003ca rel=\"nofollow noopener noreferrer\" href=\"https://github.com/author\"\u003e@author\u003c/a\u003e: 北京-宏哥 QQ交流群：705269076 \u003cbr /\u003e\n公众号：北京宏哥 \u003cbr /\u003e\nProject: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe \u003cbr /\u003e\n'''\u003c/p\u003e\n\u003ch1 id=\"3导入模块-2\"\u003e3.导入模块\u003c/h1\u003e\n\u003cp\u003efrom playwright.sync_api import sync_playwright\u003c/p\u003e\n\u003cp\u003ewith sync_playwright() as p: \u003cbr /\u003e\n browser = p.chromium.launch(headless=False) \u003cbr /\u003e\n page = browser.new_page() \u003cbr /\u003e\n page.goto(\"https://mail.163.com/\") \u003cbr /\u003e\n print('获取page对象本身的frame对象') \u003cbr /\u003e\n print(page.main_frame) \u003cbr /\u003e\n print('获取page对象全部frames 包含page本身的frame对象 ') \u003cbr /\u003e\n print(page.frames) \u003cbr /\u003e\n print('获取page对象子frame ') \u003cbr /\u003e\n print(page.main_frame.child_frames) \u003cbr /\u003e\n browser.close()\u003c/p\u003e\n\u003ch4 id=\"53运行代码\"\u003e5.3运行代码\u003c/h4\u003e\n\u003cp\u003e1.运行代码，右键Run'Test'，控制台输出，如下图所示：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/17c3ff72-dc11-465c-91f9-5948cf56790c.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e从以上控制台的运行结果可以看出，iframe 对象有2个重要的属性name和url, 可以直接打印出来看看\u003c/p\u003e\n\u003cp\u003e# coding=utf-8\u003c/p\u003e\n\u003ch1 id=\"1先设置编码，utf-8可支持中英文，如上，一般放在第一行-3\"\u003e1.先设置编码，utf-8可支持中英文，如上，一般放在第一行\u003c/h1\u003e\n\u003ch1 id=\"2注释：包括记录创建时间，创建人，项目名称。-3\"\u003e2.注释：包括记录创建时间，创建人，项目名称。\u003c/h1\u003e\n\u003cp\u003e''' \u003cbr /\u003e\nCreated on 2023-07-23 \u003cbr /\u003e\n\u003ca rel=\"nofollow noopener noreferrer\" href=\"https://github.com/author\"\u003e@author\u003c/a\u003e: 北京-宏哥 QQ交流群：705269076 \u003cbr /\u003e\n公众号：北京宏哥 \u003cbr /\u003e\nProject: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe \u003cbr /\u003e\n'''\u003c/p\u003e\n\u003ch1 id=\"3导入模块-3\"\u003e3.导入模块\u003c/h1\u003e\n\u003cp\u003efrom playwright.sync_api import sync_playwright\u003c/p\u003e\n\u003cp\u003ewith sync_playwright() as p: \u003cbr /\u003e\n browser = p.chromium.launch(headless=False) \u003cbr /\u003e\n page = browser.new_page() \u003cbr /\u003e\n page.goto(\"https://mail.163.com/\") \u003cbr /\u003e\n for frame in page.frames: \u003cbr /\u003e\n print(\"name:\"+frame.name+\"| url:\"+frame.url) \u003cbr /\u003e\n browser.close()\u003c/p\u003e\n\u003cp\u003e运行代码，右键Run'Test'，控制台输出，如下图所示：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/554ff66b-7294-4eec-9e9d-cf41a0823c23.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e从以上控制台打印结果可以看出。iframe 元素的name和url属性，都会被作为那么属性打印出来，如果2个属性都没有，那么获取的name属性为空字符。\u003c/p\u003e\n\u003ch3 id=\"6pageframename，url-的使用\"\u003e6.page.frame(name，url) 的使用\u003c/h3\u003e\n\u003cp\u003epage.frame 和 page.frame_locator 使用差异\u003c/p\u003e\n\u003cp\u003epage.frame_locator('') #返回的对象只能用locator() 方法定位元素然后click()等操作元素\u003c/p\u003e\n\u003cp\u003epage.frame() 返回的对象能直接使用fill() 和 click() 方法\u003c/p\u003e\n\u003cp\u003epage.frame(name，url) #方法可以使用frame的name属性或url属性定位到frame对象\u003c/p\u003e\n\u003ch4 id=\"61name属性定位iframe\"\u003e6.1name属性定位iframe\u003c/h4\u003e\n\u003cp\u003e定位iframe的name属性可以是iframe元素的name 或id属性。name 属性不能模糊匹配，只能绝对匹配字符串。\u003c/p\u003e\n\u003cp\u003e（1）使用name属性定位示例。\u003c/p\u003e\n\u003cp\u003ea.宏哥偶然发现一个在线的免费的demo网址：\u003ca rel=\"nofollow noopener noreferrer\" href=\"https://sahitest.com/demo\"\u003ehttps://sahitest.com/demo\u003c/a\u003e\u0026nbsp;很好用，今天就使用它来讲解定位frame。如下图所示：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/9cff87b0-8615-4ab9-859e-5fa9e46e594e.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003eb.参考代码，如下：\u003c/p\u003e\n\u003cp\u003e# coding=utf-8\u003c/p\u003e\n\u003ch1 id=\"1先设置编码，utf-8可支持中英文，如上，一般放在第一行-4\"\u003e1.先设置编码，utf-8可支持中英文，如上，一般放在第一行\u003c/h1\u003e\n\u003ch1 id=\"2注释：包括记录创建时间，创建人，项目名称。-4\"\u003e2.注释：包括记录创建时间，创建人，项目名称。\u003c/h1\u003e\n\u003cp\u003e''' \u003cbr /\u003e\nCreated on 2023-08-13 \u003cbr /\u003e\n\u003ca rel=\"nofollow noopener noreferrer\" href=\"https://github.com/author\"\u003e@author\u003c/a\u003e: 北京-宏哥 QQ交流群：705269076 \u003cbr /\u003e\n公众号：北京宏哥 \u003cbr /\u003e\nProject: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe \u003cbr /\u003e\n'''\u003c/p\u003e\n\u003ch1 id=\"3导入模块-4\"\u003e3.导入模块\u003c/h1\u003e\n\u003cp\u003efrom playwright.sync_api import sync_playwright\u003c/p\u003e\n\u003cp\u003ewith sync_playwright() as p: \u003cbr /\u003e\n browser = p.chromium.launch(headless=False) \u003cbr /\u003e\n page = browser.new_page() \u003cbr /\u003e\n page.goto(\"https://sahitest.com/demo/framesTest.htm\") \u003cbr /\u003e\n # name 属性定位 \u003cbr /\u003e\n frame = page.frame(name=\"top\") \u003cbr /\u003e\n print(frame) \u003cbr /\u003e\n browser.close()\u003c/p\u003e\n\u003cp\u003ec.运行代码控制台输出，如下图所示：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/da115a75-4a9b-4c43-8f3e-9c2b02f7d06f.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e（2）iframe元素没有name属性，有id属性，也可以用来定位的\u003c/p\u003e\n\u003cp\u003ea.宏哥这里还用之前的html页面，进行演示。如下图所示：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/14a0204c-c085-414d-bc3e-f1bee8f8eb72.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003eb.参考代码，如下：\u003c/p\u003e\n\u003cp\u003e# coding=utf-8\u003c/p\u003e\n\u003ch1 id=\"1先设置编码，utf-8可支持中英文，如上，一般放在第一行-5\"\u003e1.先设置编码，utf-8可支持中英文，如上，一般放在第一行\u003c/h1\u003e\n\u003ch1 id=\"2注释：包括记录创建时间，创建人，项目名称。-5\"\u003e2.注释：包括记录创建时间，创建人，项目名称。\u003c/h1\u003e\n\u003cp\u003e''' \u003cbr /\u003e\nCreated on 2023-08-13 \u003cbr /\u003e\n\u003ca rel=\"nofollow noopener noreferrer\" href=\"https://github.com/author\"\u003e@author\u003c/a\u003e: 北京-宏哥 QQ交流群：705269076 \u003cbr /\u003e\n公众号：北京宏哥 \u003cbr /\u003e\nProject: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe \u003cbr /\u003e\n'''\u003c/p\u003e\n\u003ch1 id=\"3导入模块-5\"\u003e3.导入模块\u003c/h1\u003e\n\u003cp\u003efrom playwright.sync_api import sync_playwright\u003c/p\u003e\n\u003cp\u003ewith sync_playwright() as p: \u003cbr /\u003e\n browser = p.chromium.launch(headless=False) \u003cbr /\u003e\n page = browser.new_page() \u003cbr /\u003e\n page.goto(\"C:/Users/DELL/Desktop/test/iframe/index.html\") \u003cbr /\u003e\n # name 属性定位 \u003cbr /\u003e\n frame = page.frame(name=\"frameA\") \u003cbr /\u003e\n print(frame) \u003cbr /\u003e\n browser.close()\u003c/p\u003e\n\u003cp\u003ec.运行代码控制台输出，如下图所示：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/3152d74e-3efb-4fa2-8aca-f2d9a507609f.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch4 id=\"62url属性定位iframe\"\u003e6.2url属性定位iframe\u003c/h4\u003e\n\u003cp\u003eurl属性的值，就是我们看到页面上的src属性，可以支持模糊匹配。\u003c/p\u003e\n\u003cp\u003ea.宏哥偶然发现一个在线的免费的demo网址：\u003ca rel=\"nofollow noopener noreferrer\" href=\"https://sahitest.com/demo\"\u003ehttps://sahitest.com/demo\u003c/a\u003e\u0026nbsp;很好用，今天就使用它来讲解定位frame。如下图所示：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/438d7069-a256-4b5a-9ae3-1d21219acad7.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003eb.参考代码，如下：\u003c/p\u003e\n\u003cp\u003e# coding=utf-8\u003c/p\u003e\n\u003ch1 id=\"1先设置编码，utf-8可支持中英文，如上，一般放在第一行-6\"\u003e1.先设置编码，utf-8可支持中英文，如上，一般放在第一行\u003c/h1\u003e\n\u003ch1 id=\"2注释：包括记录创建时间，创建人，项目名称。-6\"\u003e2.注释：包括记录创建时间，创建人，项目名称。\u003c/h1\u003e\n\u003cp\u003e''' \u003cbr /\u003e\nCreated on 2023-08-13 \u003cbr /\u003e\n\u003ca rel=\"nofollow noopener noreferrer\" href=\"https://github.com/author\"\u003e@author\u003c/a\u003e: 北京-宏哥 QQ交流群：705269076 \u003cbr /\u003e\n公众号：北京宏哥 \u003cbr /\u003e\nProject: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe \u003cbr /\u003e\n'''\u003c/p\u003e\n\u003ch1 id=\"3导入模块-6\"\u003e3.导入模块\u003c/h1\u003e\n\u003cp\u003efrom playwright.sync_api import sync_playwright\u003c/p\u003e\n\u003cp\u003ewith sync_playwright() as p: \u003cbr /\u003e\n browser = p.chromium.launch(headless=False) \u003cbr /\u003e\n page = browser.new_page() \u003cbr /\u003e\n page.goto(\"https://sahitest.com/demo/framesTest.htm\") \u003cbr /\u003e\n # name 属性定位 \u003cbr /\u003e\n frame = page.frame(url=\"index.htm\") \u003cbr /\u003e\n print(frame) \u003cbr /\u003e\n browser.close()\u003c/p\u003e\n\u003cp\u003ec.运行代码控制台输出，如下图所示：\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2308/786bfe8d-ff06-4bc6-9238-d638551fe7c7.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch3 id=\"7pageframe_locatorselector\"\u003e7.page.frame_locator(selector)\u003c/h3\u003e\n\u003cp\u003e这个前边已经详细介绍过了，宏哥就是在这里总结一下，具体使用方法可以查看前边的iframe文章。\u003c/p\u003e\n\u003ch4 id=\"71基本语法\"\u003e7.1基本语法\u003c/h4\u003e\n\u003cp\u003epage.frame_locator(selector)\u003c/p\u003e\n\u003ch4 id=\"72使用示例\"\u003e7.2使用示例\u003c/h4\u003e\n\u003cp\u003e1.使用示例，可以直接定位到frame对象，继续定位元素操作\u003c/p\u003e\n\u003cp\u003e# 直接定位输入 \u003cbr /\u003e\npage.frame_locator('[name=\"top\"]').locator(\"#username\").fill('北京-宏哥') \u003cbr /\u003e\npage.frame_locator('[name=\"top\"]').locator(\"#password\").fill('123456')\u003c/p\u003e\n\u003cp\u003e2.或者先定位到iframe对象，再通过frame对象操作，只需要定位到frame 对象，后面的元素定位操作都基本一样了。\u003c/p\u003e\n\u003cp\u003e# frame 对象操作 \u003cbr /\u003e\nframe = page.frame_locator('[name=\"top\"]') \u003cbr /\u003e\nframe.locator(\"#username\").fill('北京-宏哥') \u003cbr /\u003e\nframe.locator(\"#password\").fill('123456')\u003c/p\u003e\n\u003cp\u003e3.也可以通过先定位外层的元素，再定位到frame对象，使用基本语法\u003c/p\u003e\n\u003cp\u003epage.locator(selector).frame_locator(selector)\u003c/p\u003e\n\u003ch3 id=\"8不常用的方法\"\u003e8.不常用的方法\u003c/h3\u003e\n\u003cp\u003e\u003cstrong\u003epage.query_selector(selector).content_frame() 方法\u003c/strong\u003e 是一个不太常用的方法，使用page.query_selector(selector)元素句柄的方式定位到iframe，然后使用content_frame() 方法切换到iframe对象上\u003c/p\u003e\n\u003cp\u003e语法规则：\u003c/p\u003e\n\u003cp\u003epage.query_selector(selector).content_frame()\u003c/p\u003e\n\u003ch4 id=\"81使用示例\"\u003e8.1使用示例\u003c/h4\u003e\n\u003cp\u003e# query_selector 方法 \u003cbr /\u003e\niframe = page.query_selector('[src=\"down.html\"]').content_frame() \u003cbr /\u003e\nprint(iframe)\u003c/p\u003e\n\u003ch3 id=\"9小结\"\u003e9.小结\u003c/h3\u003e\n\u003cp\u003e今天主要是对前边的iframe的相关知识做了一个总结以便更好地使用和学习。\u0026nbsp; 好了，时间不早了，关于标签操作宏哥就今天就分享到这里。感谢你耐心地阅读。\u003c/p\u003e"},"seo":{"title":"《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe-下篇","description":"1.简介\n通过前边两篇的学习，想必大家已经对iframe有了一定的认识和了解，今天这一篇主要是对iframe做一个总结，主要从iframe的操作（输入框、点击等等）和定位两个方面进行总结。\n2.iframe是什么？\niframe 简单来说就是一个 html 嵌套了另外一个 html。在页面元素上最简单的识别方法，就是看你需要定位的元素外层有没有iframe的标签名称。\niframe就是我们常用的i","image":"https://article.cdnof.com/2308/dc79e6ef-249b-4111-aab6-699b3c992da1.png","url":"https://v2as.com/article/0ca6dbba-6093-4353-b203-3ea1efcd465a","keywords":["frame","page","iframe","playwright","宏哥","browser","sync","定位","selector","locator"]},"viewsCount":1,"promotionList":[{"title":"阿里云服务器","image":"https://article.cdnof.com/promotion/aliyun.jpg","link":"https://qd.rs/aliyun"},{"title":"腾讯云服务器","image":"https://article.cdnof.com/promotion/tencent.jpg","link":"https://qd.rs/tencent"},{"title":"七牛云服务器","image":"https://article.cdnof.com/promotion/qiniu.png","link":"https://qd.rs/qiniu"}],"similarKeywordsList":[{"article_id":"a42ecb70-706f-47d1-8ce5-8d64a9ee99ba","title":"《最新出炉》系列初窥篇-Python+Playwright自动化测试-14-playwright操作iframe-番外篇","link":"","description":"1.简介\n通过前边三篇的学习，想必大家已经对iframe有了一定的认识和了解，今天这一篇主要是对iframe的一些特殊情况的介绍和讲解，主要从iframe的定位、监听事件和执行js脚本三个方面进行展开介绍。\n2.iframe定位\n2.1动态id属性如何定位\n有时候，我们可能看到的iframe 的id不是固定的，是动态的一个id, 每次刷新，它的值都不一样（一般前面一部分是固定的），而且它的刚好又没","image":"https://article.cdnof.com/2308/d0c5fe66-0374-4a1a-810f-dd10b12c90cb.png","keywords":["iframe","page","frame","番外篇","playwright","宏哥","js","python","代码","locator"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"e1bdb708-ea49-42a8-96ca-a3fa9d950227","title":"Cookies 完全指南","link":"","description":"我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。\n本文作者：佳岚\n前言\nCookie实际上是一小段的文本信息，它产生的原因是由于HTTP 协议是无状态的，所以需要通过 Cookie 来维持客户端与服务端之间的“会话状态”。如网络购物，能够在不同页面记录购物车信息，或者在网站不同页面共享登录状态。\nCookie 的基本","image":"https://article.cdnof.com/2308/73a5e842-5144-4ad8-8241-52fb943ab72a.png","keywords":["Cookie","com","baidu","https","域名","Domain","浏览器","www","example","Path"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"99134c88-25ff-44d9-8c88-4351248a6cf2","title":"《最新出炉》系列初窥篇-Python+Playwright自动化测试-12-playwright操作iframe-中篇","link":"","description":"1.简介\n按照计划今天就要用实际的例子进行iframe自动化测试。经过宏哥长时间的查找，终于找到了一个含有iframe的网页（QQ邮箱和163邮箱），别的邮箱宏哥就没有细看了。所以今天这一篇的主要内容就是用这两个网页的iframe结合上一篇的理论知识，宏哥给小伙伴或者童鞋们演示一下。\n2.QQ邮箱\n2.1iframe\nF12查看HTML元素可以发现iframe，如下图所示：\n\n2.2代码设计\n\n2","image":"https://article.cdnof.com/2308/dd218a62-aadb-4678-b751-41c42f3643d3.png","keywords":["iframe","frame","playwright","Python","locator","page","宏哥","Playwright","定位","context"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"eccb5240-1e89-4d0a-851c-1f040f78be90","title":"《最新出炉》系列初窥篇-Python+Playwright自动化测试-11-playwright操作iframe-上篇","link":"","description":"1.简介\n原估计宏哥这里就不对iframe这个知识点做介绍和讲解了，因为前边的窗口切换就为这种网页处理提供了思路，另一个原因就是虽然iframe很强大，但是现在很少有网站用它了。但是还是有小伙伴或者童鞋们私下问这个问题，那么宏哥就单独写一篇关于iframe网页处理的文章。iframe 是web自动化里面一个比较头疼的测试场景，在Selenium中处理 iframe 需要切换来切换去非常麻烦。但是在","image":"https://article.cdnof.com/2308/8409ed90-195a-4c3b-b889-c455518281ef.png","keywords":["iframe","frame","locator","page","playwright","id","Python","html","text","元素"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"612bf286-9ae8-4743-afaa-cca68e7da09e","title":"seleniumUI自动化学习记录","link":"","description":"2019.2.9\n尝试了一个启动浏览器并打开指定网址的程序：\n这里首先要注意的就是浏览器的版本和selenium jar包的版本必须符合才行，不然会报错\n2019.9.16\n必须要下载相应的chromedriver.exe放在eclipse工作空间，相应项目的根目录下，chromedriver下载地址：http://chromedriver.storage.googleapis.com/index","image":"https://article.cdnof.com/2307/6b813535-bf34-46e7-b73d-bd270a42d04b.png","keywords":["控件","driver","页面","exe","点击","iframe","div","UWP","https","元素"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"8996f3dc-0a05-4044-bf8c-f5ddecb625e7","title":"【PUPPETEER】初探之原生frame切换（四）","link":"","description":"一、知识点\npage.frames()\n使用frame.url() 获取framed的url\nx.getAttribute('x') 获取元素内值\n二、实例\n 问：什么是iframe？\n 答：iframe 元素会创建包含另外一个文档的内联框架（即行内框架），我们经常会遇到登入页面的时候，这个时候我们直接定位到iframe里的元素是无效的，相当于我们要切换到相应的iframe,我们才能找到对应的","image":"https://article.cdnof.com/2307/7e354084-756d-4c94-9956-c94ffdbbac4c.png","keywords":["await","frame","page","iframe","url","切换","原生","const","frames","页面"],"created_at":"0001-01-01T00:00:00Z"},{"article_id":"a36589ef-6941-4854-ae3e-67e6efa3759c","title":"Puppeteer学习笔记 （1）- 什么是Puppeteer","link":"","description":"本文链接：https://www.cnblogs.com/hchengmx/p/11006263.html\n\n在介绍puppeteer之前必须介绍一下phantomjs，phantomjs是一个可以用JavaScript编程的无头浏览器，它在后端使用了QtWebKit。\n但是根据 https://github.com/ariya/phantomjs/issues/15344\n由于缺乏有效的贡献，我","image":"https://article.cdnof.com/2307/cb87b62a-81e5-470f-9cc4-a12fc774b12c.jpg","keywords":["puppeteer","笔记","编程","学习","Puppeteer","webpack","1.","JAVA","c#","使用"],"created_at":"0001-01-01T00:00:00Z"}]},"__N_SSG":true},"page":"/article/[article_id]","query":{"article_id":"0ca6dbba-6093-4353-b203-3ea1efcd465a"},"buildId":"7EtL49Y65E8zx1NwcIC_o","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>