《刚刚问世》系列初窥篇-Java+Playwright自动化测试-15- iframe操作--番外篇 （详细教程）

北京-宏哥2025-02-14 13:37

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 以 value 开头的元素 |
| $('[name$="end"]') | 匹配 name 以 end 结尾的元素 |
| $('[class*="text"]') | 匹配class属性包含text的元素 |

2.参考代码：

复制代码 
// css 正则匹配属性
FrameLocator frame = page.frameLocator("[id^='x-URS-iframe']");
System.out.println(frame);
frame.locator("[id^='auto-id-']").nth(1).fill("北京-宏哥");
2.1.2第二种方法

使用xpath的contains 包含属性。参考代码：

复制代码 
// xpath的contains 包含属性
FrameLocator frame = page.frameLocator("//*[contains(@id, 'x-URS-iframe')]");
System.out.println(frame);
frame.locator("//*[contains(@id, 'auto-id-')]").nth(1).fill("北京-宏哥");

2.2两层iframe如何定位

1.两层iframe，顾名思义是：iframe下嵌套另外一个iframe。解决办法没什么技巧，一层一层定位即可。多层也是类似的方法。例如：宏哥前边讲解的QQ邮箱的iframe就有个2层的iframe。如下图所示：

2.参考代码：

复制代码 
// 一层一层定位定位frame
FrameLocator frame = page.frameLocator("[class='QQMailSdkTool_login_loginBox_qq_iframe']").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("[id^='x-URS-iframe']");
          System.out.println(frame);
          frame.locator("[id^='auto-id-']").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("//*[contains(@id, 'x-URS-iframe')]");
          System.out.println(frame);
          frame.locator("//*[contains(@id, 'auto-id-')]").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("[class='QQMailSdkTool_login_loginBox_qq_iframe']").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操作宏哥就今天就分享到这里。感谢你耐心地阅读。

热门推荐
01本地部署DeepSeek教程（Mac版本）02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05DeepSeek各版本说明与优缺点分析06DeepSeek r1本地安装全指南07本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09在Windows下安装Ollama并体验DeepSeek r1大模型10Page Assist - 本地Deepseek模型 Web UI 的安装和使用