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

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

	


	
IFrame Example
	
This is an example of using an iframe.
	

这个html页面有一个iframe

from playwright.sync_api import sync_playwright, expect


def run(playwright):
    chromium = playwright.chromium
    browser = 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_playwright

def run(playwright):
    firefox = playwright.firefox
    browser = 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_playwright

with 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 的标记或包含内容的标记添加到页面中。