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();