puppeteer 中获取到el-select下拉框中的dom 点击第一个数据并且关闭下拉框
时间: 2025-03-14 07:13:17 浏览: 48
### 使用 Puppeteer 操作 el-select 下拉框
要在 Puppeteer 中操作 `el-select` 下拉框,可以通过以下方式获取 DOM 节点并执行所需的操作:
#### 1. 打开下拉框
通过触发 `.trigger('click')` 方法打开下拉框。
#### 2. 定位第一个选项
使用 CSS 选择器找到下拉框中的第一个选项。对于 Element UI 的 `el-select` 组件,默认的第一个可选项位于 `.el-select-dropdown .el-select-dropdown__item:not(.is-disabled)` 类中[^1]。
#### 3. 关闭下拉框
点击选定的选项后,Element UI 自动关闭下拉框。因此无需额外处理关闭逻辑。
以下是完整的代码示例:
```javascript
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
// 导航到目标页面
await page.goto('https://your-target-page.com');
try {
// 打开 el-select 下拉框
await page.click('.el-select > input');
// 等待下拉菜单加载完毕
await page.waitForSelector('.el-select-dropdown .el-select-dropdown__item', { timeout: 5000 });
// 获取第一个可用选项并点击它
await page.evaluate(() => {
const firstOption = document.querySelector('.el-select-dropdown .el-select-dropdown__item:not(.is-disabled)');
if (firstOption) {
firstOption.click();
}
});
console.log("成功选择了第一个选项");
} catch (error) {
console.error("操作过程中发生错误:", error);
}
// 可在此处继续其他操作...
await browser.close();
})();
```
此脚本实现了如下功能:
- **导航至指定网页**:通过 `page.goto()` 访问目标网站。
- **打开下拉框**:模拟鼠标点击事件激活 `el-select` 下拉框。
- **等待动态内容加载**:确保下拉列表完全渲染后再进行下一步操作。
- **选择首个有效选项**:排除禁用状态 (`is-disabled`) 的项目,并选取第一个正常选项。
以上过程基于 Puppeteer 提供的功能以及对 Element UI 的了解完成交互行为。
#### 注意事项
- 如果目标站点启用了防爬机制(如检测自动化工具),可能需要引入插件辅助规避风险,例如 `puppeteer-extra-plugin-stealth`[^2]。
- 对于复杂场景下的大规模数据采集任务,建议采用池化技术优化资源利用率,比如借助 `puppeteer-cluster` 实现高效的任务分发与管理[^3]。
- 若需记录整个流程作为调试依据,可以集成屏幕录制功能以便后续分析问题所在[^4]。
阅读全文
相关推荐


















