最强自动化测试框架Playwright（30）-JS句柄
在 Playwright 中，JSHandle 是一个表示浏览器中 JavaScript 对象的类。它提供了与网页中的 JavaScript 对象进行交互和操作的方法。
可以通过调用 Playwright中的 evaluateHandle 或 evaluate 方法来获取 JSHandle
from playwright.sync_api import sync_playwright
with sync_playwright() as playwright:
# 启动浏览器
browser = playwright.chromium.launch()
# 创建一个新的上下文
context = browser.new_context()
# 在上下文中创建一个新的页面
page = context.new_page()
# 跳转到页面
page.goto('https://www.baidu.com')
# 获取网页标题的 JSHandle
title_handle = page.evaluate_handle("document.title")
# 获取标题的文本值
title_value = title_handle.json_value()
print(f"页面标题为：{title_value}")
# 关闭浏览器
browser.close() 使用 evaluate_handle 方法在页面上下文中执行 JavaScript 代码，并将结果返回一个 JSHandle 对象。最后，通过 json_value 方法获取 JSHandle 对象的文本值
方法
dispose
使用 JSHandle.dispose() 方法来释放 JSHandle 对象占用的资源。这个方法可以在不再需要 JSHandle 对象时手动调用，以确保资源能够被及时释放。
js_handle.dispose()
evaluate
JSHandle.evaluate() 方法允许执行一个函数或 JavaScript 表达式，并将结果返回到 Node.js 环境中。这使得可以在 Node.js 端对浏览器中的 JavaScript 对象进行操作和获取信息。
# 使用 evaluate 方法执行 JavaScript 代码并获取返回值
value = title_handle.evaluate("element => element.toLowerCase()")
print(f"页面标题的小写形式为：{value}")
evaluate_handle
返回JSHandle
js_handle.evaluate_handle(expression)
js_handle.evaluate_handle(expression, **kwargs)
在 Playwright 中，`JSHandle.evaluate_handle()` 方法允许执行一个函数或 JavaScript 表达式，并以 `JSHandle` 对象的形式返回结果。这意味着可以对浏览器中的 JavaScript 对象进行进一步的操作和检索。
以下是一个示例，演示如何使用 `evaluate_handle()` 方法执行 JavaScript 代码并获取返回的 `JSHandle` 对象：
```python
from playwright.sync_api import sync_playwright
with sync_playwright() as playwright:
# 启动浏览器
browser = playwright.chromium.launch()
# 创建一个新的上下文
context = browser.new_context()
# 在上下文中创建一个新的页面
page = context.new_page()
# 跳转到页面
page.goto('https://example.com')
# 使用 evaluate_handle 方法执行 JavaScript 代码并获取返回的 JSHandle 对象
element_handle = page.evaluate_handle("document.querySelector('h1')")
# 使用返回的 JSHandle 进一步操作元素
text_handle = element_handle.evaluate_handle("element => element.textContent")
value = text_handle.json_value()
print(f"页面标题为：{value}")
# 释放 JSHandle 对象
text_handle.dispose()
element_handle.dispose()
# 关闭浏览器
browser.close()
```
在上述示例中，我们首先使用 `evaluate_handle()` 方法执行 JavaScript 代码，并将返回的 `JSHandle` 对象赋给 `element_handle` 变量。然后，我们可以继续使用该 `element_handle` 对象来执行更多的 JavaScript 操作，例如获取元素的文本内容。在本例中，我们使用 `evaluate_handle()` 方法和箭头函数来获取 `h1` 元素的文本内容，并将返回的 `JSHandle` 对象赋给 `text_handle`。最后，我们通过 `json_value()` 方法获取文本内容，并将其输出。
同样要注意，在不需要使用 `JSHandle` 对象时，应该调用 `dispose()` 方法手动释放资源。
get_properties
在 Playwright 中，可以使用 `JSHandle.get_properties()` 方法获取 JavaScript 对象的属性列表。这个方法返回一个字典，其中键是属性名称，值是表示该属性的 `JSHandle` 对象。
以下是一个示例，演示如何使用 `get_properties()` 方法获取并遍历 JavaScript 对象的属性：
```python
from playwright.sync_api import sync_playwright
with sync_playwright() as playwright:
# 启动浏览器
browser = playwright.chromium.launch()
# 创建一个新的上下文
context = browser.new_context()
# 在上下文中创建一个新的页面
page = context.new_page()
# 跳转到页面
page.goto('https://example.com')
# 使用 evaluate_handle 方法获取 window 对象的 JSHandle
window_handle = page.evaluate_handle("window")
# 获取 window 对象的属性列表
properties = window_handle.get_properties()
# 遍历属性列表，打印属性名和属性值
for name, value_handle in properties.items():
value = value_handle.json_value()
print(f"{name}: {value}")
# 释放 JSHandle 对象
window_handle.dispose()
# 关闭浏览器
browser.close()
```在上述示例中，我们使用 `evaluate_handle()` 方法获取了 `window` 对象的 `JSHandle`。然后，我们使用 `get_properties()` 方法获取了 `window` 对象的属性列表，存储在 `properties` 字典中。最后，我们遍历该字典，并使用 `json_value()` 方法获取属性值，并将其打印输出。
请注意，`get_properties()` 方法只返回直接在 JavaScript 对象上定义的属性，不包含继承的属性。而且，只有可枚举属性才会被返回。
同样要注意，在不需要使用 `JSHandle` 对象时，应该调用 `dispose()` 方法手动释放资源。
get_property
返回单个属性值
js_handle.get_property(property_name)
json_value
js_handle.json_value()
属性
as_element
js_handle.as_element()
作用
在 UI 自动化中，`JSHandle` 在 Playwright 中起着重要的作用。它代表了浏览器中执行的 JavaScript 对象，并提供了访问和操作这些对象的方法。
以下是 `JSHandle` 在 UI 自动化中的几个常见用途：
1. **执行和评估 JavaScript 代码**：通过 `JSHandle.evaluate()` 或 `JSHandle.evaluate_handle()` 方法，可以在浏览器环境中执行 JavaScript 代码，并获得执行结果。
2. **操作和检索 DOM 元素**：使用 `JSHandle`，可以获取页面中的元素并对其进行操作，例如修改元素属性、调用元素方法、获取元素的文本内容等。
3. **处理页面中的 JavaScript 对象**：通过 `JSHandle`，可以直接访问和操作页面中的 JavaScript 对象，例如全局对象、变量、函数等。
4. **获取页面中的属性值和属性列表**：通过 `JSHandle.get_property()` 或 `JSHandle.get_properties()` 方法，可以获取 JavaScript 对象的属性值或属性列表。
5. **释放资源**：在长时间运行的自动化脚本中，为了避免内存泄漏和资源浪费，应该及时调用 `JSHandle.dispose()` 方法释放 `JSHandle` 对象占用的资源。
总的来说，`JSHandle` 提供了与浏览器中的 JavaScript 对象进行交互的能力，为 UI 自动化提供了更大的灵活性和控制能力。可以使用 `JSHandle` 来执行自定义的 JavaScript 逻辑，获取和操作页面元素，以及与页面的 JavaScript 环境进行交互。