官方英文版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