无头浏览器初体验-事件点击

发表于 | 分类于

以下功能基于puppeteer实现
中文文档
英文文档

  1. 引入插件，并且打开启动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const puppeteer = require('puppeteer');

(async () => {
    browser = await puppeteer.launch({
       headless: true,
       // defaultViewport: { width: 1920, height: 1080 }, 
       // args: ['--start-maximized'], 
     });
     const page = await browser.newPage();
     await page.goto('http://localhost:9527/index'); // 要爬取的网页URL  
     const data = await page.evaluate(() => {
        // 在浏览器环境中执行的代码，可以访问DOM并获取数据  
        // 返回需要的数据  
        return document.body.innerHTML;
   });

  //关闭浏览器
  // await browser.close();

})();
  1. 获取元素（方案一：）
1
2
3
//直接点击
await page.waitForSelector('#box');
await page.click('#box');
  1. 通过鼠标事件（方案二）
1
2
3
  //通过鼠标移动点击
let x = Math.floor(Math.random()*100+1)
await page.mouse.click(x, 100);

tips: 这种方法的前提是要知道，元素的位置，可通过以下方法获取元素位置：

1
2
3
4
  // 获取元素属性，位置，尺寸
let obj1 = await dom.boxModel()
let obj2 = await dom.boundingBox()
let offsetTop = await page.$eval('#box', el => el.offsetTop); //这里面可以使用js原生的一些方法获取元素尺寸，位置

4.完整代码片段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const puppeteer = require('puppeteer');

(async () => {
  browser = await puppeteer.launch({
    headless: true,
    // defaultViewport: { width: 1920, height: 1080 },  //页面默认尺寸
    // args: ['--start-maximized'],  //浏览器窗口最大化
  });
  const page = await browser.newPage();
  await page.goto('http://localhost:9527/index'); // 要爬取的网页URL  
  const data = await page.evaluate(() => {
    // 在浏览器环境中执行的代码，可以访问DOM并获取数据  
    // 返回需要的数据  
    return document.body.innerHTML;
  });

  //直接点击
  await page.waitForSelector('#box');
  await page.click('#box');

  let dom = await page.$('#box')
  await dom.click()

  // 获取元素属性，位置，尺寸
  // let obj = await dom.boxModel()
  // let obj = await dom.boundingBox()

  //通过鼠标移动点击
  // let x = Math.floor(Math.random()*100+1)
  // console.log(x)
  // await page.mouse.click(x, 100);

  //关闭浏览器
  await browser.close();

})();