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

时间：2021-12-02 21:06:33

一、涉及的知识点

  1. 如何使用css selector
  2. 常用元素获取
  3. $ 元素选择
  4. type （api 输入）
  5. click (api 点击)

二、学习网址

三、环境

  • 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/

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

代码演示：

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, 那我们试试其他方式，往父级看，

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

 

 

有唯一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选择器

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

 

标签：

相关文章