《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe-下篇

 1.简介

通过前边两篇的学习,想必大家已经对iframe有了一定的认识和了解,今天这一篇主要是对iframe做一个总结,主要从iframe的操作(输入框、点击等等)和定位两个方面进行总结。

2.iframe是什么?

iframe 简单来说就是一个 html 嵌套了另外一个 html。在页面元素上最简单的识别方法,就是看你需要定位的元素外层有没有iframe的标签名称。

iframe就是我们常用的iframe标签:<iframe>。iframe标签是框架的一种形式,也比较常用到,iframe一般用来包含别的页面,例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多,主要区别在于对iframe标签定义的形式不同,例如定义iframe的长宽高。简单的一句话概括就是:iframe 就是HTML 中,用于网页嵌套网页的。 一个网页可以嵌套到另一个网页中,可以嵌套很多层。和俄罗斯套娃差不多吧。

3.iframe定位

定位iframe 对象,总的来说有四种方法

page.frame_locator(selector) #通过page对象直接定位iframe 对象,传selector 选择器参数
page.locator(selector).frame_locator(selector) #通过page对象定位某个父元素,通过locator定位frame_locator(selector)
page.frame(name,url) #通过page对象直接定位iframe 对象,传name 或者url参数
page.query_selector(selector).content_frame() #通过query_selector方式,定位到元素,转成frame 对象

page 对象还有2个跟frame 相关的方法

page.frames #获取page对象全部iframes,包含page本身的frame对象
page.main_frame #获取page的main_frame (page对象本身也是一个frame对象)

4.iframe的层级结构

官网上写了个示例,可以快速查看iframe的层级结构,如下图所示:

 仿照官方的示例,宏哥分别来查看一下QQ邮箱和163邮箱的frame的层级结构。

4.1QQ邮箱的frame层级结构
# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-07-23
@author: 北京-宏哥   QQ交流群:705269076
公众号:北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

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 p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://mail.qq.com/")
    dump_frame_tree(page.main_frame, "")
    browser.close()

运行代码后,可以看到QQ邮箱登录页面的frame层级结构如下:

 从控制台的输出结果可以看出:QQ邮箱主页面(主页面其实也可以看成一个iframe 对象)下有3个iframe,其中最后一个iframe下又嵌套了一层iframe。(可能是由于宏哥登录QQ缘故吧)

4.2163邮箱的frame 层级结构
# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-07-23
@author: 北京-宏哥   QQ交流群:705269076
公众号:北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

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 p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://mail.163.com")
    dump_frame_tree(page.main_frame, "")
    browser.close()

运行代码后,可以看到163邮箱登录页面的frame层级结构如下:

5.获取page对象的frame对象

获取page对象的frame用到了以下3个基本方法

page.main_frame #获取page对象本身的 frame 对象
page.frames #获取page对象全部frames 包含page本身的frame对象
frame.child_frames #获取frame下的全部子 frame 对象

宏哥这里以163邮箱举例说明。

5.1代码设计

5.2参考代码
# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-07-23
@author: 北京-宏哥   QQ交流群:705269076
公众号:北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://mail.163.com/")
    print('获取page对象本身的frame对象')
    print(page.main_frame)
    print('获取page对象全部frames 包含page本身的frame对象 ')
    print(page.frames)
    print('获取page对象子frame ')
    print(page.main_frame.child_frames)
    browser.close()
5.3运行代码

1.运行代码,右键Run'Test',控制台输出,如下图所示:

从以上控制台的运行结果可以看出,iframe 对象有2个重要的属性name和url, 可以直接打印出来看看

# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-07-23
@author: 北京-宏哥   QQ交流群:705269076
公众号:北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://mail.163.com/")
    for frame in page.frames:
        print("name:"+frame.name+"| url:"+frame.url)
    browser.close()

运行代码,右键Run'Test',控制台输出,如下图所示:

从以上控制台打印结果可以看出。iframe 元素的name和url属性,都会被作为那么属性打印出来,如果2个属性都没有,那么获取的name属性为空字符。

6.page.frame(name,url) 的使用

page.frame 和 page.frame_locator 使用差异

page.frame_locator('') #返回的对象只能用locator() 方法定位元素然后click()等操作元素
page.frame() 返回的对象能直接使用fill() 和 click() 方法

page.frame(name,url) #方法可以使用frame的name属性或url属性定位到frame对象
6.1name属性定位iframe

定位iframe的name属性可以是iframe元素的name 或id属性。name 属性不能模糊匹配,只能绝对匹配字符串。

(1)使用name属性定位示例。

a.宏哥偶然发现一个在线的免费的demo网址:Sahi Tests 很好用,今天就使用它来讲解定位frame。如下图所示:

 b.参考代码,如下:

# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-08-13
@author: 北京-宏哥   QQ交流群:705269076
公众号:北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://sahitest.com/demo/framesTest.htm")
    # name 属性定位
    frame = page.frame(name="top")
    print(frame)
    browser.close()

c.运行代码控制台输出,如下图所示:

(2)iframe元素没有name属性,有id属性,也可以用来定位的

a.宏哥这里还用之前的html页面,进行演示。如下图所示:

b.参考代码,如下:

# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-08-13
@author: 北京-宏哥   QQ交流群:705269076
公众号:北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("C:/Users/DELL/Desktop/test/iframe/index.html")
    # name 属性定位
    frame = page.frame(name="frameA")
    print(frame)
    browser.close()

c.运行代码控制台输出,如下图所示:

6.2url属性定位iframe

url属性的值,就是我们看到页面上的src属性,可以支持模糊匹配。

a.宏哥偶然发现一个在线的免费的demo网址:Sahi Tests 很好用,今天就使用它来讲解定位frame。如下图所示:

 b.参考代码,如下:

# coding=utf-8🔥

# 1.先设置编码,utf-8可支持中英文,如上,一般放在第一行

# 2.注释:包括记录创建时间,创建人,项目名称。
'''
Created on 2023-08-13
@author: 北京-宏哥   QQ交流群:705269076
公众号:北京宏哥
Project: 《最新出炉》系列初窥篇-Python+Playwright自动化测试-13-playwright操作iframe
'''

# 3.导入模块
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://sahitest.com/demo/framesTest.htm")
    # name 属性定位
    frame = page.frame(url="index.htm")
    print(frame)
    browser.close()

c.运行代码控制台输出,如下图所示:

7.page.frame_locator(selector) 

这个前边已经详细介绍过了,宏哥就是在这里总结一下,具体使用方法可以查看前边的iframe文章。

7.1基本语法
page.frame_locator(selector)
7.2使用示例

1.使用示例,可以直接定位到frame对象,继续定位元素操作

# 直接定位输入
page.frame_locator('[name="top"]').locator("#username").fill('北京-宏哥')
page.frame_locator('[name="top"]').locator("#password").fill('123456')

2.或者先定位到iframe对象,再通过frame对象操作,只需要定位到frame 对象,后面的元素定位操作都基本一样了。

# frame 对象操作
frame = page.frame_locator('[name="top"]')
frame.locator("#username").fill('北京-宏哥')
frame.locator("#password").fill('123456')

3.也可以通过先定位外层的元素,再定位到frame对象,使用基本语法

page.locator(selector).frame_locator(selector)

8.不常用的方法

page.query_selector(selector).content_frame() 方法 是一个不太常用的方法,使用page.query_selector(selector)元素句柄的方式定位到iframe,然后使用content_frame() 方法切换到iframe对象上

语法规则:

page.query_selector(selector).content_frame()
8.1使用示例
# query_selector 方法
iframe = page.query_selector('[src="down.html"]').content_frame()
print(iframe)

9.小结

今天主要是对前边的iframe的相关知识做了一个总结以便更好地使用和学习。  好了,时间不早了,关于标签操作宏哥就今天就分享到这里。感谢你耐心地阅读。

 每天学习一点,今后必成大神-

往期推荐(由于跳转参数丢失了,所有建议选中要访问的右键,在新标签页中打开链接即可访问)或者微信搜索: 北京宏哥  公众号提前解锁更多干货。

Appium自动化系列,耗时80天打造的从搭建环境到实际应用精品教程测试

Python接口自动化测试教程,熬夜87天整理出这一份上万字的超全学习指南

Python+Selenium自动化系列,通宵700天从无到有搭建一个自动化测试框架

Java+Selenium自动化系列,仿照Python趁热打铁呕心沥血317天搭建价值好几K的自动化测试框架

Jmeter工具从基础->进阶->高级,费时2年多整理出这一份全网超详细的入门到精通教程

Fiddler工具从基础->进阶->高级,费时100多天吐血整理出这一份全网超详细的入门到精通教程

Pycharm工具基础使用教程

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/369999.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Simulink系列】——动态系统仿真 之 离散系统线性离散系统

一、离散系统定义 离散系统是指系统的输入与输出仅在离散的时间上取值&#xff0c;而且离散的时间具有相同的时间间隔。满足下列条件&#xff1a; ①系统&#xff08;的输入输出&#xff09;每隔固定时间间隔才更新一次。固定时间间隔称为采样时间。 ②系统的输出依赖当前的…

python+flask人口普查数据的应用研究及实现django

作为一款人口普查数据的应用研究及实现&#xff0c;面向的是大多数学者&#xff0c;软件的界面设计简洁清晰&#xff0c;用户可轻松掌握使用技巧。在调查之后&#xff0c;获得用户以下需求&#xff1a; &#xff08;1&#xff09;用户注册登录后&#xff0c;可进入系统解锁更多…

C语言第十八弹---指针(二)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 指针 1、const修饰指针 1.1、const修饰变量 1.2、const修饰指针变量 2、指针运算 2.1、指针- 整数 2.2、指针-指针 2.3、指针的关系运算 3、野指针 3.1、…

【数据结构】----先来聊聊【排序】(先导片)

作为一名对技术充满热情的学习者&#xff0c;我一直以来都深刻地体会到知识的广度和深度。在这个不断演变的数字时代&#xff0c;我远非专家&#xff0c;而是一位不断追求进步的旅行者。通过这篇博客&#xff0c;我想分享我在某个领域的学习经验&#xff0c;与大家共同探讨、共…

Vite+Vue3使用Vue-i18n笔记

一、下载依赖 vue-i18n yarn add vue-i18n创建存放语言文件的目录 以及配置文件的配置 我是在src/lang 新建index.ts、cn.ts、en.ts以及test文件夹其中再分别新建cn.ts以及en.ts /lang/index.ts 用于导出vue-i18n需要的配置对象 import en from "./en.ts"; import…

C#验证字符串是否包含汉字:用正则表达式 vs 用ASCII码 vs 用汉字的 Unicode 编码

目录 一、使用的方法 1.使用正则表达式验证字符串 2.使用正则表达式验证字符 3.用ASCII码判断 4.用汉字的 Unicode 编码范围判断 二、实例 1.源码 2.生成效果 验证一个字符串是否是纯汉字或者包含有汉字的前提&#xff0c;是VS编辑器的默认编码格式设置为&#xff1a;选…

项目02《游戏-05-开发》Unity3D

基于 项目02《游戏-04-开发》Unity3D &#xff0c; 【任务】UI背包系统&#xff0c; 首先将Game窗口设置成1920 * 1080&#xff0c; 设置Canvas的缩放模式&#xff0c;&#xff1a;这样设置能让窗口在任意分辨率下都以一个正确的方式显示&#xff0c; 设置数值&…

Apollo

一. 部署说明 apollo配置中心由三个组件组成&#xff1a; ConfigService 配置中心&#xff0c;客户端从这个服务拉配置&#xff0c;同时内置了Eureka、MetaService。每个环境要有一个 AdminService 配置管理服务&#xff0c;管理数据库配置&#xff0c;Portal调这个服务修改、…

缓存的概念

文章目录 一、系统缓存buffer与cachecache 的保存位置cache 的特性 二、用户层缓存DNS缓存 三、浏览器缓存过期机制最后修改时间Etag标记过期时间 expires混合使用和缓存刷新缓存刷新 cookie和session 四、CDN缓存什么是CDN用户请求CDN流程利用 302 实现转发请求重定向至最优服…

引流技术-通过文件中增加联系方式并传播

文章目录 前言文档增加联系方式扩散网盘扩散自建网站借力 注意 前言 很多人在找资料的时候可能都遇到过下图情况&#xff1a; 1、文档最后面留一个自己的联系方式&#xff1b; 2、找的一堆文件中都有相同的情况&#xff1b; 3、一段时间全网搜到的很多相同文件也有这个联系方式…

Zookeeper分布式队列实战

目录 Zookeeper分布式队列 普通方式实现 设计思路 具体实现 使用Curator实现 具体实现 注意事项 Zookeeper分布式队列 常见的消息队列有:RabbitMQ&#xff0c;RocketMQ&#xff0c;Kafka等。Zookeeper作为一个分布式的小文件管理系统&#xff0c;同样能实现简单的队列功…

【LeetCode: 2670. 找出不同元素数目差数组 + 哈希表 + 前后缀处理】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

使用PHPStudy搭建Cloudreve网盘服务

文章目录 1、前言2、本地网站搭建2.1 环境使用2.2 支持组件选择2.3 网页安装2.4 测试和使用2.5 问题解决 3、本地网页发布3.1 cpolar云端设置3.2 cpolar本地设置 4、公网访问测试5、结语 1、前言 自云存储概念兴起已经有段时间了&#xff0c;各互联网大厂也纷纷加入战局&#…

问题:下列哪些属于历史文化资源的特征( ). #学习方法#学习方法

问题&#xff1a;下列哪些属于历史文化资源的特征( ). A、稀缺性 B、脆弱性 C、可再生性 D、多样性 参考答案如图所示

Apple Vision Pro:新的隐私噩梦?

长期以来&#xff0c;苹果被誉为最注重隐私的科技公司之一&#xff0c;但如今&#xff0c;凭借售价 3499 美元的 Vision Pro&#xff0c;苹果可能已经打造出了一款终极监控机器。 作为苹果首款头戴式“空间计算”显示设备&#xff0c;号称将打造数字世界与物理世界交汇的新空间…

STL篇三:list

文章目录 前言1.list的介绍和使用1.1 list的介绍1.2 list的使用1.3 list的迭代器的失效 2.list的模拟实现2.1 结点的封装2.2 迭代器的封装2.2.1 正向迭代器2.2.2 反向迭代器 2.3 list功能的实现2.3.1 迭代器的实例化及begin()、end() 2.3.2 构造函数2.3.3 赋值运算符重载2.3.4 …

Axure RP9原型设计工具使用记录:基础操作

Axure RP9使用记录一 &#x1f4da;第一章 前言&#x1f4d7;背景&#x1f4d7;目的 &#x1f4da;第二章 基础介绍及操作&#x1f4d7;页面功能总览&#x1f4d7;基础操作&#x1f4d5;设置样式&#x1f4d5;设置交互&#x1f4d5;设置组合&#x1f4d5;设置动态面板&#x1f…

PyTorch使用

前言 系统环境&#xff1a;win10 使用Anaconda&#xff0c;Anaconda的安装自行百度。 目录 前言 创建虚拟环境 1、查看当前有哪些虚拟环境 2、创建虚拟环境pytorch 3、激活及关闭pytorch虚拟环境 4、删除pytorch虚拟环境 使用yolov5测试 1、切换至yolov5目录下&…

淘宝镜像到期如何切换镜像及如何安装淘宝镜像

淘宝镜像到期如何切换镜像及如何安装淘宝镜像 一、淘宝镜像到期如何切换新镜像二、第一次使用淘宝镜像如何配置镜像 一、淘宝镜像到期如何切换新镜像 清空缓存&#xff1a;npm cache clean --force切换镜像源&#xff1a;npm config set registry https://registry.npmmirror.…

nodejs+vue+ElementU教师科研管理系统l33wm

本次开发一套高校教师科研管理系统有管理员&#xff0c;教师&#xff0c;学院三个角色。管理员功能有个人中心&#xff0c;教师管理&#xff0c;学院管理&#xff0c;科研课题管理&#xff0c;软件著作权管理&#xff0c;论文信息管理&#xff0c;专利信息管理&#xff0c;科研…