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)場。

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

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

我們感興趣的是：

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

如果你在第一個上面徘徊 ?div? 正上方 ?span? 在屏幕截圖中突出顯示的標簽，您將看到網(wǎng)頁的相應部分也會突出顯示?，F(xiàn)在我們有了一個部分，但是我們在任何地方都找不到報價文本。

的優(yōu)勢 Inspector 它自動展開和折疊網(wǎng)頁的部分和標簽，大大提高了可讀性。您可以通過單擊標簽前面的箭頭或直接雙擊標簽來展開和折疊標簽。如果我們擴大 ?span? 帶標簽 ?class= "text"? 我們將看到我們單擊的報價文本。這個 Inspector 允許您將xpath復制到選定的元素。讓我們試試看。

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

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

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

>>> 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()? 最后，我們可以用這個基本選擇器提取第一個報價。但這個xpath并沒有那么聰明。它所做的就是在源代碼中沿著所需的路徑從 ?html? . 那么讓我們看看我們是否可以改進一下xpath：

如果我們檢查 Inspector 我們將再次看到，在我們的 ?div? 標簽我們有九個相同的 ?div? 標簽，每個標簽都具有與第一個相同的屬性。如果我們擴展其中任何一個，我們將看到與第一個報價相同的結構：兩個 ?span? 標簽和一個 ?div? 標簽。我們可以擴大每個 ?span? 帶標簽 ?class="text"? 在我們內部 ?div? 標記并查看每個引用：

<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>

有了這些知識，我們可以改進我們的xpath：我們只需選擇 ?span? 標簽與 ?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.”',
...]

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

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

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

請注意，搜索欄也可用于搜索和測試CSS選擇器。例如，您可以搜索 ?span.text? 查找所有報價文本。而不是全文搜索，這將搜索 ?span? 帶標簽 ?class="text"? 在頁面中。