哈喽，大家好，我是六哥！今天来跟大家聊一聊Playwright 处理 Handles的方法，面向对象为功能测试及零基础小白，这里我尽量用大白话的方式举例讲解，力求所有人都能看懂，建议大家先收藏，以免后面找不到。

一、什么是Handles

在 Playwright 中，Handles 是一种特殊的数据结构，用于在 Playwright 的进程与浏览器环境之间建立桥梁，使你能够从 Playwright 的环境中访问和操作浏览器内的对象。简单来说，Handles 让你能够“抓住”页面上的元素或 JavaScript 对象，并对其进行操作。

二、为什么需要 Handles？

跨环境操作：由于 Playwright 运行在一个进程中，而浏览器中的 JavaScript 代码运行在另一个进程中，Handles 提供了一种机制，使得这两个环境之间的对象可以相互操作。

保持对象引用：通过 Handles，你可以在 Playwright 中保留对浏览器内对象的引用，即使这些对象在浏览器环境中发生了变化，只要 Handles 没有被销毁，你依然可以通过它们访问到这些对象。

延迟执行：使用 Handles 可以延迟执行某些操作，直到特定条件满足为止，例如等待某个元素出现在页面上。

三、两种主要类型的 Handles

1、JSHandle

用途：引用页面中的任何 JavaScript 对象。

特点：JSHandle 可以表示任何类型的 JavaScript 对象，比如数组、函数、DOM 元素等。它提供了一种方式，让你可以在 Playwright 的上下文中操作这些对象。

生命周期：除非页面导航或显式地调用了 dispose() 方法，否则 JSHandle 会一直存在，防止对应的 JavaScript 对象被垃圾回收。

2、ElementHandle

用途：专门用于引用页面中的 DOM 元素，并且提供了额外的方法来对这些元素执行操作或断言其属性。

特点：ElementHandle 继承自 JSHandle，因此具备所有 JSHandle 的功能。此外，它还提供了一些额外的方法，如点击、填写文本、获取元素的边界框等，这些方法可以直接作用于 DOM 元素上。

生命周期：同 JSHandle 一样，除非页面导航或显式地调用了 dispose() 方法，否则 ElementHandle 会一直存在。

四、实际应用示例

假设我们要在百度页面上进行一些操作，我们可以使用 Handles 来实现：

1、获取 JSHandle 示例

示例代码

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://www.baidu.com")
    # 获取 window 对象的 JSHandle
    js_handle = page.evaluate_handle('window')
    # 使用 jsHandle 进行评估
    title = page.evaluate('window => window.document.title', js_handle)
    # 断言标题
    assert title == "百度一下，你就知道"
    print(f"Page Title: {title}")

2、获取 ElementHandle 示例

示例代码

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://www.baidu.com")
   # 获取搜索框的 ElementHandle
    search_box_handle = page.wait_for_selector('#kw')
    # 断言搜索框的宽高
    bounding_box = search_box_handle.bounding_box()
    print(f"Search Box Bounding Box: {bounding_box}")
    # 断言搜索框的 maxlength 属性
    maxlength = search_box_handle.get_attribute('maxlength')
    assert maxlength == '255'
    
    browser.close()

3、将 Handle 作为参数传递

当需要在页面上下文中操作由 Playwright 创建的对象时，可以将 Handle 传递给 evaluate 方法。

示例代码

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://www.baidu.com")
    # 创建新的数组并返回数组的 JSHandle
    my_array_handle = page.evaluate_handle("() => { return [1]; }")
    # 获取数组的长度
    length = page.evaluate("array => array.length", my_array_handle)
    print(f"Array Length: {length}")
    # 向数组添加新元素
    page.evaluate("(array, newElement) => array.push(newElement)", [my_array_handle, 2])
    # 再次获取数组的长度
    new_length = page.evaluate("array => array.length", my_array_handle)
    print(f"New Array Length: {new_length}")
    # 释放对象
    my_array_handle.dispose()
    browser.close()

4. 使用 Locator 而不是 ElementHandle

虽然 ElementHandle 仍然可用，但 Playwright 推荐使用 Locator 来执行用户动作和断言。这是因为 Locator 每次都会根据选择器重新定位页面上的元素，确保即使页面状态改变也能正确地找到元素。

示例

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://www.baidu.com")
     # 使用 Locator 定位搜索框
    search_box_locator = page.locator('#kw')
    # 输入搜索词
    search_box_locator.fill('Playwright')
    # 提交搜索
    page.locator('#su').click()
    # 验证搜索结果
    first_result = page.locator('h3 > a').first
    print(first_result.text_content())
    browser.close()

写在最后

以上代码展示了如何使用 Playwright 处理 Handles的使用方法。你可以根据自己的需求调整这些示例，感兴趣的同学可以自行动手尝试。 如需要全部源代码，公众号：软件测试君，请回复“Playwright学习”获取，无引号哦。
最后，希望大家都能顺利掌握，一起进步。也欢迎分享给更多有需要的朋友哦！

若有收获，就点个赞吧