Puppeteer筆記（三）：Puppeteer獲取元素及元素屬性

1、獲取元素及元素屬性

一、page.$(selector) 　　 獲取元素

 二、page.$$(selector) 　　 獲取元素組

三、page.$eval(selector,pageFunction[,...args]) 　　 獲取單個元素屬性

　　有時候咱們須要獲取某個 Input 的 value ，某個連接的 href ，某個節點的文本 textContent ，或者 outerHTML ，那麼你能夠使用這個方法：

1 const searchValue = await page.$eval('#search', el => el.value); 2 const preloadHref = await page.$eval('link[rel=preload]', el => el.href); 3 const text = await page.$eval('.text', el => el.textContent); 4 const html = await page.$eval('.main-container',e => e.outerHTML);

四、page.$$eval(selector,pageFunction[,...args]) 　　獲取多個元素屬性

2、上手實例Demo

　　Puppeteer獲取元素及元素屬性的實例Demo，功能測試：打開京東首頁，搜索查詢"手機"，獲取單個手機的文案或多個手機的文案。

 1 const puppeteer = require('puppeteer');  2 //puppeteer，獲取元素、獲取單個元素屬性、獲取多個元素屬性
 3 async function jd() {  4     //建立一個Browser瀏覽器實例，並設置相關參數
 5     const browser = await puppeteer.launch({  6         headless: false,  7         defaultViewport: null,  8         args: ['--start-maximized'],  9         ignoreDefaultArgs: ['--enable-automation'] 10  }); 11     //建立一個Page實例
12     const page = await browser.newPage(); 13     //跳轉JD首頁
14     await page.goto("https://www.jd.com"); 15     //獲取輸入框元素並在輸入框內輸入‘手機’
16     const input = await page.$('#key'); 17     await input.type('手機'); 18     //模擬鍵盤「回車」鍵
19     await page.keyboard.press('Enter'); 20     //等待元素加載成功
21     await page.waitForSelector('#J_goodsList > ul > li:nth-child(1)'); 22     //獲取元素innerText屬性
23     const firstText = await page.$eval('#J_goodsList > ul > li:nth-child(1)', el => el.innerText); 24     console.log('firstText', firstText); 25     //獲取一組元素的innerText屬性
26     //await page.waitForSelector('ul.gl-warp>li');
27     //const list = await page.$$eval('ul.gl-warp>li', eles => eles.map(ele => ele.innerText));
28     //console.log('list', list);
29 } 30 jd();