16- iframe操作-监听事件和执行js脚本（详细教程）

诉称 · 6 天前

1.简介

前边主要讲解和分享了一下iframe的基础知识，以及一些常见的定位方法，最后进行了一下总结。今天主要来讲解和分享一下如何监听iframe上的事件和在iframe上如何执行JavaScript脚本代码。好了废话不多说，直接进入今天的主题。
2.Dialog

Dialog介绍官方API的文档地址：对话框 |Playwright Java
语法如下：

import com.microsoft.playwright.*; public class Example { public static void main(String[] args) { try (Playwright playwright = Playwright.create()) { BrowserType chromium = playwright.chromium(); Browser browser = chromium.launch(); Page page = browser.newPage(); page.onDialog(dialog -> { System.out.println(dialog.message()); dialog.dismiss(); }); page.evaluate("alert('1')"); browser.close(); } } }

复制代码

敲黑板！！！注意：对话框会自动关闭，除非有 Page.onDialog（handler）侦听器。当侦听器存在时，它必须 Dialog.accept（）或 Dialog.dismiss（）确定或者取消对话框 - 否则页面将冻结等待对话框，并且单击等操作将永远不会完成。
3.监听iframe上的事件

iframe的事件可以通过page对象直接监听到。如下图所示：

3.1代码设计

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自动化测试-16- iframe操作-监听事件和执行js脚本（详细教程）草稿 * * 2024年9月15日 */ public class Test_Dialog { 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("E:/Desktop/test/iframe/index.html"); page.onDialog(dialog -> { System.out.println(dialog.message()); dialog.accept(); }); //一层一层定位 FrameLocator frame = page.frameLocator("#frameA"); frame.locator("#alert").click(); System.out.println("Test Pass"); //关闭page page.close(); //关闭browser browser.close(); } } }

复制代码

3.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作。如下图所示：

3.宏哥将这段代码dialog.accept();注释后，看看会不会出现敲黑板的情况（页面将冻结等待对话框，并且单击等操作将永远不会完成），如下图所示：

4.执行js脚本

4.1在page对象执行js脚本

使用page.evaluate(js代码)方法可以直接在page对象上执行JavasScript 代码。
4.1.1代码设计

4.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.Page; import com.microsoft.playwright.Playwright; /** * @author 北京-宏哥 * * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货） * * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-16- iframe操作-监听事件和执行js脚本（详细教程）草稿 * * 2024年9月15日 */ public class Test_Dialog { 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(); page.onDialog(dialog -> { System.out.println(dialog.message()); dialog.accept(); }); page.evaluate("alert('Hello 北京-宏哥')"); System.out.println("Test Pass"); //关闭page page.close(); //关闭browser browser.close(); } } }

复制代码

4.1.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作。如下图所示：

3.宏哥将这段代码dialog.accept();注释后，看看会不会出现敲黑板的情况（页面将冻结等待对话框，并且单击等操作将永远不会完成），如下图所示：

5.在iframe上执行js脚本

在iframe上执行JavaScript代码，需在iframe对象上执行。例如：在iframe的input中输入“北京-宏哥”，如下图所示：

5.1代码设计

5.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自动化测试-16- iframe操作-监听事件和执行js脚本（详细教程）草稿 * * 2024年9月15日 */ public class Test_Dialog { 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("E:/Desktop/test/iframe/index.html"); //定位到要操作的iframe Frame frame = page.frame("frameA"); //执行js 给iframe的输入框输入内容 String js = "document.getElementById('iframeinput').value='北京-宏哥';"; frame.evaluate(js); page.pause(); System.out.println("Test Pass"); //关闭page page.close(); //关闭browser browser.close(); } } }

复制代码

5.3运行代码

1.运行代码，右键Run As->Java Application，就可以看到控制台输出，如下图所示：

2.运行代码后电脑端的浏览器的动作（为了看清楚输入的内容，宏哥这里加了debug的代码段：page.pause();）。如下图所示：

6.小结

今天主要讲解和分享了一下iframe的监听事件和执行js脚本。其实也是运用了前边讲解的iframe定位方法，首先定位到iframe后，才能在iframe中进行对应的操作，如果定位不到，就不可能操作其内部的元素。好了，时间不早了，今天就分享到这里，感谢您耐心的阅读！！！
公众号(关注宏哥) 微信群(扫码进群) 客服微信

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

16- iframe操作-监听事件和执行js脚本 （详细教程）

签约作者

16- iframe操作-监听事件和执行js脚本（详细教程）