欢迎大家来到IT世界,在知识的湖畔探索吧!

前言

在web自动化测试中，frame是我们绕不开的一个东西，也是我们很头疼的东西，selenium处理frame，需要切换到frame中，然后再切换出来，操作比较麻烦，那么playwright对于frame的操作会不会更加简单呢？

答案是肯定的，playwright不需要切换frame，直接定位元素即可。下面我们来介绍一下playwright的frame处理。

iframe定位

要处理frame，我们需要先定位frame，在playwright中，我们可以使用page.frame_locator()或locator.frame_locator()方法创建 FrameLocator 捕获足该 iframe 中检索和定位元素。

示例如下：

locator = page.frame_locator("my-frame").get_by_text("Submit")
locator.click()

欢迎大家来到IT世界,在知识的湖畔探索吧!

使用frame_locator() 定位到iframe上，然后继续在上面使用locator方法定位元素

iframe 定位器是严格的。这意味着如果有多个元素与给定的选择器匹配，则对 iframe 定位器的所有操作都会抛出异常。示例如下：

欢迎大家来到IT世界,在知识的湖畔探索吧!# 一个DOM中有多个frame:
page.frame_locator('.result-frame').get_by_role('button').click()

# 多个frame中，取第一个，即可正常生效:
page.frame_locator('.result-frame').first.get_by_role('button').click()

在带有 id 的 iframe 中定位带有文本“提交”的元素my-frame，例如，我们可以这样写定位表达式，代码如下：

locator = frame.frame_locator("#my-iframe").get_by_text("Submit")
locator.click()

注：很多时候id是动态变化的，每一次打开id都不一样，我们可以通过xpath的contains来进行匹配，例如网易163邮箱的登录界面。

由于iframe 元素 id 属性是动态可变的id=“x-URS-iframe1677824735142.1565” 可以使用xpath的contains 模糊匹配，代码如下：

欢迎大家来到IT世界,在知识的湖畔探索吧!from playwright.sync_api import sync_playwright


with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=1000)
    page = browser.new_page()
    page.goto("https://mail.163.com/")

  
    frame = page.frame_locator('//iframe[contains(@id, "x-URS-iframe")]')
    frame.locator('[name="email"]').fill('theshy')
    frame.locator('[name="password"]').fill("play123456789")
    frame.locator('#dologin').click()

    page.wait_for_timeout(5000)
    browser.close()

类似CSS定位，匹配到多个结果时，我们可以使用first,last,nth()定位到指定的frame。示例如下：

# 匹配第一个
frame_locator().first

# 匹配最后一个
frame_locator().last

# 使用index索引
frame_locator().nth(index)

获取页面上的所有frame

以163邮箱的登录页面为例，我们获取全部的frame，代码如下：

from playwright.sync_api import sync_playwright


with sync_playwright() as p:
    browser = p.chromium.launch(headless=False, slow_mo=1000)
    page = browser.new_page()
    page.goto("https://mail.163.com/")
    print(page.frames)
    for f in page.frames:
        print(f)

    page.wait_for_timeout(5000)
    browser.close()

运行结果如下：

[<Frame name= url='https://mail.163.com/'>, <Frame name=frameforlogin url='about:blank'>, <Frame name=frameJS6 url='about:blank'>, <Frame name=x-URS-iframe1677825858563.064 url='https://dl.reg.163.com/webzj/v1.0.1/pub/index_dl2_new.html?cd=%2F%2Fmimg.127.net%2Fp%2Ffreemail%2Findex%2Funified%2Fstatic%2F2023%2F%2Fcss%2F&cf=urs.163.73244e9a.css&MGID=1677825858563.064&wdaId=&pkid=CvViHzl&product=mail163'>]
<Frame name= url='https://mail.163.com/'>
<Frame name=frameforlogin url='about:blank'>
<Frame name=frameJS6 url='about:blank'>
<Frame name=x-URS-iframe1677825858563.064 url='https://dl.reg.163.com/webzj/v1.0.1/pub/index_dl2_new.html?cd=%2F%2Fmimg.127.net%2Fp%2Ffreemail%2Findex%2Funified%2Fstatic%2F2023%2F%2Fcss%2F&cf=urs.163.73244e9a.css&MGID=1677825858563.064&wdaId=&pkid=CvViHzl&product=mail163'>

frame() 定位方法

playwright提供了一种frame() 定位方法 ，可以根据name属性和url属性匹配。代码如下：

frame = page.frame(name="frame-name")
frame = page.frame(url=r".*domain.*")
# Interact with the frame
frame.fill('#username-input', 'theshy')

page.frame 和 page.frame_locator 使用差异

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

总结

本文主要介绍了playwright对于frame的处理，相比selenium，playwright对于frame的处理更加方便快捷，减少了selenium的切换的步骤，这对于提升我们的自动化测试执行效率有很大帮助。