Node+puppeteer學習筆記(一)--select選擇標准下拉框和非標准下拉框


官方英文版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>
————————————————
版權聲明:本文為CSDN博主「qupan1993」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qupan1993/article/details/96358450

運行代碼如下,引入文件,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();
})();
————————————————
版權聲明:本文為CSDN博主「qupan1993」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/qupan1993/article/details/96358450

解析:
1、最重要的是第10行,使用page.select(’#select_01’,‘4’);函數,第一個參數是下拉框的定位,第二個參數是下拉框選項的value值
2、這里第二個參數value值填寫的時候有一些規則

 

 

第8行中沒有value屬性,那就使用標簽之間的文本【Opel】即可
第9行中有value屬性,標簽內也有文本值的時候,首先填寫value的值4,否則填寫41的話是沒有用的

 

 

轉載鏈接:https://blog.csdn.net/qupan1993/article/details/96358450

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM