最强自动化测试框架Playwright（20）- iframe-Toy模板网

这篇具有很好参考价值的文章主要介绍了最强自动化测试框架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文件

<!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, 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 的版本号。