Node+puppeteer学习笔记（十）-- 选择标准下拉框和非标准下拉框

温柔夏目

已于 2023-06-02 20:49:42 修改

阅读量2.7k

点赞数 5

分类专栏： Node+Puppeteer学习笔记文章标签：学习笔记数学建模

于 2019-07-17 20:56:27 首次发布

本文链接：https://blog.csdn.net/qupan1993/article/details/96358450

版权

Node+Puppeteer学习笔记专栏收录该内容

10 篇文章 3 订阅

订阅专栏

官方英文版API入口：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md.
汉化版API入口：https://yq.aliyun.com/articles/607102.
学习笔记入口：https://blog.csdn.net/qupan1993/article/details/85371556.

1、现在常用的下拉框就是非标准下拉框，先看下面一个Demo

在这里插入图片描述

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless:false});
  const page = await browser.newPage();
  await page.goto('http://www.jq22.com/demo/jquerySrselect201807030856/');
  await page.setViewport({width:1000,height:800});
  await page.waitFor('.fa-caret-down');//等待下拉框出现
  await page.click('.fa-caret-down');//展开下拉框
  await page.waitFor(2000);
  await page.waitFor('ul.selectUl > li:last-child');//等待选项出现
  await page.click('ul.selectUl > li:last-child');//点击选项桃子
  //等待3秒后退出浏览器
  await page.waitFor(3000);
  await browser.close();
})();

解析：
1、第8行是等待下拉框出现。第9行是点击展开下拉框
2、第11行是等地啊下拉框选项出现，第12行是点击需要的选项

2、接下来看标准下拉框

在这里插入图片描述
先新建一个HTML文件，保存位：select.html：

<!DOCTYPE html>
<html>
<body>

<select id="select_01">
  <option value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3">Opel</option>
  <option value="4">41</option>
</select>
  
</body>
</html>

运行代码如下，引入文件，goto中的地址记得改成自己的

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({headless:false});
  const page = await browser.newPage();
  await page.goto('file:///E:/Puppeteer-Demo/case/select.html');
  await page.setViewport({width:1000,height:800});
  //切换iframe框代码
  await page.waitFor('#select_01');
  await page.select('#select_01','4');//选择下拉框内容

  //等待3秒后退出浏览器
  await page.waitFor(3000);
  await browser.close();
})();

解析：
1、最重要的是第10行，使用page.select(‘#select_01’,‘4’);函数，第一个参数是下拉框的定位，第二个参数是下拉框选项的value值
2、这里第二个参数value值填写的时候有一些规则
在这里插入图片描述
第8行中没有value属性，那就使用标签之间的文本【Opel】即可
第9行中有value属性，标签内也有文本值的时候，首先填写value的值4，否则填写41的话是没有用的