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

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

news 2025/7/15 3:39:27

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/7/13 16:37:50

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2025/7/11 7:55:15

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/6/18 19:00:20

P3 QT项目----记事本（3.8）

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

编程新知 2025/7/12 22:52:28

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/7/9 6:14:15

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/7/9 11:32:02

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/7/9 6:12:46

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/7/9 14:50:22

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/7/10 21:05:16

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19