《刚刚问世》系列初窥篇-Java+Playwright自动化测试-15- iframe操作--番外篇 （详细教程）
1.简介通过前边三篇的学习，想必大家已经对iframe有了一定的认识和了解，今天这一篇主要是对iframe的一些特殊情况的介绍和讲解，主要从iframe的定位、监听事件和执行js脚本三个方面进行展开介绍。
2.iframe定位
2.1动态id属性如何定位
有时候，我们可能看到的iframe 的id不是固定的，是动态的一个id, 每次刷新，它的值都不一样（一般前面一部分是固定的），而且它的刚好又没有name属性。例如：宏哥前边讲解的163邮箱的iframe的id就是动态的。如下图所示：
像上图所示的这种动态的id，如何定位了，宏哥在这里讲解两种比较常用的方法，当然了可能有比宏哥更好的方法，欢迎留言讨论。
2.1.1第一种方法
1.可以用css的正则匹配元素属性,如下表所示：
语法
描述
$('')
匹配 name 以 value 开头的元素
$('')
匹配 name 以 end 结尾的元素
$('')
匹配class属性包含text的元素
2.参考代码：
// css 正则匹配属性FrameLocator frame = page.frameLocator("");System.out.println(frame);frame.locator("").nth(1).fill("北京-宏哥");
2.1.2第二种方法
使用xpath的contains 包含属性。参考代码：
// xpath的contains 包含属性FrameLocator frame = page.frameLocator("//*");System.out.println(frame);frame.locator("//*").nth(1).fill("北京-宏哥");
2.2两层iframe如何定位
1.两层iframe，顾名思义是：iframe下嵌套另外一个iframe。解决办法没什么技巧，一层一层定位即可。多层也是类似的方法。例如：宏哥前边讲解的QQ邮箱的iframe就有个2层的iframe。如下图所示：
2.参考代码：
// 一层一层定位定位frameFrameLocator frame = page.frameLocator("").frameLocator("#ptlogin_iframe");//点击密码登录frame.locator("#switcher_plogin").click();frame.locator("#u").fill("北京-宏哥");frame.locator("#p").fill("123456");frame.locator("#login_button").click();
3.趁热打铁
趁着宏哥讲解完了，大家还有一些记忆，然后宏哥就利用实例演示一下前边介绍的几种frame的定位方法。
3.1css的正则匹配元素属性
以163邮箱为例进行实战如下：
3.1.1代码设计
3.1.2参考代码
package com.bjhg.playwright;import com.microsoft.playwright.Browser;import com.microsoft.playwright.BrowserContext;import com.microsoft.playwright.BrowserType;import com.microsoft.playwright.Frame;import com.microsoft.playwright.FrameLocator;import com.microsoft.playwright.Page;import com.microsoft.playwright.Playwright;/** * @author 北京-宏哥 ** @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货） ** 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-15- iframe操作-番外篇（详细教程） * * 2024年9月11日 */public class Test_frame { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。 Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000)); //2.创建context BrowserContext context = browser.newContext(); //创建page Page page = context.newPage(); //3.浏览器打开网站 page.navigate("https://mail.163.com"); //4.url定位Frame frame = page.frameByUrl(Pattern.compile(".*iframe.html.*"); //Frame frame = page.frameByUrl(Pattern.compile(".*iframe.html.*")); // css 正则匹配属性 FrameLocator frame = page.frameLocator(""); System.out.println(frame); frame.locator("").nth(1).fill("北京-宏哥"); System.out.println("Test Pass"); //关闭page page.close(); //关闭browser browser.close(); } }}
3.1.3运行代码
1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：
2.运行代码后电脑端的浏览器的动作。如下图所示：
3.2xpath的contains 包含属性
以163邮箱为例进行实战如下：
3.2.1代码设计
3.2.2参考代码
package com.bjhg.playwright;import com.microsoft.playwright.Browser;import com.microsoft.playwright.BrowserContext;import com.microsoft.playwright.BrowserType;import com.microsoft.playwright.FrameLocator;import com.microsoft.playwright.Page;import com.microsoft.playwright.Playwright;/** * @author 北京-宏哥 ** @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货） ** 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-15- iframe操作-番外篇（详细教程） * * 2024年9月11日 */public class Test_frame { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。 Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000)); //2.创建context BrowserContext context = browser.newContext(); //创建page Page page = context.newPage(); //3.浏览器打开网站 page.navigate("https://mail.163.com"); //4.url定位Frame frame = page.frameByUrl(Pattern.compile(".*iframe.html.*"); //Frame frame = page.frameByUrl(Pattern.compile(".*iframe.html.*")); // xpath的contains 包含属性 FrameLocator frame = page.frameLocator("//*"); System.out.println(frame); frame.locator("//*").nth(1).fill("北京-宏哥"); System.out.println("Test Pass"); //关闭page page.close(); //关闭browser browser.close(); } }}
3.2.3运行代码
1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：
2.运行代码后电脑端的浏览器的动作。如下图所示：
3.3两层iframe定位
以QQ邮箱为例进行实战如下：
3.3.1代码设计
3.3.2参考代码
package com.bjhg.playwright;import com.microsoft.playwright.Browser;import com.microsoft.playwright.BrowserContext;import com.microsoft.playwright.BrowserType;import com.microsoft.playwright.FrameLocator;import com.microsoft.playwright.Page;import com.microsoft.playwright.Playwright;/** * @author 北京-宏哥 ** @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货） ** 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-15- iframe操作-番外篇（详细教程） * * 2024年9月11日 */public class Test_frame { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { //1.使用chromium浏览器，# 浏览器配置，设置以GUI模式启动Chrome浏览器（要查看浏览器UI，在启动浏览器时传递 headless=false 标志。您还可以使用 slowMo 来减慢执行速度。 Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false).setSlowMo(3000)); //2.创建context BrowserContext context = browser.newContext(); //创建page Page page = context.newPage(); //3.浏览器打开网站 page.navigate("https://mail.qq.com/"); //4.url定位Frame frame = page.frameByUrl(Pattern.compile(".*iframe.html.*"); //Frame frame = page.frameByUrl(Pattern.compile(".*iframe.html.*")); // 一层一层定位定位frame FrameLocator frame = page.frameLocator("").frameLocator("#ptlogin_iframe"); //点击密码登录 frame.locator("#switcher_plogin").click(); frame.locator("#u").fill("北京-宏哥"); frame.locator("#p").fill("123456"); frame.locator("#login_button").click(); System.out.println("Test Pass"); //关闭page page.close(); //关闭browser browser.close(); } }}
3.3.3运行代码
1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：
2.运行代码后电脑端的浏览器的动作。如下图所示：
4.小结
今天主要是对前边的iframe的相关知识做了一个总结以便小伙伴或者童鞋们更好地使用和学习。 前边两种定位宏哥感觉像是模糊匹配到好多个元素，然后利用顺序定位（nth）定位到自己想要的元素，切记序号是从0开始计数的噢！ 好了，时间不早了，关于iframe操作宏哥就今天就分享到这里。感谢你耐心地阅读。
页:
[1]