16- iframe操作-监听事件和执行js脚本 （详细教程）
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对象直接监听到。如下图所示：
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909105401662-1606034554.png
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909105418756-1926217989.gif
3.1代码设计
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909140507499-98264223.png
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，就可以看到控制台输出，如下图所示：
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909140543335-2066184673.png
2.运行代码后电脑端的浏览器的动作。如下图所示：
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909140709645-182984588.gif
3.宏哥将这段代码dialog.accept();注释后，看看会不会出现敲黑板的情况（页面将冻结等待对话框，并且单击等操作将永远不会完成），如下图所示：
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909140931047-1461353350.gif
4.执行js脚本
4.1在page对象执行js脚本
使用page.evaluate(js代码)方法可以直接在page对象上执行JavasScript 代码。
4.1.1代码设计
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909134838386-1751388815.png
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，就可以看到控制台输出，如下图所示：
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909135053449-2014835996.png
2.运行代码后电脑端的浏览器的动作。如下图所示：
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909135227552-101185222.gif
3.宏哥将这段代码dialog.accept();注释后，看看会不会出现敲黑板的情况（页面将冻结等待对话框，并且单击等操作将永远不会完成），如下图所示：
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909135522197-420257099.gif
5.在iframe上执行js脚本
在iframe上执行JavaScript代码，需在iframe对象上执行。例如：在iframe的input中输入“北京-宏哥”，如下图所示：
https://img2023.cnblogs.com/blog/1232840/202308/1232840-20230809152336153-1154291960.png
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909105418756-1926217989.gif
5.1代码设计
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909162337009-449837145.png
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，就可以看到控制台输出，如下图所示：
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909162309726-623030847.png
2.运行代码后电脑端的浏览器的动作（为了看清楚输入的内容，宏哥这里加了debug的代码段：page.pause();）。如下图所示：
https://img2024.cnblogs.com/blog/1232840/202409/1232840-20240909163425178-160706706.gif
6.小结
今天主要讲解和分享了一下iframe的监听事件和执行js脚本。其实也是运用了前边讲解的iframe定位方法，首先定位到iframe后，才能在iframe中进行对应的操作，如果定位不到，就不可能操作其内部的元素。好了，时间不早了，今天就分享到这里，感谢您耐心的阅读！！！
公众号(关注宏哥) 微信群(扫码进群) 客服微信
https://img2018.cnblogs.com/common/1741949/201911/1741949-20191119095948011-608816619.png https://img2024.cnblogs.com/blog/1232840/202506/1232840-20250610113707419-637869921.png https://img2018.cnblogs.com/common/1741949/201911/1741949-20191106101257091-849954564.png
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]