【PUPPETEER】初探之元素獲取（二）

一、涉及的知識點

1. 如何使用css selector
2. 常用元素獲取
3. $ 元素選擇
4. type （api 輸入）
5. click (api 點擊)

二、學習網址

• https://github.com/GoogleChrome/puppeteer/blob/v1.19.0/docs/api.md

三、環境

• node js
• puppeteer
• 編輯器 vscode 

四、實例

         -- 常用元素選擇器

選擇器	示例	解釋
id選擇器	#id	選擇匹配id的元素，僅存在一個
class選擇器	.class	同時匹配多個class 元素
屬性選擇器	div[attr]	匹配具有attr的屬性，不考慮他的值
屬性選擇器	div[attr='122']	匹配具有attr的屬性，值為122
后代選擇器	div span	后代選擇器，匹配所有div 后面的span標簽，div 與 span之間用空格隔開
子元素選擇器	div > span	子元素選擇器，匹配div 后所有的span
匹配父元素下的第n個子元素	div:nth-child(2)	匹配父元素下的第2個元素

1. id 選擇器

實例網址：https://www.cnblogs.com/

代碼演示：

const puppeteer = require('puppeteer');
(async () => {
    const brower = await puppeteer.launch({
        executablePath:'D:\\wangxiao\\chrome-win\\chrome-win\\chrome.exe',
        headless:false
    });
    const page = await brower.newPage();
    await page.goto('https://www.cnblogs.com/');
    const input = await page.$('#zzk_q');
    input.type('12222');
    //await brower.close();
})().catch(error =>{console.log('error')});

2.nth-child(n) 靈活運用  

這里不一一演示了，演示主要的，比如子級，如圖，我們想登入，但是登入沒有id,也沒有class, 那我們試試其他方式，往父級看，

 

 

有唯一id = 'span_userinfo' ,那么我們可以手寫成

獲取所有的a標簽 - > 

　　　　element  = '#span_userinfo a'  

獲取登入的超級鏈接

　　　　element = '#span_userinfo a:nth-child(1)'

我們代碼驗證一下對不對

const puppeteer = require('puppeteer');
(async () => {
    const brower = await puppeteer.launch({
        executablePath:'D:\\wangxiao\\chrome-win\\chrome-win\\chrome.exe',
        headless:false
    });
    const page = await brower.newPage();
    await page.goto('https://www.cnblogs.com/');
    await page.click('#span_userinfo a:nth-child(1)')
    //await brower.close();
})().catch(error =>{console.log('error')});

　

五、學會css Selector

步驟：

1.打開瀏覽器開發者工具(F12)

2.在瀏覽器的Console窗口中使用document.querySelectorAll調試你的css選擇器