puppeteer使用

[comTg]

安装

npm i puppeteer puppeteer-core

注意 .npmrc中配置PUPPETEER_SKIP_DOWNLOAD=true可跳过chromium的安装

使用

• 初始化

  const browser = await puppeteer.launch({
  executablePath: path.resolve('C://Program Files/Google/Chrome/Application/chrome.exe'),
  timeout: 5000,
  headless: false, // 是否关闭gui模式
  // slowMo: 250, // 将puppeteer的操作减慢250ms
  args: ['--start-maximized'], // 设置窗口最大化
  });
  const page = await browser.newPage(); // page对象

• 打开页面

  await page.goto(SIMWORLDURL, {
  waitUntil: 'networkidle0'
  });
  /**
  * waitUntil: 什么时候认为导航加载成功
  * load: window.onload事件被触发
  * domcontentloaded: DomcontentLoaded事件触发
  * networkidle0: 在500ms内没有网络连接时就算成功(全部的request结束), 才认为导航结束
  * networkidle2: 在500ms内有不超过2个网络连接时就算成功, 认为导航完成
  */
  // 设置网页大小
  await page.setViewport({
  width: 1920,
  height: 1080,
  });

• 等待特定选择器显示

  // await page.waitForSelector('#manage-trips', { visible: true, timeout: 0 }); // 等待特定选择器显示

• 输入内容

  await page.type(".devsite-search-field", "Headless Chrome", {
  delay: 100, // 每个字母输入的间隔
  }); // 输入框中填入内容

• 按键

  await page.keyboard.press("Enter"); // 按Enter键

• 鼠标操作

  
  await page.mouse.move(x,y); // 鼠标移动
  await page.mouse.down();
  await page.mouse.move(x,y,{steps:z});
  await page.mouse.up();

// 如何获取元素x y 坐标值 let element = await page.$("");

let box = await element.boundingBox();

elementHandle.boundingBox() returns: <Promise<?Object>> x 元素的 x 坐标（以像素为单位）。 y 元素的 y 坐标（以像素为单位）。 width 元素的像素宽度。 height 元素的像素高度。 //

[comTg]

保存为pdf或截图

 // 保存pdf
  await page.pdf({
    path: "puppeteer.pdf",
    format: "a2",
  });

// 截图
await page.screenshot({
    path: 'test.png'
  });

[comTg]

在浏览器的上下文中执行JS代码

const dimensions = await page.evaluate(() => {
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio,
    };
  });

[comTg]

从页面中获取爬取结果

  const links = await page.evaluate((resultsSelector) => {
    const anchors = Array.from(document.querySelectorAll(resultsSelector));
    return anchors.map((anchor) => {
      const title = anchor.textContent.split("|")[0].trim();
      return `${title} - ${anchor.href}`;
    });
  }, resultsSelector);

[comTg]

填充表单并提交

await page.type(".devsite-search-field", "Headless Chrome"); // 输入框中填入内容
 // 按Enter键
 await page.keyboard.press("Enter");
 // 等待结果返回
  const resultsSelector = ".gsc-result .gs-title";
  await page.waitForSelector(resultsSelector);