puppeteer 自动化检测常用 API (第三弹)

本文是常用 puppeteer 技巧的最后一篇文章。希望大家在读完之后有所收获,文章中的代码相当于是一个个的单元,因此如果大家能够收藏一下供日后使用的话,笔者会非常感谢!

21. 获取点击跳转后新页面的 URL

  • 首先,设置一个监听新目标的 Promise,当浏览器中的目标改变时,这个 Promise 会解析出新的页面对象。
  • 使用 page.click 方法点击第一个符合 .shop 选择器的元素,这可能会导致页面跳转。
  • 使用之前设置的 Promise 获取新页面的对象,并从该对象中获取 URL。
js 复制代码
const newPagePromise = new Promise(x => browser.once('targetchanged', target => x(target.page())));
// 点击第一个 .shop 店铺,检测页面是否跳转。
await page.click(`${shopSelector}:nth-child(1)`);
const newPage = await newPagePromise;  
console.log(newPage.url());

22. 获取当前浏览器的历史浏览路径

  • 使用 browser.pages() 获取当前浏览器中的所有页面对象列表。
  • 遍历这个列表,使用 map 方法从每个页面对象中提取 URL,并返回一个新的 URL 列表。
js 复制代码
let pageList = await browser.pages();
let pageUrlList= pageList.map(item=>item.url());

23. 点击跳转后,获取跳转页面的链接

  • 这段代码与第21段非常相似,只是最后一步是获取新页面的 URL 而不是打印它。
  • 设置监听新目标的 Promise。
  • 点击 .shop 选择器的第一个元素。
  • 使用 Promise 获取新页面对象,并从中提取 URL。
js 复制代码
const newPagePromise = new Promise(x => browser.once('targetchanged', target => x(target.page())));
// 点击第一个 .shop 店铺,检测页面是否跳转。
await page.click(`${shopSelector}:nth-child(1)`);
const newPage = await newPagePromise;  
const newPageUrl = newPage.url();

24. 操作本地存储 localStorage

  • 使用 page.evaluate 方法在页面上下文中执行 JavaScript 代码。
  • 在这个上下文中,设置 localStorage 的一个项,键为 'token',值为 'example-token'。
js 复制代码
await page.evaluate(() => {
  localStorage.setItem('token', 'example-token');
});

25. page.evaluate 中直接调用外部 JS 函数

  • 定义一个名为 myFunc 的函数,该函数在控制台中打印 "lol"。
  • 使用 page.exposeFunction 方法将这个函数暴露给页面上下文,使其可以在 page.evaluate 中被调用。
  • page.evaluate 中调用这个函数并返回 true。注意,由于 evaluate 的上下文隔离性,通常不能直接在其中调用外部定义的函数,但 exposeFunction 提供了一种解决方法。
js 复制代码
// 参考文章:https://qa.1r1g.com/sf/ask/3311326581/
var myFunc = function() { 
console.log("lol");
};
await page.exposeFunction("myFunc", myFunc);
await page.evaluate(
async () => {
    await myFunc();
    return true ;
});

26. 页面间的跳转(兼容基于原生或框架开发两种情况)

  • 设置初始页面 URL 并创建一个新页面对象。
  • 获取当前浏览器中的所有页面对象,并检查它们的 URL 是否包含 "/#/",以确定页面是使用 hash 模式还是 history 模式。
  • 根据检测到的模式,设置要跳转的页面的 URL。
  • 创建一个新的页面对象并导航到设置的 URL。等待直到网络空闲再触发后续操作。
js 复制代码
    const pageURL = "http://localhost:8080/";
    const page = await browser.newPage();
    await page.setViewport({ width: 375, height: 667 });
    await page.goto(pageURL);
    
    let pageList = await browser.pages();
    let pageUrlList= pageList.map(item=>item.url());
    let isHash = pageUrlList.some(url => url.indexOf("/#/")!=-1);
    let checkerUrl = `${pageURL}shop.html?id=1`;
    if(isHash){
      checkerUrl = `${pageURL}#/shop/1`;
    }
    
    const newPage = await browser.newPage();
    await newPage.setViewport({ width: 375, height: 667 });
    await newPage.goto(checkerUrl, {
      waitUntil: "networkidle0", //不在有网络连接时候触发
    });

27. 检测通过导航跳转页面功能(兼容基于原生或框架开发两种情况)

  • 该段代码的描述似乎与第26段相似,但具体内容没有在提供的文本中显示。它可能涉及点击某个导航元素并检查页面是否正确地跳转到了预期的 URL。

28. 局部截图进行像素比对

  • 使用 $ 方法选择页面上的 ".app-box" 元素。
  • 对该元素进行截图,并将截图保存为 "box1.png" 文件。这可以用于后续的像素比对或视觉回归测试。
js 复制代码
    let box1 = await page.$(".app-box");
    await box1.screenshot({
      path: `box1.png`,
    });

29. 鼠标移入元素

  • 等待页面上出现 '#element' 选择器对应的元素。
  • 使用 $eval 方法获取该元素的边界矩形信息,特别是 x 和 y 坐标。
  • 使用 page.mouse.move 方法将鼠标移动到这些坐标上。
  • 模拟鼠标按下事件。注意这里没有模拟鼠标释放事件,但在实际应用中可能也需要这样做。
js 复制代码
await page.waitForSelector('#element');
const { x, y } = await page.$eval('#element', el => {
  const { x, y } = el.getBoundingClientRect();
  return { x, y };
});
await page.mouse.move(x, y);
await page.mouse.down()

30. 检测是否使用第三方库 (示例为 axios 和 jq )

  • 使用 page.evaluate 方法在页面上下文中执行代码,检查 axios$(通常代表 jQuery)是否定义。这将返回一个布尔值,指示这些库是否在页面上使用。

31. 检测 echarts

  • 使用 page.evaluate 方法在页面上下文中获取 echarts 实例,并从中提取系列数据和图例信息。这可以用于验证图表是否正确渲染或包含预期的数据。
js 复制代码
    // 在页面上下文中获取系列数据
    const seriesData = await page.evaluate(() => {
      const chartInstance = echarts.getInstanceByDom(document.querySelector('.echarts'));
      const seriesData = chartInstance?.getOption()?.series[0]?.data || [];
      // 遍历系列,提取每个系列的数据
      return seriesData
    });
    
     // 在页面上下文中获取图例相关信息
    const legendData = await page.evaluate(() => {
      const chartInstance = echarts.getInstanceByDom(document.querySelector('.echarts'));
      const legendData = chartInstance?.getOption()?.legend?.[0]?.data || [];
      return legendData;
    });

32. 原生下拉列表(select)操作

  • 使用 page.select 方法选择下拉列表中的选项。对于单选列表,传递选择器的值和要选择的选项的文本。对于多选列表,传递选择器的值和多个要选择的选项的文本。注意,当有 value 值时,默认是选择 value 值对应的选项;否则,根据文本内容选择。
js 复制代码
// 单选
await page.select(selector,"小花");

// 多选
await page.select(selector, "三叔", "闷油瓶");

// 需要注意的是:当有 value 值时默认是选择 value 值对应的选项,否则选中文本内容

33. 拦截请求修改请求数据(注意需要写在 page.goto 之前)

  • 创建一个模拟数据数组 mockData
  • 启动一个 puppeteer 浏览器实例,并创建一个新页面。
  • 在页面加载任何内容之前,通过设置 page.setRequestInterception(true) 来启用请求拦截。
  • 使用 page.on("request", callback) 监听页面上的所有请求。如果请求的 URL 以 "data.json" 结尾,则使用模拟数据响应请求;否则,继续原始请求。
  • 导航到指定的页面 URL,并等待直到页面完全加载和网络空闲。最后关闭浏览器实例。这段代码的主要目的是在测试期间模拟后端响应,以确保前端代码能够正确处理不同的数据场景。
js 复制代码
 const mockData =[ 
  { "value": 30, "name": "测试一" },
  { "value": 26, "name": "测试二" },
  { "value": 20, "name": "测试三" },
  { "value": 10, "name": "测试四" },
  { "value": 25, "name": "测试五" }
];
(async () => {
  let score = 0;
  try {
    const browser = await puppeteer.launch({
      headless: false,
      args: ["--no-sandbox", "--disable-setuid-sandbox"],
    });
    const page = await browser.newPage();
    
    // 拦截页面请求 
    await page.setRequestInterception(true);
    page.on("request", (request) => {
      if (request.url().endsWith(`data.json`)) {
        request.respond({
          content: "application/json",
          headers: { "Access-Control-Allow-Origin": "*" },
          body: JSON.stringify(mockData), // 返回的数据
        });
      } else {
        request.continue();
      }
     });
    // 拦截页面请求代码结束 
     
     await page.goto(pageURL, { waitUntil: ["domcontentloaded", "load", 'networkidle0', 'networkidle2'] });

     await  browser.close();
  } catch (error) {
    console.error(`测试未通过,报错为${error}`)
    process.exit(1);
  }
})();

下面是前两篇文章的链接,方便大家跳转:

第一篇:写文章 - puppeteer 自动化检测常用 API (第一弹) - 掘金 (juejin.cn)

第二篇:写文章 - puppeteer 自动化检测常用 API (第二弹) - 掘金 (juejin.cn)

相关推荐
亿牛云爬虫专家1 天前
深入探讨 Puppeteer 如何使用 X 和 Y 坐标实现鼠标移动
爬虫代理·puppeteer·鼠标·代理ip·小红书·16yun·用户行为
亿牛云爬虫专家3 天前
捕捉页面的关键元素:用CSS选择器与Puppeteer自动抓取
css·爬虫·爬虫代理·puppeteer·代理ip·机票·特价
亿牛云爬虫专家8 天前
捕获抖音截图:如何用Puppeteer保存页面状态
爬虫·爬虫代理·puppeteer·抖音·亿牛云·代理ip·douyin
亿牛云爬虫专家8 天前
Puppeteer教程:使用CSS选择器点击和爬取动态数据
javascript·css·爬虫·爬虫代理·puppeteer·代理ip
亿牛云爬虫专家10 天前
如何在Puppeteer中实现表单自动填写与提交:问卷调查
javascript·爬虫·爬虫代理·puppeteer·问卷调查·代理ip·表单
亿牛云爬虫专家16 天前
用Puppeteer点击与数据爬取:实现动态网页交互
javascript·爬虫·爬虫代理·puppeteer·数据·代理ip·16yun
黑金IT19 天前
Puppeteer点击系统:解锁百度流量点击率提升的解决案例
nodejs·puppeteer·百度排名
黑金IT25 天前
在浏览器中运行 Puppeteer:解锁新能力
nodejs·puppeteer·浏览器自动化
黑金IT25 天前
在浏览器和Node.js环境中使用Puppeteer的Rollup与Webpack打包指南
前端·webpack·node.js·puppeteer·浏览器自动化
亿牛云爬虫专家1 个月前
Puppeteer自动化:使用JavaScript定制PDF下载
javascript·爬虫·pdf·自动化·爬虫代理·puppeteer·代理ip