Node+puppeteer学习笔记(十)--API问题解决--选择标准下拉框和非标准下拉框

官方英文版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值填写的时候有一些规则
Node+puppeteer学习笔记(十)--API问题解决--选择标准下拉框和非标准下拉框_第1张图片
第8行中没有value属性,那就使用标签之间的文本【Opel】即可
第9行中有value属性,标签内也有文本值的时候,首先填写value的值4,否则填写41的话是没有用的

你可能感兴趣的:(Node+puppeteer学习笔记(十)--API问题解决--选择标准下拉框和非标准下拉框)