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

1.简介

通过前边三篇的学习，想必大家已经对iframe有了一定的认识和了解，今天这一篇主要是对iframe的一些特殊情况的介绍和讲解，主要从iframe的定位、监听事件和执行js脚本三个方面进行展开介绍。

2.iframe定位

2.1动态id属性如何定位

有时候，我们可能看到的iframe 的id不是固定的，是动态的一个id, 每次刷新，它的值都不一样（一般前面一部分是固定的），而且它的刚好又没有name属性。例如：宏哥前边讲解的163邮箱的iframe的id就是动态的。如下图所示：

像上图所示的这种动态的id，如何定位了，宏哥在这里讲解两种比较常用的方法，当然了可能有比宏哥更好的方法，欢迎留言讨论。

2.2.1第一种方法

可以用css的正则匹配元素属性

语法	描述
$('[name^="value"]')	匹配 name 以 value 开头的元素
$('[name$="end"]')	匹配 name 以 end 结尾的元素
$('[class*="text"]')	匹配class属性包含text的元素

参考代码：

# css 正则匹配属性
frame = page.frame_locator('[id^="x-URS-iframe"]')
print(frame)
frame.locator('#username').fill('北京-宏哥')

2.2.2第二种方法

使用xpath的contains 包含属性。参考代码：

# xpath的contains 包含属性
frame = page.frame_locator('//*[contains(@id, "x-URS-iframe")]')
print(frame)
frame.locator('#username').fill('北京-宏哥')

2.2两层iframe如何定位

两层iframe，顾名思义是：iframe下嵌套另外一个iframe。解决办法没什么技巧，一层一层定位即可。多层也是类似的方法。例如：宏哥前边讲解的QQ邮箱的iframe就有个2层的iframe。如下图所示：

#一层一层定位定位frame
frame = page.frame_locator('[class="QQMailSdkTool_login_loginBox_qq_iframe"]').frame_locator("#ptlogin_iframe")
#点击密码登录
frame.locator("#switcher_plogin").click()
frame.locator('#u').fill('北京-宏哥')
frame.locator('#p').fill("123456")
frame.locator('#login_button').click()

3.监听事件

iframe的事件可以通过page对象直接监听到。如下图所示：

3.1代码设计

其它的下载事件，文件上传监听方法都类似一样。

3.2参考代码

# 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

def handler(dialog):
    print("监听dialog 事件")
    print(dialog.message)
    # dialog.accept()

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")

    page.on('dialog', handler)

    # 一层一层定位
    frame = page.frame_locator('#frameA')
    frame.locator('#alert').click()

    #page.pause()
    browser.close()

3.3运行代码

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

2.运行代码后电脑端的浏览器的动作。如下图所示：

4.执行js脚本

4.1在page对象执行js脚本

使用page.evaluate(js代码)方法可以直接在page对象上执行JavasScript 代码。

4.1.1代码设计

4.1.2参考代码

# 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

def handler(dialog):
    print("监听dialog 事件")
    print(dialog.message)
    # dialog.accept()

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://sahitest.com/")

    page.on("dialog", handler)

    # 执行JavaScript
    page.evaluate("alert('hello world')")

    #page.pause()
    browser.close()

4.1.3运行代码

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

2.运行代码后电脑端的浏览器的动作。如下图所示：

4.2在iframe上执行js脚本

在iframe上执行JavaScript代码，需在iframe对象上执行。例如：在iframe的input中输入“北京-宏哥”，如下图所示：

4.2.1代码设计

4.2.2参考代码

# 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")

    iframe = page.frame(name='frameA')
    # 执行js 给输入框输入内容
    js = "document.getElementById('iframeinput').value='北京-宏哥';"
    iframe.evaluate(js)

    page.pause()
    browser.close()

4.2.3运行代码

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

2.运行代码后电脑端的浏览器的动作。如下图所示：

5.小结

今天主要讲解和分享了一下iframe在一些特殊情况下如何定位，以及iframe的监听事件和执行js脚本。好了，时间不早了，今天就分享到这里，感谢您耐心的阅读！！！