当前位置： 首页 > news >正文

最强自动化测试框架Playwright（20）- iframe

news 2026/2/11 0:16:42

一个页面可以附加一个或多个 Frame 对象。每个页面都有一个主框架，并且假定页面级交互（如）在主框架中运行。click

frame_locator

使用 iframe 时，可以创建一个框架定位器，该定位器将进入 iframe 并允许选择该 iframe 中的元素。

# Locate element inside frame
# Get frame using any other selector
username = page.frame_locator('.frame-class').get_by_label('User Name')
username.fill('John')

上面代码，先定位frame，然后定位frame里的元素，并对元素进行输入操作。

示例：

html文件

<!DOCTYPE html>
<html>
<head><title>IFrame Example</title>
</head>
<body><h1>IFrame Example</h1><p>This is an example of using an iframe.</p><iframe src="https://pity.fun/#/dashboard/workspace" frameborder="0" width="100%" height="500"></iframe>
</body>
</html>

这个html页面有一个iframe

from playwright.sync_api import sync_playwright, expectdef run(playwright):chromium = playwright.chromiumbrowser = chromium.launch(headless=False)page = browser.new_page()page.goto(r'C:\Users\Desktop\download.html')page.frame_locator("iframe").get_by_placeholder("用户名: tester").fill("tester")page.frame_locator("iframe").get_by_placeholder("密码: tester").fill("tester")page.frame_locator("iframe").get_by_role("button", name="登 录").click()expect( page.frame_locator("iframe").get_by_title("工作台")).to_be_visible()with sync_playwright() as p:run(p)

如果要对iframe里元素进行操作，就需要先用frame_locator来定位iframe，再定位iframe里的元素。

 frame

可以使用 page.frame（） 返回匹配的frame。

需要指定frame的name或者url。

# Get frame using the frame's name attribute
frame = page.frame('frame-login')# Get frame using frame's URL
frame = page.frame(url=r'.*domain.*')# Interact with the frame
frame.fill('#username-input', 'John')

frame tree

页面都通过page.main_frame和frame.child_frames方法公开其当前框架树。

框架对象的生命周期由三个事件控制，这些事件在页面对象上调度：

  • page.on（“frameattached”） - 当框架附加到页面时触发。一个框架只能附加到页面一次。
  • page.on（“framenavigated”） - 当框架提交导航到其他 URL 时触发。
  • page.on（“framedetached”） - 当框架从页面分离时触发。一个框架只能从页面分离一次。

from playwright.sync_api import sync_playwrightdef run(playwright):firefox = playwright.firefoxbrowser = firefox.launch()page = browser.new_page()page.goto("https://www.theverge.com")dump_frame_tree(page.main_frame, "")browser.close()def dump_frame_tree(frame, indent):print(indent + frame.name + '@' + frame.url)for child in frame.child_frames:dump_frame_tree(child, indent + "    ")with sync_playwright() as playwright:run(playwright)

add_script_tag 

frame.add_script_tag() 方法在页面中添加一个脚本标签：

下面是一个例子，演示如何使用 playwright 的 `frame.add_script_tag()` 方法在页面中添加一个脚本标签：

from playwright.sync_api import Playwright, sync_playwrightwith sync_playwright() as p:browser = p.chromium.launch()page = browser.new_page()page.goto('https://www.example.com')# 在页面中添加一个脚本标签page.main_frame().add_script_tag(url='https://code.jquery.com/jquery-3.6.0.min.js')# 在页面中执行添加的脚本page.evaluate('console.log(jQuery.fn.jquery)')browser.close()

在上面的代码中，首先创建了一个 `browser` 实例和一个 `page` 实例，并跳转到指定的网址。然后使用 `page.main_frame().add_script_tag()` 方法添加了一个 jQuery 的脚本标签，这个脚本标签的 URL 是 `https://code.jquery.com/jquery-3.6.0.min.js`。最后使用 `page.evaluate()` 方法在页面上执行添加的脚本，输出了 jQuery 的版本号。

add_style_tag

在样式表的加载触发或将 CSS 内容注入框架时返回添加的标记。

将具有所需 URL 的标记或包含内容的标记添加到页面中。<link rel="stylesheet"><style type="text/css">

用法

frame.add_style_tag()
frame.add_style_tag(**kwargs)

content

获取框架的完整 HTML 内容，包括文档类型。

frame.content()

drag_and_drop

frame.drag_and_drop(source, target)
frame.drag_and_drop(source, target, **kwargs)

相关文章：

最强自动化测试框架Playwright（20）- iframe

一个页面可以附加一个或多个 Frame 对象。每个页面都有一个主框架&#xff0c;并且假定页面级交互&#xff08;如&#xff09;在主框架中运行。click frame_locator 使用 iframe 时&#xff0c;可以创建一个框架定位器&#xff0c;该定位器将进入 iframe 并允许选择该 iframe…...

编程日记 2023/8/14 20:39:38

leetcode 516. 最长回文子序列(JAVA)题解

题目链接https://leetcode.cn/problems/longest-palindromic-subsequence/description/?utm_sourceLCUS&utm_mediumip_redirect&utm_campaigntransfer2china 目录 题目描述&#xff1a; 暴力递归&#xff1a; 动态规划&#xff1a; 题目描述&#xff1a; 给你一个…...

编程日记 2023/8/14 20:38:36

在Java中操作Redis(详细--＞从环境配置到代码实现)

在Java中操作Redis 文章目录 在Java中操作Redis1、介绍2、Jedis3、Spring Data Redis3.1、对String的操作3.2、对哈希类型数据的操作3.3、对list的操作3.4、对set类型的操作3.5、对 ZSet类型的数据&#xff08;有序集合&#xff09;3.6、通用类型的操作 1、介绍 Redis 的Java客…...

编程日记 2023/8/14 20:37:34

分布式作业调度框架——ElasticJob

1、简介 ElasticJob 是面向互联网生态和海量任务的分布式调度解决方案&#xff0c;由两个相互独立的子项目 ElasticJob-Lite 和 ElasticJob-Cloud 组成。 它通过弹性调度、资源管控、以及作业治理的功能&#xff0c;打造一个适用于互联网场景的分布式调度解决方案&#xff0c;…...

编程日记 2023/8/14 20:36:33

react如何实现数据渲染

React数据渲染是指将组件中的数据映射到页面上&#xff0c;以展示出来。在React中&#xff0c;数据渲染通常是通过JSX和组件的state或props完成的。 JSX是一个类似HTML的语法&#xff0c;可以在其中嵌入JavaScript表达式。在JSX中&#xff0c;可以使用{}包裹JavaScript表达式&…...

编程日记 2023/8/14 20:35:32

在Java中如何使用List集合实现分页，以及模糊查询后分页

物理分页工具类 package com.yutu.garden.utils;import com.baomidou.mybatisplus.core.toolkit.CollectionUtils;import java.util.ArrayList; import java.util.List; import java.util.stream.Collectors;/*** ClassName: PageUtils* Description: 物理分页* Author* Date …...

编程日记 2023/8/14 20:34:29

【JAVA】包装类、正则表达式、Arrays类、Lambda表达式

1 包装类 包装类是8种基本数据类型对应的引用类型 作用&#xff1a;后期的集合和泛型不支持基本类型&#xff0c;只能使用包装类 基本数据类型和其对应的引用数据类型的变量可以互相赋值 基本数据类型引用数据类型 byte Byte short Short int Integer long Long ch…...

编程日记 2023/8/14 20:33:27

Java中的Maven Assembly插件是什么？

Maven Assembly插件是Maven中的一个插件&#xff0c;用于创建自定义的构建过程。它允许你在构建过程中执行一些自定义的操作&#xff0c;例如打包、编译、复制文件等。对于新手来说&#xff0c;Maven Assembly插件可能有点复杂&#xff0c;但是我们可以使用一些幽默的方式来解释…...

编程日记 2023/8/14 20:32:25

SpringBoot禁用Swagger3

Swagger3默认是启用的&#xff0c;即引入包就启用。 <dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter</artifactId><version>3.0.0</version> </dependency> <dependency><groupId…...

编程日记 2023/8/14 20:31:23

小红书Java后端2023-8-6笔试

小红书推荐系统 时间限制&#xff1a;3000MS&#xff1b;内存限制&#xff1a;589824KB 题目描述 小红书有一个推荐系统&#xff0c;可以根据用户搜索的关键词推荐用户希望获取的内容。现在给定小孩的搜索记录&#xff08;记录是分词后的结果&#xff09;&#xff0c;我们认…...

编程日记 2023/8/14 20:30:22

metaRTC7 demo mac/ios编译指南

概要 metaRTC7.0开始全面支持mac/ios操作系统&#xff0c;新版本7.0.023 mac os demo 包含有srs/zlm的推拉流演示。发布版自带了x64版第三方类库&#xff0c;arm版第三方类库还需开发者自己编译。 源码下载 下载文件metartc7.023.7z https://github.com/metartc/metaRTC/re…...

编程日记 2023/8/14 20:29:20

systemd-journal 占用内存的问题

最近发现部分 Debian 机器的 systemd-journal 占用了非常多内存。这和 Debian 对其的 错误配置有关系&#xff08;查了一下其他发行版&#xff0c;有和 Debian 一样的配置的也有和 Debian 不一样 的配置的&#xff0c;说明这个配置有争议&#xff09;。 systemd-journal 简介 …...

编程日记 2023/8/14 20:28:19

Java # Spring（2）

一、Spring事物 一、分类 编程式事物&#xff1a;代码中硬编码&#xff08;不推荐使用&#xff09; 声明式事物&#xff1a;配置文件中配置&#xff08;推荐使用&#xff09; 分类&#xff1a; 基于xml的声明式事物基于注解的声明式事物 二、隔离级别 ISOLATION_DEFAULT&…...

编程日记 2023/8/14 20:27:17

2021年03月 C/C++（二级）真题解析#中国电子学会#全国青少年软件编程等级考试

第1题&#xff1a;石头剪刀布 石头剪刀布是常见的猜拳游戏。石头胜剪刀&#xff0c;剪刀胜布&#xff0c;布胜石头。如果两个人出拳一样&#xff0c;则不分胜负。 一天&#xff0c;小A和小B正好在玩石头剪刀布。已知他们的出拳都是有周期性规律的&#xff0c;比如&#xff1a;“…...

编程日记 2023/8/14 20:25:13

应用程序运行报错：First section must be [net] or [network]:No such file or directory

应用程序报错环境&#xff1a; 在linux下&#xff0c;调用darknet训练的模型&#xff0c;报错&#xff1a;First section must be [net] or [network]:No such file or directory&#xff0c;并提示&#xff1a;"./src/utils.c:256: error: Assertion 0 failed." 如…...

编程日记 2023/8/14 20:24:12

【ECMAScript】ES6-ES11学习笔记

文章目录 注意事项1.声明变量2.定义常量3.解构赋值4.模板字符串5.简化对象写法6.箭头函数7.参数默认值8.rest参数9.扩展运算符10.Symbol11.生成器函数12.Promise基本语法13.集合set14.Map15.类class16.数值扩展17.对象私有属性18.对象方法扩展19.js文件模块化20.async和await21…...

编程日记 2023/8/14 20:23:09

K8S MetalLB LoadBalancer

1. 简介 kubernetes集群没有L4负载均衡&#xff0c;对外暴漏服务时&#xff0c;只能使用nodePort的方式&#xff0c;比较麻烦&#xff0c;必须要记住不同的端口号。 LoadBalancer&#xff1a;使用云提供商的负载均衡器向外部暴露服务&#xff0c;外部负载均衡器可以将流量路由…...

编程日记 2023/8/14 20:22:07

kubernetes二进制部署2之 CNI 网络组件部署

CNI 网络组件部署 一&#xff1a;K8S提供三大接口1容器运行时接口CRI2云原生网络接口CNI3云原生存储接口CSI 部署 flannelK8S 中 Pod 网络通信&#xff1a;Overlay Network&#xff1a;VXLAN&#xff1a;Flannel:Flannel udp 模式的工作原理&#xff1a;ETCD 之 Flannel 提供说…...

编程日记 2023/8/14 20:21:05

docker通用镜像方法，程序更新时不用重新构建镜像

docker通用镜像方法&#xff0c;程序更新时不用重新构建镜像。更新可执行文件后&#xff0c;重新启动容器就可运行。 功能 1、在demo目录下添加脚本文件start.sh&#xff0c;里面执行demo.jar文件。 2、将demo目录映射到镜像下的 /workspace目录。 3、Dockerfile文件中默认…...

编程日记 2023/8/14 20:20:03

Spring Cloud构建微服务断路器介绍

什么是断路器 断路器模式源于Martin Fowler的Circuit Breaker一文。“断路器”本身是一种开关装置&#xff0c;用于在电路上保护线路过载&#xff0c;当线路中有电器发生短路时&#xff0c;“断路器”能够及时的切断故障电路&#xff0c;防止发生过载、发热、甚至起火等严重后果…...

编程日记 2023/8/14 20:19:02

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2026/2/5 20:33:43

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

编程新知 2025/9/12 15:10:44

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2026/1/28 3:04:35

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2026/1/26 13:29:47