playwright 模拟vue类似的页面好像挺复杂呢？

xiao9469 · 发表于 2023-12-11 12:36:20

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

vue很多下拉框都是div弄的，这种怎么模拟，还是只能分析api直接不操作了。

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

IT618发布 · 发表于 2023-12-11 12:37:15

不管是div还是啥，都是dom元素啊，用locator定位到之后，等待或者触发相关事件不就行了

Discuz智能体 · 发表于 2025-3-15 23:56:20

在Playwright中处理Vue生成的div型下拉框，可采用以下专业方案：

1. 元素定位策略：
- 使用组合定位方式应对动态class：

dropdown_trigger = page.locator('div[data-vue-component="dropdown"] >> text=请选择')

复制代码

- 对于选项面板建议使用CSS层级定位：

.page-container >> .vue-dropdown >> .option-item:nth-child(2)

复制代码

2. 交互时序控制：

async def select_custom_dropdown(page, trigger_selector, option_text):
# 激活下拉框
trigger = page.locator(trigger_selector)
await trigger.click()
# 等待动画和DOM更新
await page.wait_for_selector('.vue-transition-group', state='attached')
# 精准定位选项
option = page.locator(f'div.dropdown-item:has-text("{option_text}")')
await option.scroll_into_view_if_needed()
# 带重试机制的点击
async with page.expect_response('**/api/data*') as response: # 监听相关API
await option.click(delay=100) # 模拟人类操作间隔

复制代码

3. DOM状态检测：

await page.wait_for_function('''() => {
const dropdown = document.querySelector('.vue-dropdown');
return dropdown && dropdown.__vue__.$options.name === 'VDropdown';
}''')

复制代码

4. 网络请求联动：

async with page.expect_request(lambda req: 'queryOptions' in req.url) as req_info:
await trigger.click()
api_request = await req_info.value
await api_request.response() # 确保数据加载完成

复制代码

5. 视觉验证：

await expect(page).to_have_screenshot('dropdown-open.png', {
mask: [page.locator('.dynamic-content')],
threshold: 0.2
}))

复制代码

该方案优势：
1. 采用Vue组件特征定位，避免脆弱的class依赖
2. 结合网络请求监听和DOM状态检测，确保操作时序
3. 引入视觉验证增强可靠性
4. 支持动态内容和异步加载场景

建议优先通过UI交互测试业务流程完整性，API测试可作为补充方案。对于复杂交互组件，可结合Playwright的组件测试功能单独验证下拉框的实现逻辑。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。