如何使用 puppeteer 獲取 javascript 設置的鏈接

Question

在https://www.popcornflix.com/channels/details/actionthrillers ，我試圖獲取點擊電影時瀏覽器轉到的鏈接。 第一部電影的選擇器是：

#main-view > div > ui-view > div > div > div:nth-child(2) > div > div.ng-scope > div > div:nth-child(1)

但是該div內的任何地方似乎都沒有href，所以我假設每次您單擊它時，它都會由javascript使用屬性“ng-click”設置。 這是元素本身：

<div class="grid-item-container grid-video-container thumbrow-item ng-scope" ng-repeat="item in vm.items" ng-include="&quot;includes/movie-card-item.html&quot;" ng-click="vm.onItemClick($event, $index, item)"></div>

我如何獲得 URL 而無需先點擊它？ 或者有沒有辦法強制它在另一個選項卡中打開鏈接？ 我試圖不離開當前標簽。 提前致謝

Answer 1

正如您已經懷疑的那樣：只有單擊鏈接然后保存當前的 url，才能通過瀏覽器自動化收集鏈接。

如果您多次使用browser.newPage和page.goto ，則只能強制打開新選項卡上的鏈接。 但它需要知道鏈接列表，你還沒有什么。

理論上

如果您想檢索鏈接，您可以研究電影頁面的 URL，URL-s 的結構，然后您可以將它們連接成baseurl + path + slug格式。 例如：

const url = 'https://www.popcornflix.com/' + 'movie/' + '18-v0b12bzgha2f-mutant-chronicles'

（訪問頁面時，URL 參數不是必需的）

每個單頁應用程序都來自 api 端點，該端點主要在瀏覽器的網絡中可用，因此在這種情況下， ng-click是基於來自 Z8A5DA52ED126447D359E70C08A 的 JSON 數據執行的。 通過最少的逆向工程，您可以從 JSON 中檢索頁面的 slug。

const apiURLpattern = '...'
let apiResponse
page.on('response', async response => {
  if (response.url().includes(apiURLpattern)) {
    apiResponse = await response.json()
    }
  })
await page.goto(...

... 理論上。

不幸的是，網站所有者不允許這樣做： https://www.popcornflix.com/pages/about/a/terms

15. 禁止使用本網站。

(o) 您同意不進行反向工程、反編譯、反匯編或以其他方式試圖發現本網站或其任何部分的源代碼，除非且僅在適用法律明確允許此類活動的范圍內，盡管有此限制。

同一段條款不允許刮擦：

(j) 您同意，未經我們事先明確的書面許可，您不會出於任何目的使用任何機器人、蜘蛛、刮板或其他自動化手段訪問本網站，也不會繞過我們的機器人排除標頭或我們可能用來防止或限制的其他措施訪問網站。

建議

如果您出於個人目的需要它，我建議聯系所有者並要求訪問他們的 API。 或者，如果您需要電影詳細信息：TMDb 的 api 可免費使用並擁有龐大的數據庫： https://developers.themoviedb.org/3