最强自动化测试框架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 环境进行交互。