如何使用 puppeteer（Node.js 應用程序）抓取 instagram 帖子 URL

Question

隨着對當前 Instagram API 的所有更改，我試圖構建一個刮板。 環顧四周后，我找到了傀儡師。 雖然看起來很簡單，但我遇到了一個問題，我似乎無法解決問題。

問題如下：我知道帖子的 div 標簽是什么(.v1Nh3.kIKUG._bz0w)以及如何調用它(elements = await page.$$('.v1Nh3.kIKUG._bz0w');)

如果我正確理解 $ function 這應該返回給我一個 promise 包含“頁面”上所有帖子的數組。

我的第一個問題是這個假設是否正確，我的第二個問題是如何將數組取出。 （如果一切正常，如何獲得子 href 中包含的重定向 URL ）

Answer 1

為了獲取具有特定 class 的元素並返回它們，您必須使用page.evaluate方法。 這是一個異步調用，它返回 promise。

因此，在您的用例中，它應該如下所示：

const result = await page.evaluate(() => {
    let elements = document.querySelectorAll('.v1Nh3.kIKUG._bz0w');

    let elementsArr = [];
    //Loop over elements in the array and create objects from each element 
    //with the data relevant to your logic
    for (let element of elements) {
        resultArr.push({
           //your logic
        });
    }
    return elementsArr;
});

Answer 2

首先要做的事情是：由於 Instagram 是一個由 javascript 驅動的重型 React 應用程序，因此您所使用的選擇器在頁面加載后可能無法立即使用。 所以我們應該等待它們出現在 DOM 中：

await page.waitForSelector('.v1Nh3.kIKUG._bz0w');

現在使用 page.evaluate 我們得到帖子，但由於您只想要這些帖子中的鏈接，讓我們立即在查詢中獲取它們：

const result = await page.evaluate(() => {
    // Get elements into a NodeList
    const elements = document.querySelectorAll('.v1Nh3.kIKUG._bz0w a');
    ...
}

但是我們不能將元素從 Nodelist 轉換為 Array 並返回它們，因為它們仍然是 DOM 節點，復雜的不可序列化對象，它們需要可序列化才能從page.evaluate返回。 因此，我們不會返回完整的節點，而是得到我們需要的：來自 href 屬性的 url：

const result = await page.evaluate(() => {
    // Get elements into a NodeList
    const elements = document.querySelectorAll('.v1Nh3.kIKUG._bz0w a');

    // Convert elements to an array, 
    // then for each item of that array only return the href attribute
    const linksArr = Array.from(elements).map(link => link.href);

    return linksArr;
});

其他方法

在您的問題中，您提到了page.$$方法。 這里確實適用於獲取我們尋找的對象的句柄。 但是迭代它們的代碼並不漂亮：

const results = await page.$$('.v1Nh3.kIKUG._bz0w a')
for (const i in results)
{
   console.log(await(await(await results[i]).getProperty("href")).jsonValue());
}

我最喜歡的獲取這些鏈接的方法是使用page.$$eval方法：

const results = await page.$$eval('.v1Nh3.kIKUG._bz0w a', links => links.map(link => link.href))

它與我們在page.evaluate解決方案中所做的完全相同，但方式更加簡潔。