【Playwright + Python】系列（十七）揭秘 Playwright 处理 Handles：开启高效自动化之门

哈喽，各人好，我是六哥！本日来跟各人聊一聊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 示例

示例代码

1. from playwright.sync_api import sync_playwright
3. with sync_playwright() as p:
4.     browser = p.chromium.launch(headless=False)
5.     page = browser.new_page()
6.     page.goto("https://www.baidu.com")
7.     # 获取 window 对象的 JSHandle
8.     js_handle = page.evaluate_handle('window')
9.     # 使用 jsHandle 进行评估
10.     title = page.evaluate('window => window.document.title', js_handle)
11.     # 断言标题
12.     assert title == "百度一下，你就知道"
13.     print(f"Page Title: {title}")

复制代码

2、获取 ElementHandle 示例

示例代码

1. from playwright.sync_api import sync_playwright
3. with sync_playwright() as p:
4.     browser = p.chromium.launch(headless=False)
5.     page = browser.new_page()
6.     page.goto("https://www.baidu.com")
7.    # 获取搜索框的 ElementHandle
8.     search_box_handle = page.wait_for_selector('#kw')
9.     # 断言搜索框的宽高
10.     bounding_box = search_box_handle.bounding_box()
11.     print(f"Search Box Bounding Box: {bounding_box}")
12.     # 断言搜索框的 maxlength 属性
13.     maxlength = search_box_handle.get_attribute('maxlength')
14.     assert maxlength == '255'
15.    
16.     browser.close()

复制代码

3、将 Handle 作为参数传递

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

1. from playwright.sync_api import sync_playwright
3. with sync_playwright() as p:
4.     browser = p.chromium.launch(headless=False)
5.     page = browser.new_page()
6.     page.goto("https://www.baidu.com")
7.     # 创建新的数组并返回数组的 JSHandle
8.     my_array_handle = page.evaluate_handle("() => { return [1]; }")
9.     # 获取数组的长度
10.     length = page.evaluate("array => array.length", my_array_handle)
11.     print(f"Array Length: {length}")
12.     # 向数组添加新元素
13.     page.evaluate("(array, newElement) => array.push(newElement)", [my_array_handle, 2])
14.     # 再次获取数组的长度
15.     new_length = page.evaluate("array => array.length", my_array_handle)
16.     print(f"New Array Length: {new_length}")
17.     # 释放对象
18.     my_array_handle.dispose()
19.     browser.close()

复制代码

4. 利用 Locator 而不是 ElementHandle

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

1. from playwright.sync_api import sync_playwright
3. with sync_playwright() as p:
4.     browser = p.chromium.launch(headless=False)
5.     page = browser.new_page()
6.     page.goto("https://www.baidu.com")
7.      # 使用 Locator 定位搜索框
8.     search_box_locator = page.locator('#kw')
9.     # 输入搜索词
10.     search_box_locator.fill('Playwright')
11.     # 提交搜索
12.     page.locator('#su').click()
13.     # 验证搜索结果
14.     first_result = page.locator('h3 > a').first
15.     print(first_result.text_content())
16.     browser.close()

复制代码

写在最后

最后，希望各人都能顺遂掌握，一起进步。也欢迎分享给更多有需要的朋侪哦！
若有劳绩，就点个赞吧