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

Puppeteer系列

1、Puppeteer筆記（一）：Puppeteer簡介

2、Puppeteer筆記（二）：Puppeteer安裝及實例Demo

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

4、Puppeteer筆記（四）：Puppeteer模擬鍵盤 

5、Puppeteer筆記（五）：Puppeteer文件上傳 

6、Puppeteer筆記（六）：Puppeteer切換frame操作 

7、Puppeteer筆記（七）：Puppeteer切換瀏覽器TAB頁 

8、Puppeteer筆記（八）：Puppeteer執行自定義Javascript方法 

一、獲取元素及元素屬性

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

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

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

　　有時候我們需要獲取某個 Input 的 value ，某個鏈接的 href ，某個節點的文本 textContent ，或者 outerHTML ，那么你可以使用這個方法：

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

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

二、上手實例Demo

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

const puppeteer = require('puppeteer');
//puppeteer，獲取元素、獲取單個元素屬性、獲取多個元素屬性
async function jd() {
    //創建一個Browser瀏覽器實例，並設置相關參數
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
        args: ['--start-maximized'],
        ignoreDefaultArgs: ['--enable-automation']
    });
    //創建一個Page實例
    const page = await browser.newPage();
    //跳轉JD首頁
    await page.goto("https://www.jd.com");
    //獲取輸入框元素並在輸入框內輸入‘手機’
    const input = await page.$('#key');
    await input.type('手機');
    //模擬鍵盤“回車”鍵
    await page.keyboard.press('Enter');
    //等待元素加載成功
    await page.waitForSelector('#J_goodsList > ul > li:nth-child(1)');
    //獲取元素innerText屬性
    const firstText = await page.$eval('#J_goodsList > ul > li:nth-child(1)', el => el.innerText);
    console.log('firstText', firstText);
    //獲取一組元素的innerText屬性
    //await page.waitForSelector('ul.gl-warp>li');
    //const list = await page.$$eval('ul.gl-warp>li', eles => eles.map(ele => ele.innerText));
    //console.log('list', list);
}
jd();