🔥《刚刚问世》系列初窥篇-Java+Playwright自动化测试-16- iframe操作-监听事件和执行js脚本 (详细教程)

1.简介

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

2.Dialog

Dialog介绍官方API的文档地址:对话框 |Playwright Java

语法如下:

ini 复制代码
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参考代码

ini 复制代码
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脚本 (详细教程) 草稿
 *
 * 2025年06月05日
 */
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参考代码

ini 复制代码
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脚本 (详细教程) 草稿
 *
 * 2025年06月05日
 */
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参考代码

ini 复制代码
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脚本 (详细教程) 草稿
 *
 * 2025年06月05日
 */
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中进行对应的操作,如果定位不到,就不可能操作其内部的元素。好了,时间不早了,今天就分享到这里,感谢您耐心的阅读!!!

相关推荐
Danny_FD9 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
空影学Java13 分钟前
Day44 Java数组08 冒泡排序
java
gnip13 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript
斐济岛上有一只斐济19 分钟前
后端程序员的CSS复习
前端
Enddme22 分钟前
《面试必问!JavaScript 中this 全方位避坑指南 (含高频题解析)》
前端·javascript·面试
有梦想的程序员23 分钟前
微信小程序使用 Tailwind CSS version 3
前端
追风少年浪子彦42 分钟前
mybatis-plus实体类主键生成策略
java·数据库·spring·mybatis·mybatis-plus
溟洵1 小时前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户2519162427111 小时前
Canvas之图像合成
前端·javascript·canvas
每天开心1 小时前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架