scrapy 2.3 查看網(wǎng)站

到目前為止，開發(fā)人員工具最方便的特性是 Inspector feature, which allows you to inspect the underlying HTML code of any webpage. To demonstrate the Inspector, let's look at the quotes.toscrape.com 現(xiàn)場(chǎng)。

在這個(gè)網(wǎng)站上，我們總共有來自不同作者的十個(gè)引用，其中有特定的標(biāo)簽，還有前十個(gè)標(biāo)簽。假設(shè)我們想要提取這個(gè)頁面上的所有引用，而不需要任何關(guān)于作者、標(biāo)簽等的元信息。

我們不必查看頁面的整個(gè)源代碼，只需右鍵單擊一個(gè)報(bào)價(jià)并選擇 ?Inspect Element (Q)? 打開了 Inspector . 在里面你應(yīng)該看到這樣的東西：

我們感興趣的是：

<div class="quote" itemscope="" itemtype="http://schema.org/CreativeWork">
  <span class="text" itemprop="text">(...)</span>
  <span>(...)</span>
  <div class="tags">(...)</div>
</div>

如果你在第一個(gè)上面徘徊 ?div? 正上方 ?span? 在屏幕截圖中突出顯示的標(biāo)簽，您將看到網(wǎng)頁的相應(yīng)部分也會(huì)突出顯示?，F(xiàn)在我們有了一個(gè)部分，但是我們?cè)谌魏蔚胤蕉颊也坏綀?bào)價(jià)文本。

的優(yōu)勢(shì) Inspector 它自動(dòng)展開和折疊網(wǎng)頁的部分和標(biāo)簽，大大提高了可讀性。您可以通過單擊標(biāo)簽前面的箭頭或直接雙擊標(biāo)簽來展開和折疊標(biāo)簽。如果我們擴(kuò)大 ?span? 帶標(biāo)簽 ?class= "text"? 我們將看到我們單擊的報(bào)價(jià)文本。這個(gè) Inspector 允許您將xpath復(fù)制到選定的元素。讓我們?cè)囋嚳础?/p>

首先在http://quotes.toscrape.com/在終端中：

$ scrapy shell "http://quotes.toscrape.com/"

然后，返回web瀏覽器，右鍵單擊 ?span? 選擇標(biāo)記 ?Copy > XPath? 然后把它貼在這個(gè)破殼里：

>>> response.xpath('/html/body/div/div[2]/div[1]/div[1]/span[1]/text()').getall()
['“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”']

添加 ?text()? 最后，我們可以用這個(gè)基本選擇器提取第一個(gè)報(bào)價(jià)。但這個(gè)xpath并沒有那么聰明。它所做的就是在源代碼中沿著所需的路徑從 ?html? . 那么讓我們看看我們是否可以改進(jìn)一下xpath：

如果我們檢查 Inspector 我們將再次看到，在我們的 ?div? 標(biāo)簽我們有九個(gè)相同的 ?div? 標(biāo)簽，每個(gè)標(biāo)簽都具有與第一個(gè)相同的屬性。如果我們擴(kuò)展其中任何一個(gè)，我們將看到與第一個(gè)報(bào)價(jià)相同的結(jié)構(gòu)：兩個(gè) ?span? 標(biāo)簽和一個(gè) ?div? 標(biāo)簽。我們可以擴(kuò)大每個(gè) ?span? 帶標(biāo)簽 ?class="text"? 在我們內(nèi)部 ?div? 標(biāo)記并查看每個(gè)引用：

<div class="quote" itemscope="" itemtype="http://schema.org/CreativeWork">
  <span class="text" itemprop="text">
    “The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”
  </span>
  <span>(...)</span>
  <div class="tags">(...)</div>
</div>

有了這些知識(shí)，我們可以改進(jìn)我們的xpath：我們只需選擇 ?span? 標(biāo)簽與 ?class="text"? 通過使用 has-class-extension ：

>>> response.xpath('//span[has-class("text")]/text()').getall()
['“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
'“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
'“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
...]

通過一個(gè)簡(jiǎn)單、更聰明的xpath，我們能夠從頁面中提取所有的引號(hào)。我們可以在第一個(gè)xpath上構(gòu)建一個(gè)循環(huán)，以增加最后一個(gè)xpath的數(shù)量。 ?div? ，但這將不必要地復(fù)雜，只需使用 ?has-class("text")? 我們能夠在一行中提取所有報(bào)價(jià)。

這個(gè) Inspector 還有很多其他有用的功能，比如在源代碼中搜索或者直接滾動(dòng)到您選擇的元素。讓我們演示一個(gè)用例：

說你想找到 ?Next? 頁面上的按鈕。類型 ?Next? 在搜索欄的右上角 Inspector . 你應(yīng)該得到兩個(gè)結(jié)果。第一個(gè)是 ?li? 帶標(biāo)簽 ?class="next"? ，第二個(gè)是 ?a? 標(biāo)簽。右鍵單擊 ?a? 標(biāo)記與選擇 ?Scroll into View? . 如果您將鼠標(biāo)懸停在標(biāo)簽上，您將看到突出顯示的按鈕。從這里我們可以很容易地創(chuàng)建一個(gè) Link Extractor 跟隨分頁。在這樣一個(gè)簡(jiǎn)單的站點(diǎn)上，可能不需要從視覺上查找元素，而是 ?Scroll into View? 函數(shù)在復(fù)雜的站點(diǎn)上非常有用。

請(qǐng)注意，搜索欄也可用于搜索和測(cè)試CSS選擇器。例如，您可以搜索 ?span.text? 查找所有報(bào)價(jià)文本。而不是全文搜索，這將搜索 ?span? 帶標(biāo)簽 ?class="text"? 在頁面中。