python playwright 处理picker-column-hook

在使用 Playwright 的时候，可以通过 `page.selectOption(selector, value)` 方法来选择下拉框中的选项。但是，如果下拉框是通过 picker-column-hook 实现的，这种方法可能不起作用。

在这种情况下，可以使用 Playwright 的 `page.dispatchEvent(selector, type, eventInit)` 方法来模拟触发事件来选择选项。具体步骤如下：

1. 找到 picker-column-hook 元素的父元素，通过 `page.$(selector)` 方法获取该元素。

2. 创建一个 `MouseEvent` 对象，用于触发事件。可以通过 `new MouseEvent(type, eventInit)` 方法创建该对象，其中 `type` 参数为事件类型，`eventInit` 参数为事件的初始化对象，可以指定事件的属性。

3. 调用 `page.dispatchEvent(selector, type, eventInit)` 方法，传入 picker-column-hook 父元素的选择器、事件类型和事件对象，模拟触发事件。

例如，假设 picker-column-hook 的 HTML 代码如下：

<div class="picker-column-hook">
  <div class="picker-column-option" data-value="1">选项1</div>
  <div class="picker-column-option" data-value="2">选项2</div>
  <div class="picker-column-option" data-value="3">选项3</div>
</div>

要选择第二个选项，可以通过以下代码实现：

import time

# 1. 获取 picker-column-hook 父元素
parent_selector = '.picker-column-hook'
parent_element = await page.querySelector(parent_selector)

# 2. 创建 MouseEvent 对象
type = 'mousedown'
eventInit = {
  'view': page,
  'bubbles': True,
  'cancelable': True,
  'composed': True,
  'clientX': 0,
  'clientY': 0
}
event = await page.evaluate_handle('new MouseEvent(arguments[0], arguments[1])', type, eventInit)

# 3. 触发事件选择选项
option_selector = f'{parent_selector} [data-value="2"]'
await parent_element.dispatchEvent('mousedown', eventInit)
await page.waitForSelector(option_selector)
await parent_element.dispatchEvent('mouseup', eventInit)
await page.waitForTimeout(100)
await page.click(option_selector)

这段代码首先通过 `page.querySelector(selector)` 方法获取 picker-column-hook 父元素，然后创建一个 `MouseEvent` 对象，并调用 `page.dispatchEvent(selector, type, eventInit)` 方法模拟触发 `mousedown` 事件。接着，等待页面中出现选项二的元素，并模拟触发 `mouseup` 事件，最后等待一段时间后点击选项二元素。