這是簡(jiǎn)易數(shù)據(jù)分析系列的第 13 篇文章。
本文首發(fā)于博客園：簡(jiǎn)易數(shù)據(jù)分析 13。
不知不覺，web scraper 系列教程我已經(jīng)寫了 10 篇了，這 10 篇內(nèi)容，基本上覆蓋了 Web Scraper 大部分功能。今天的內(nèi)容算這個(gè)系列的最后一篇文章了，下一章節(jié)我會(huì)開一個(gè)新坑，說說如何利用 Excel 對(duì)收集到的數(shù)據(jù)做一些格式化的處理和分析。
Web Scraper 教程的全盤總結(jié)我放在下一篇文章，今天先開始我們的實(shí)戰(zhàn)教程。
在前面的課程里，我們抓取的數(shù)據(jù)都是在同一個(gè)層級(jí)下的內(nèi)容，探討的問題主要是如何應(yīng)對(duì)市面上的各種分頁類型，但對(duì)于詳情頁內(nèi)容數(shù)據(jù)如何抓取，卻一直沒有介紹。
比如說我們想抓取 b 站的動(dòng)畫區(qū) TOP 排行榜的數(shù)據(jù)：
https://www.bilibili.com/ranking/all/1/0/3
按之前的抓取邏輯，我們是把這個(gè)榜單上和作品有關(guān)的數(shù)據(jù)抓取一遍，比如說下圖里的排名、作品名字、播放量、彈幕數(shù)和作者名。
經(jīng)常逛 B 站的小伙伴也知道，UP 主經(jīng)常暗示觀看視頻小伙伴三連操作（點(diǎn)贊+投幣+收藏），由此可見，這 3 個(gè)數(shù)據(jù)對(duì)視頻的排名有一定的影響力，所以這些數(shù)據(jù)對(duì)我們來說也有一定的參考價(jià)值。
但遺憾的是，在這個(gè)排名列表里，并沒有相關(guān)數(shù)據(jù)。這幾個(gè)數(shù)據(jù)在視頻詳情頁里，需要我們點(diǎn)擊鏈接進(jìn)去才能看到：
今天的教程內(nèi)容，就是教你如何利用 Web Scraper，在抓取一級(jí)頁面（列表頁）的同時(shí)，抓取二級(jí)頁面（詳情頁）的內(nèi)容。
1.創(chuàng)建 SiteMap
首先我們找到要抓取的數(shù)據(jù)的位置，關(guān)鍵路徑我都在下圖的紅框里標(biāo)出來了，大家可以對(duì)照一下：
然后創(chuàng)建一個(gè)相關(guān)的 SiteMap，這里我取了個(gè) bilibili_rank 的名字：
2.創(chuàng)建容器的 selector
設(shè)置之前我們先觀察一下，發(fā)現(xiàn)這個(gè)網(wǎng)頁的排行榜數(shù)據(jù)是 100 條數(shù)據(jù)一次性加載完的，沒有分頁的必要，所以這里的 Type 類型選為 Element 就行。
其他的參數(shù)都比較簡(jiǎn)單，就不細(xì)說了（不太懂的可以看我之前的基礎(chǔ)教程）這里截個(gè)圖大家可以做個(gè)參考：
3.創(chuàng)建列表頁子選擇器
這次子選擇器要抓取的內(nèi)容如下，也都比較簡(jiǎn)單，截個(gè)圖大家可以參考一下：
- 排名（num）
- 作品標(biāo)題（title）
- 播放量（play_amount）
- 彈幕量（danmu_count）
- 作者：（author）
如果做到這一步，其實(shí)已經(jīng)可以抓到所有已知的列表數(shù)據(jù)了，但本文的重點(diǎn)是：如何抓取二級(jí)頁面（詳情頁）的三連數(shù)據(jù)？
跟著做了這么多爬蟲，可能你已經(jīng)發(fā)現(xiàn)了，Web Scraper 本質(zhì)是模擬人類的操作以達(dá)到抓取數(shù)據(jù)的目的。
那么我們正常查看二級(jí)頁面（詳情頁）是怎么操作的呢？其實(shí)就是點(diǎn)擊標(biāo)題鏈接跳轉(zhuǎn)：
Web Scraper 為我們提供了點(diǎn)擊鏈接跳轉(zhuǎn)的功能，那就是 Type 為 Link 的選擇器。
感覺有些抽象？我們對(duì)照例子來理解一下。
首先在這個(gè)案例里，我們獲取了標(biāo)題的文字，這時(shí)的選擇器類型為 Text：
當(dāng)我們要抓取鏈接時(shí)，就要再創(chuàng)建一個(gè)選擇器，選的元素是一樣的，但是 Type 類型為 Link：
創(chuàng)建成功后，我們點(diǎn)擊這個(gè) Link 類型的選擇器，進(jìn)入他的內(nèi)部，再創(chuàng)建相關(guān)的選擇器，下面我錄了個(gè)動(dòng)圖，注意看我鼠標(biāo)強(qiáng)調(diào)的導(dǎo)航路由部分，可以很清晰的看出這幾個(gè)選擇器的層級(jí)關(guān)系：
4.創(chuàng)建詳情頁子選擇器
當(dāng)你點(diǎn)擊鏈接后就會(huì)發(fā)現(xiàn)，瀏覽器會(huì)在一個(gè)新的 Tab 頁打開詳情頁，但是 Web Scraper 的選擇窗口開在列表頁，無法跨頁面選擇想要的數(shù)據(jù)。
處理這個(gè)問題也很簡(jiǎn)單，你可以復(fù)制詳情頁的鏈接，拷貝到列表頁所在的 Tab 頁里，然后回車重新加載，這樣就可以在當(dāng)前頁面選擇了。
我們?cè)陬愋蜑?Link 的選擇器內(nèi)部多創(chuàng)建幾個(gè)選擇器，這里我選擇了點(diǎn)贊數(shù)、硬幣數(shù)、收藏?cái)?shù)和分享數(shù) 4 個(gè)數(shù)據(jù)，這個(gè)操作也很簡(jiǎn)單，這里我就不詳細(xì)說了。
所有選擇器的結(jié)構(gòu)圖如下：
我們可以看到 video_detail_link 這個(gè)節(jié)點(diǎn)包含 4 個(gè)二級(jí)頁面（詳情頁）的數(shù)據(jù)，到此為止，我們的子選擇器已經(jīng)全部建立好了。
5.抓取數(shù)據(jù)
終于到了激動(dòng)人心的環(huán)節(jié)了，我們要開始抓取數(shù)據(jù)了。但是抓取前我們要把等待時(shí)間調(diào)整得大一些，默認(rèn)時(shí)間是 2000 ms，我這里改成了 5000 ms。
為什么這么做？看了下圖你就明白了：
首先，每次打開二級(jí)頁面，都是一個(gè)全新的頁面，這時(shí)候?yàn)g覽器加載網(wǎng)頁需要花費(fèi)時(shí)間；
其次，我們可以觀察一下要抓取的點(diǎn)贊量等數(shù)據(jù)，頁面剛剛加載的時(shí)候，它的值是 「--」，等待一會(huì)兒后才會(huì)變成數(shù)字。
所以，我們直接等待 5000 ms，等頁面和數(shù)據(jù)加載完成后，再統(tǒng)一抓取。
配置好參數(shù)后，我們就可以正式抓取并下載了。下圖是我抓取數(shù)據(jù)的一部分，特此證明此方法有用：
6.總結(jié)
這次的教程可能有些難度，我把我的 SiteMap 分享出來，制作的時(shí)候如果遇到難題，可以參考一下我的配置，SiteMap 導(dǎo)入的功能我在第 6 篇教程里詳細(xì)說明了，大家可以配合食用：
{"_id":"bilibili_rank","startUrl":["https://www.bilibili.com/ranking/all/1/0/3"],"selectors":[{"id":"container","type":"SelectorElement","parentSelectors":["_root"],"selector":"li.rank-item","multiple":true,"delay":0},{"id":"title","type":"SelectorText","parentSelectors":["container"],"selector":"a.title","multiple":false,"regex":"","delay":0},{"id":"author","type":"SelectorText","parentSelectors":["container"],"selector":"a span","multiple":false,"regex":"","delay":0},{"id":"play_amount","type":"SelectorText","parentSelectors":["container"],"selector":".detail > span:nth-of-type(1)","multiple":false,"regex":"","delay":0},{"id":"danmu_amount","type":"SelectorText","parentSelectors":["container"],"selector":"span:nth-of-type(2)","multiple":false,"regex":"","delay":0},{"id":"video_detail_link","type":"SelectorLink","parentSelectors":["container"],"selector":"a.title","multiple":false,"delay":0},{"id":"coin","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":"span.coin","multiple":false,"regex":"","delay":0},{"id":"collect","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":"span.collect","multiple":false,"regex":"","delay":0},{"id":"share","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":"span.share","multiple":false,"regex":"[0-9]+","delay":0},{"id":"num","type":"SelectorText","parentSelectors":["container"],"selector":"div.num","multiple":false,"regex":"","delay":0},{"id":"like","type":"SelectorText","parentSelectors":["video_detail_link"],"selector":".ops span.like","multiple":false,"regex":"","delay":0}]}
當(dāng)你掌握了二級(jí)頁面的抓取方式后，三級(jí)頁面、四級(jí)頁面也不在話下。因?yàn)樘茁范际且粯拥模憾际窃?Link 選擇器指向的下一個(gè)頁面抓取數(shù)據(jù)，因?yàn)樵硎且粯拥?，我就不演示了?/p>
7.推薦閱讀
簡(jiǎn)易數(shù)據(jù)分析 06 | 如何導(dǎo)入別人已經(jīng)寫好的 Web Scraper 爬蟲
簡(jiǎn)易數(shù)據(jù)分析 05 | Web Scraper 翻頁——控制鏈接批量抓取數(shù)據(jù)
簡(jiǎn)易數(shù)據(jù)分析 08 | Web Scraper 翻頁——點(diǎn)擊「更多按鈕」翻頁
簡(jiǎn)易數(shù)據(jù)分析 10 | Web Scraper 翻頁——抓取「滾動(dòng)加載」類型網(wǎng)頁
