🔥《刚刚问世》系列初窥篇-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中进行对应的操作,如果定位不到,就不可能操作其内部的元素。好了,时间不早了,今天就分享到这里,感谢您耐心的阅读!!!

相关推荐
用户380225859824几秒前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
烛阴6 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干9 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗11 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
云动雨颤13 分钟前
Java并发性能优化|读写锁与互斥锁解析
java
独立开阀者_FwtCoder16 分钟前
URL地址末尾加不加 "/" 有什么区别
前端·javascript·github
独立开阀者_FwtCoder19 分钟前
Vue3 新特性:原来watch 也能“暂停”和“恢复”了!
前端·javascript·github
snakeshe101020 分钟前
优化 Mini React:实现组件级别的精准更新
前端
前端小盆友21 分钟前
从零实现一个GPT 【React + Express】--- 【2】实现对话流和停止生成
前端·gpt·react.js
ldj202026 分钟前
Centos 安装Jenkins
java·linux