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

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

news 2026/4/10 8:37:03

一个页面可以附加一个或多个 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

如何通过SMUDebugTool精细调校AMD Ryzen处理器性能

如何通过SMUDebugTool精细调校AMD Ryzen处理器性能 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gitcode.com/gh_m…...

编程新知 2026/4/10 8:31:49

Flutter应用安全保护：代码混淆的重要性与Android/iOS混淆步骤详解

前言 本文将会和大家说下保护代码的重要性&#xff0c;和如何给程序加上混淆编译功能。 尽可能的不要在你的程序中写死各种服务秘钥&#xff0c;比如 oss 容易被盗用。 参考 https://docs.flutter.dev/deployment/obfuscatehttps://www.guardsquare.com/blog/obstacles-in-…...

编程新知 2026/4/10 7:37:38

单调队列优化多重背包 学习笔记 详解蔷

背景 StreamJsonRpc 是微软官方维护的用于 .NET 和 TypeScript 的 JSON-RPC 通信库&#xff0c;以其强大的类型安全、自动代理生成和成熟的异常处理机制著称。在 HagiCode 项目中&#xff0c;为了通过 ACP (Agent Communication Protocol) 与外部 AI 工具&#xff08;如 iflow …...

编程新知 2026/4/10 7:16:29

别再吹牛了，% Vibe Coding 存在无法自洽的逻辑漏洞！诼

简介 langchain中提供的chain链组件&#xff0c;能够帮助我门快速的实现各个组件的流水线式的调用&#xff0c;和模型的问答 Chain链的组成 根据查阅的资料&#xff0c;langchain的chain链结构如下&#xff1a; $$Input \rightarrow Prompt \rightarrow Model \rightarrow Outp…...

编程新知 2026/4/10 7:01:53

RV3028-C7超低功耗RTC深度解析：UNIX时间戳与温度补偿实现

1. RV3028-C7 实时时钟模块深度技术解析RV-3028-C7 是一款面向超低功耗、高可靠性嵌入式应用的SMT封装实时时钟&#xff08;RTC&#xff09;模块。其核心价值不仅在于提供基础的时间保持功能&#xff0c;更在于将高精度时钟源、智能电源管理、非易失性配置存储与事件时间戳能力…...

编程新知 2026/4/10 5:06:14

机械设计行业SolidWorks许可证资源池化共享分点方案

SolidWorks许可证资源池化共享&#xff0c;真的不光是“打游戏占号”你是不光是也总归撞上这种场景&#xff1f;项目上线前一晚&#xff0c;全部工程师全在争抢SolidWorks许可证&#xff0c;结果有人抢到了&#xff0c;有人还要靠“临时借”拿个“邮件恳求”的结果。可你抬头看…...

编程新知 2026/4/10 5:02:14

游戏洞察力 | 为什么塔防游戏总能赚钱？从玩法设计看品类底层逻辑

在上一篇内容中&#xff0c;我们深入剖析了塔防游戏的商业价值核心&#xff0c;发现其凭借低门槛、高覆盖的用户基础、可深度挖掘的策略空间以及强兼容的玩法框架&#xff0c;成为天然适配广告变现的优质手游品类&#xff0c;也理解了这一经典品类能够长期稳居市场的底层逻辑。…...

编程新知 2026/4/10 4:18:24

10分钟搞懂 RAG：大模型如何边检索边生成答案

幻觉&#xff08;Hallucination&#xff09;很多人第一次用大模型时&#xff0c;都会有一种感觉&#xff1a;它好像什么都懂&#xff0c;什么都能答。但真把它放到实际场景里&#xff0c;很快就会发现问题没有那么简单。比如你去问公司的报销规则、某个项目的最新文档内容&…...

编程新知 2026/4/10 4:16:16

二极管保护电路设计与应用指南

1. 项目概述&#xff1a;二极管保护电路的必要性 在电子电路实验中&#xff0c;线圈类负载&#xff08;如继电器、电磁阀、电机绕组&#xff09;突然断电时产生的反向电动势&#xff0c;一直是工程师们头疼的问题。这种瞬间高压轻则导致触点火花缩短器件寿命&#xff0c;重则直…...

编程新知 2026/4/10 3:47:30

Boost搜索引擎：正倒排索引实战解析

基于正倒排索引的Boost搜索引擎项目日志、Server代码及详解在本项目中&#xff0c;我们构建了一个高效的搜索引擎&#xff0c;使用正排索引和倒排索引技术&#xff0c;基于C和Boost库实现。正排索引存储文档ID到文档内容的映射&#xff0c;便于快速检索文档内容&#xff1b;倒排…...

编程新知 2026/4/9 23:52:31