《刚刚问世》系列初窥篇-Java+Playwright自动化测试-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对象直接监听到。如下图所示：

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中进行对应的操作，如果定位不到，就不可能操作其内部的元素。好了，时间不早了，今天就分享到这里，感谢您耐心的阅读！！！