《刚刚问世》系列初窥篇-Java+Playwright自动化测试-13- iframe操作-中篇（详细教程）

1.简介

按照计划今天就要用实际的例子进行iframe自动化测试。宏哥还是用之前找到的一个含有iframe的网页（QQ邮箱和163邮箱），别的邮箱宏哥就没有细看了，可能后期这两个邮箱页面优化升级，也就不能用了，但是现在还可以用。所以今天这一篇的主要内容就是用这两个网页的iframe结合上一篇的理论知识，宏哥给小伙伴或者童鞋们演示一下。

2.QQ邮箱

2.1iframe

F12查看HTML元素可以发现iframe，如下图所示：

2.2代码设计

2.3参考代码

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.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

/**
 * @author 北京-宏哥
 *
 * @公众号:北京宏哥（微信搜索，关注宏哥，提前解锁更多测试干货）
 *
 * 《刚刚问世》系列初窥篇-Java+Playwright自动化测试-12- iframe操作-上篇（详细教程）
 *
 * 2024年8月31日
 */
public class Test_frame {

    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("https://mail.qq.com/");
          System.out.println(page.title());

          // 点击QQ登录
          page.locator("#QQMailSdkTool_login_loginBox_tab_item_qq").click();
          // 定位 frame 上的元素
          FrameLocator  locator  = page.frameLocator("[class='QQMailSdkTool_login_loginBox_qq_iframe']").frameLocator("#ptlogin_iframe");
          locator.locator("#switcher_plogin").click();
          locator.locator("#u").fill("北京-宏哥");
          locator.locator("#p").fill("123456");
          locator.locator("#login_button").click();

          System.out.println("Test Pass");

          //关闭page
          page.close();
          //关闭browser
          browser.close();
        }
      }
}

2.4运行代码

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

2.运行代码后电脑端的浏览器的动作（为了演示宏哥这里输入了错误的，如果正确，就直接登录邮箱成功）。如下图所示：

3.163邮箱

3.1iframe

同理F12查看HTML元素可以发现iframe，如下图所示：

3.2代码设计

由于iframe 元素 id 属性是动态可变的id="x-URS-iframe1676960382133.3657" 可以使用xpath的contains 模糊匹配，或者css的正则匹配来对其进行定位。

3.3参考代码

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自动化测试-12- iframe操作-中篇（详细教程）
 *
 * 2024年8月31日
 */
public class Test_frame {

    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("https://mail.163.com");
          System.out.println(page.title());
          //xpath 模糊匹配
          FrameLocator  frame = page.frameLocator("//iframe[contains(@id, 'x-URS-iframe')]");
          frame.locator("[name='email']").fill("北京-宏哥");
          frame.locator("[name='password']").fill("123456");
          frame.locator("#dologin").click();
          System.out.println("Test Pass");

          //关闭page
          page.close();
          //关闭browser
          browser.close();
        }
      }
}

3.4运行代码

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

2.运行代码后电脑端的浏览器的动作（为了演示宏哥这里输入了错误的，如果正确，就直接登录邮箱成功）。如下图所示：

4.小结

1.在Web UI自动化的测试中，如果一个元素定位不到，那么最大的可能定位的元素属性是在 iframe 框架中，iframe 是 html 中的框架，在 html 中，所谓框架就是可以在同一个浏览器窗口中显示不止一个页面,对不同页面进行嵌套。顺着定位元素往上找，查看是否有<iframe>标签，找到说明要定位此元素，需先定位到元素所在的iframe，然后再定位元素。

2.frame标签有frameset、frame、iframe三种，frameset跟其他普通标签没有区别，不会影响到正常的定位，而frame与iframe对Playwright定位而言是一样的，Playwright有一组方法对frame进行操作。

3.通常采用id和name就能够解决绝大多数问题。但有时候frame并无这两项属性，则可以用index和WebElement来定位：

　　index从0开始，传入整型参数即判定为用index定位，传入str参数则判定为用id/name定位

　　WebElement对象，即用frame_locator系列方法所取得的对象，我们可以用tag_name、xpath等来定位frame对象

好了，时间不早了，今天就分享和讲解到这里，感谢大家耐心的阅读，喜欢宏哥的，别忘记在文章末尾支持一下。