Web Scraping — 使用 Nodejs、Playwright 和 Firebase 从您的 Instagram 页面抓取数据。

介绍如何使用 playwright、nodejs 和 firebase 进行网络抓取。

介绍如何使用 playwright、nodejs 和 firebase 进行网络抓取。

先决条件

如果您想遵循本教程，您将需要以下内容：

• Firebase 基础知识和 Firebase 帐户https://firebase.google.com/
• JavaScript 基础知识
• 首选编码编辑器 Vscode
• API 开发/调试工具。

什么是网页抓取？

Web Scrapping 是指从网站中提取数据。这些信息
被收集并导出为对用户更有用的格式（例如 csv）
。

什么是无头浏览器？

你可能听说过“无头浏览器”这个词，但仍然不知道它的
含义。不用担心，互联网会支持我们 🙂

无头浏览器在与流行的网络浏览器类似的环境中提供对网页的自动控制
，但通过命令行界面
或使用网络通信来执行。
维基百科。

以下是一些最受欢迎的无头浏览器👇

Puppeteer：Puppeteer 是一个
Node 库，它提供了高级 API，可以
通过 DevTools 协议控制无头 Chrome 或 Chromium。它也可以配置为使用完整
（非无头）的 Chrome 或 Chromium。

Playwright：Playwright 是由微软开发的 Node 库，
通过单一 API 即可自动化 Chromium、Firefox 和 WebKit。Playwright
旨在实现跨浏览器的 Web 自动化，持久耐用、功能强大、
可靠且快速。

初始设置🚀

让我们首先初始化 JavaScript 的 Firebase 云函数：

firebase init functions

cd functions

npm install playwright

这将安装 Playwright 以及适用于 Chromium、Firefox 和 WebKit 的浏览器二进制文件。
安装完成后，您可以在 Node.js 脚本中引用 Playwright，并自动执行 Web
浏览器交互。

现在让我们创建我们的 Instagram Scraper

Instagram 网页版使用 React，这意味着
在页面完全加载之前，我们看不到任何动态内容。Playwright 在 Clould Functions
运行时中可用，允许您在服务器上启动 Chrome/Firefox/Webkit 浏览器。它将像您 现在
使用的浏览器一样渲染 JavaScript 并处理事件。

首先，该函数登录一个真实的 Instagram 帐户。page.type 方法
会找到对应的 DOM 元素并在其中输入字符。登录后
，我们会导航到特定的用户名，等待 img 标签在
屏幕上渲染，然后从中抓取 src 属性。

const functions = require('firebase-functions');
const playwright = require('playwright');

exports.scrapeImages = functions.https.onRequest(async (req, res) => {
  // Randomly select a browser
  // You can also specify a single browser that you prefer
  for (const browserType of ['firefox', 'chromium', 'webkit']) {
    console.log(browserType); // To know the chosen one 😁
    const browser = await playwright[browserType].launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('https://www.instagram.com/accounts/login/');

    await page.waitForSelector('[type=submit]', {
      state: 'visible',
    });
    // You can also take screenshots of pages
    await page.screenshot({
      path: `ig-sign-in.png`,
    });
    await page.type('[name=username]', '<your-username>'); // ->
    await page.type('[type="password"]', '<your-password>'); // ->

    await page.click('[type=submit]');
    await page.waitForSelector('[placeholder=Search]', { state: 'visible' });
    await page.goto(`https://www.instagram.com/<your-username>`); // ->
    await page.waitForSelector('img', {
      state: 'visible',
    });
    await page.screenshot({ path: `profile.png` });
    // Execute code in the DOM
    const data = await page.evaluate(() => {
      const images = document.querySelectorAll('img');
      const urls = Array.from(images).map((v) => v.src);
      return urls;
    });
    await browser.close();
    console.log(data);
    // Return the data in form of json
    return res.status(200).json(data);
  }
});

用有效凭证替换突出显示的字段。

现在我们需要测试我们的 API，为此我们需要一个 API
调试工具，我推荐Insomnia，因为它是
我用过的最好的 API 工具，而且功能丰富。你也可以使用Postman
之类的工具。

通过运行以下命令启动开发服务器：

npm run serve

打开 Insomnia 并从您的 firebase dev 服务器向生成的 url 发送 post 请求。

例子http://localhost:5001/playwright-faecb/us-central1/scrapeImages

在上图中，您可以看到
右侧用黄色标记的响应 JSON 数据。它是一个指向
Instagram 页面上各个图片的 URL 数组。

让我们一步步回顾，以便更好地理解我们正在做的事情。

Playwright 为我们提供了三种不同的浏览器类型，所以为什么不同时尝试
其中三种呢？

1. 我们循环遍历这三种浏览器类型['chromium', 'firefox', 'webkit']。

2. launch()
   我们使用 launch 方法启动一个新的浏览器。

3. newContext()
   创建一个新的浏览器上下文。
   浏览器上下文
   为我们提供了大多数操作，例如在浏览器中创建新标签页。

4. goto
   方法导航到指定的 URL 路径。

5. waitForSelector()
   等待元素在浏览器中出现或不存在。

6. screeshot()
   对当前页面进行截图。

7. text()
   为我们提供了填写表单字段的能力。

8. click()
   允许我们点击 dom 中的元素或页面。

9. 您可以在此函数的回调
   中做很多事情；但是，我们只是在回调中返回每个图像的值
   。src

10. 
    正如您所知， browser.close()会破坏我们当前的浏览器。

您可以对数据做任何您想做的事情（下载图像），但在我们的例子中，
我们只是在控制台上将其注销并将其作为 JSON 字符串返回，并带有
200 响应以查看它是什么样子。

结论

大多数时候，坏人会使用这种技术从
网站非法提取数据，我很确定阅读本文的人不是其中之一。

永远记住要好好利用你的代码 🙂

完整代码：https://github.com/dnature/playwright-example

我希望你觉得这有帮助。

祝你编码愉快💻🙂。

您也可以查看我的博客，了解其他与技术相关的文章。https ://divinehycenth.com/blog