Modernes Web Scraping mit BeautifulSoup und Selen

Überblick

HTML ist fast intuitiv. CSS ist ein großer Fortschritt, der die Struktur einer Seite sauber von ihrem Erscheinungsbild trennt. JavaScript fügt etwas pazazz hinzu. Das ist die Theorie. Die reale Welt ist etwas anders.

In diesem Lernprogramm erfahren Sie, wie der Inhalt, den Sie im Browser sehen, tatsächlich gerendert wird, und wie Sie ihn gegebenenfalls abkratzen können. Insbesondere lernen Sie, wie man Disqus-Kommentare zählt. Unsere Tools sind Python und tolle Pakete wie Requests, BeautifulSoup und Selenium.

Wann sollten Sie Web Scraping verwenden??

Beim Web-Scraping wird automatisch der Inhalt von Webseiten abgerufen, die für die Interaktion mit menschlichen Benutzern bestimmt sind, sie werden analysiert und einige Informationen werden extrahiert (möglicherweise navigieren Sie mit Links zu anderen Seiten). Es ist manchmal notwendig, wenn es keine andere Möglichkeit gibt, die erforderlichen Informationen zu extrahieren. Idealerweise bietet die Anwendung eine dedizierte API für den programmgesteuerten Zugriff auf ihre Daten. Es gibt mehrere Gründe, warum Web Scraping Ihr letzter Ausweg sein sollte:

Es ist zerbrechlich (die von Ihnen gescrobten Webseiten können sich häufig ändern).
Es ist möglicherweise verboten (einige Web-Apps haben Richtlinien gegen das Scraping).
Es kann langsam und ausgedehnt sein (wenn Sie eine Menge Geräusche abrufen und durchgehen müssen).

Real-World-Webseiten verstehen

Lassen Sie uns verstehen, was uns erwartet, indem wir uns die Ausgabe einiger gängiger Webanwendungscodes ansehen. Im Artikel Einführung in Vagrant finden Sie einige Disqus-Kommentare am unteren Rand der Seite:

Um diese Kommentare zu kratzen, müssen wir sie zuerst auf der Seite finden.

Seitenquelle anzeigen

Jeder Browser seit Anbeginn der Zeit (den 1990er Jahren) hat die Möglichkeit unterstützt, den HTML-Code der aktuellen Seite anzuzeigen. Hier ist ein Ausschnitt aus der Ansichtsquelle von Introduction to Vagrant, der mit einem großen Teil des reduzierten und ublifizierten JavaScript beginnt, das nicht mit dem Artikel selbst zusammenhängt. Hier ist ein klein Teil davon:

Hier ist ein tatsächlicher HTML-Code von der Seite:

Das sieht ziemlich chaotisch aus, aber es ist überraschend, dass Sie die Disqus-Kommentare nicht im Quellcode der Seite finden.

Der mächtige Inline-Frame

Es stellt sich heraus, dass die Seite ein Mashup ist und die Disqus-Kommentare als iframe (Inline Frame) -Element eingebettet werden. Sie können es herausfinden, indem Sie mit der rechten Maustaste auf den Kommentarbereich klicken, und Sie werden feststellen, dass dort Rahmeninformationen und -quellen vorhanden sind:

Das macht Sinn. Das Einbetten von Inhalten von Drittanbietern als Iframe ist einer der Hauptgründe für die Verwendung von Iframes. Lass uns das finden </code> Tag dann in der Hauptseite Quelle. Wieder vereitelt! Es gibt kein <code><iframe></code> Tag in der Hauptseite der Quelle. </p><h3>JavaScript-generiertes Markup</h3><p>Der Grund für diese Auslassung ist das <code>Seitenquelle anzeigen</code> Zeigt den Inhalt an, der vom Server abgerufen wurde. Das endgültige DOM (Document Object Model), das vom Browser gerendert wird, kann jedoch sehr unterschiedlich sein. JavaScript tritt ein und kann das DOM nach Belieben manipulieren. Der iframe kann nicht gefunden werden, da er nicht vorhanden war, als die Seite vom Server abgerufen wurde. </p><h2>Statisches Scraping vs. dynamisches Scraping</h2><p>Statisches Scraping ignoriert JavaScript. Es ruft Webseiten ohne Hilfe eines Browsers vom Server ab. Sie erhalten genau das, was Sie unter "Seitenquell anzeigen" sehen, und dann schneiden Sie sie in Würfel. Wenn der gewünschte Inhalt verfügbar ist, müssen Sie nicht weiter fortfahren. Wenn der Inhalt jedoch den Disqus-Kommentaren ähnelt, benötigen Sie dynamisches Scraping. </p><p>Beim dynamischen Scraping wird ein tatsächlicher Browser (oder ein Headless-Browser) verwendet, und JavaScript kann seine Aufgabe erfüllen. Dann fragt es das DOM ab, um den gesuchten Inhalt zu extrahieren. Manchmal müssen Sie den Browser automatisieren, indem Sie einen Benutzer simulieren, um den gewünschten Inhalt zu erhalten.</p><h2>Statisches Scraping mit Requests und BeautifulSoup</h2><p>Sehen wir uns an, wie das statische Scraping mit zwei großartigen Python-Paketen funktioniert: Anfragen zum Abrufen von Webseiten und BeautifulSoup zum Analysieren von HTML-Seiten.</p><h3>Anforderungen und BeautifulSoup installieren</h3><p>Installieren Sie zuerst pipenv und dann: <code>pipenv Installationsanfragen beautifulsoup4</code> </p><p>Dadurch wird auch eine virtuelle Umgebung für Sie erstellt. Wenn Sie den Code von Gitlab verwenden, können Sie dies einfach tun <code>pipenv installieren</code>.<br></p><h3>Seiten abrufen</h3><p>Das Abrufen einer Seite mit Anforderungen ist ein Einzeiler: <code>r = request.get (url)</code></p><p>Das Antwortobjekt hat viele Attribute. Die wichtigsten sind <code>OK</code> und <code>Inhalt</code>. Wenn die Anfrage dann fehlschlägt <code>r.ok</code> wird falsch sein und <code>Inhalt</code> wird den Fehler enthalten. Der Inhalt ist ein Bytestrom. Es ist in der Regel besser, es im Umgang mit Text in utf-8 zu decodieren:</p><pre>>>> r = request.get ('http://www.c2.com/no-such-page') >>> r.ok False >>> drucken (r.content.decode ('utf-8') )) <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>404 Nicht gefunden</title> </head><body> <h1>Nicht gefunden</h1> <p>Die angeforderte URL / ggg wurde auf diesem Server nicht gefunden.</p> <hr> <address> Apache / 2.0.52 (CentOS) -Server unter www.c2.com Port 80 </address> </body></html> </pre><p>Wenn alles in Ordnung ist, dann <code>Inhalt</code> enthält die angeforderte Webseite (wie Seitenquell).</p><h3>Elemente mit BeautifulSoup finden</h3><p>Das <code>get_page ()</code> Die folgende Funktion ruft eine Webseite nach URL ab, dekodiert sie in UTF-8 und analysiert sie mithilfe des HTML-Parsers in ein BeautifulSoup-Objekt.</p><pre>def get_page (url): r = request.get (url) content = r.content.decode ('utf-8') gibt BeautifulSoup zurück (content, 'html.parser') </pre><p>Sobald wir ein BeautifulSoup-Objekt haben, können wir Informationen von der Seite extrahieren. BeautifulSoup bietet viele Suchfunktionen, um Elemente auf der Seite zu finden und tief verschachtelte Elemente zu untersuchen. </p><p>Tuts + Author-Seiten enthalten mehrere Tutorials. Hier ist meine Autorenseite. Auf jeder Seite gibt es bis zu 12 Tutorials. Wenn Sie mehr als 12 Tutorials haben, können Sie zur nächsten Seite navigieren. Das HTML für jeden Artikel ist in einem <code><article></code> Etikett. Die folgende Funktion findet alle Artikelelemente auf der Seite, führt einen Drilldown mit ihren Links durch und extrahiert das Attribut href, um die URL des Lernprogramms abzurufen:</p><pre>def get_page_articles (page): elements = page.findAll ('article') articles = [e.a.attrs ['href'] für e in elements] gibt Artikel zurück </pre><p>Mit dem folgenden Code werden alle Artikel von meiner Seite abgerufen und gedruckt (ohne das allgemeine Präfix):</p><pre>page = get_page ('https://tutsplus.com/authors/gigi-sayfan') articles = get_page_articles (page) prefix = 'https://code.tutsplus.com/tutorials' für a in articles: print (a [ len (Präfix):]) Ausgabe: Building-games-with-python-3-and-pygame-part-5 - cms-30085 building-games-with-python-3-und-pygame-part-4- cms-30084 Gebäude-Spiele-mit-Python-3-und-Pygame-Teil-3 - cms-30083 Gebäude-Spiele-Mit-Python-3-und-Pygame-Teil-2 - cms-30082 Gebäude-Spiele -mit-python-3-und-pygame-part-1 - cms-30081 beherrschen die reaktions-lebenszyklus-methoden - cms-29849 testdatenintensiver code-with-go-part-5-- cms-29852 testdatenintensiver Code-mit-gehen-Teil-4-cms-29851 testdatenintensiver Code-mit-gehen-Teil-3-cms-29850 testdatenintensiver Code -with-go-part-2 - cms-29848 testdatenintensiver-code-with-go-part-1 - cms-29847 make-your-go-programme-blitzschnell-mit-profiling-- cms-29809</pre><h2>Dynamisches Schaben mit Selen</h2><p>Statisches Scraping war gut genug, um die Liste der Artikel abzurufen. Wie wir jedoch bereits gesehen haben, werden die Disqus-Kommentare von JavaScript als iframe-Element eingebettet. Um die Kommentare zu sammeln, müssen wir den Browser automatisieren und interaktiv mit dem DOM interagieren. Eines der besten Werkzeuge für diesen Job ist Selenium.<br></p><p>Selenium ist in erster Linie auf das automatisierte Testen von Webanwendungen ausgerichtet, eignet sich jedoch hervorragend als universelles Browser-Automatisierungswerkzeug.</p><h3>Selen installieren</h3><p>Geben Sie diesen Befehl ein, um Selenium zu installieren: <code>pipenv installieren Selen</code><br></p><h3>Wählen Sie Ihren Webtreiber</h3><p>Selenium benötigt einen Webtreiber (den Browser, den es automatisiert). Beim Web-Scraping spielt es normalerweise keine Rolle, welchen Treiber Sie wählen. Ich bevorzuge den Chrome-Treiber. Befolgen Sie die Anweisungen in diesem Selenium-Handbuch.</p><h3>Chrome vs. PhantomJS</h3><p>In einigen Fällen ziehen Sie es vor, einen Headless-Browser zu verwenden, dh es wird keine Benutzeroberfläche angezeigt. Theoretisch ist PhantomJS nur ein weiterer Web-Treiber. In der Praxis berichteten die Leute jedoch über Inkompatibilitätsprobleme, bei denen Selenium ordnungsgemäß mit Chrome oder Firefox funktioniert und manchmal mit PhantomJS ausfällt. Ich ziehe es vor, diese Variable aus der Gleichung zu entfernen und einen Browser-Webtreiber zu verwenden.<br></p><h2>Zählen von Disqus-Kommentaren</h2><p>Lassen Sie uns dynamisches Scraping durchführen und mit Selenium Disqus-Kommentare zu Tuts + -Tutorials zählen. Hier sind die notwendigen Importe.</p><pre>von selenium import webdriver von selenium.webdriver.common.by importieren Durch von selenium.webdriver.support.expected_conditions import (Präsenz_des_Elementes) von selenium.webdriver.support.wait importieren Sie WebDriverWait</pre><p>Das <code>get_comment_count ()</code> Die Funktion akzeptiert einen Selenium-Treiber und eine URL. Es verwendet die <code>erhalten()</code> Methode des Treibers zum Abrufen der URL. Das ist ähnlich <code>request.get ()</code>, Der Unterschied besteht jedoch darin, dass das Treiberobjekt eine Live-Darstellung des DOMs verwaltet.</p><p>Dann erhält es den Titel des Lernprogramms und sucht den Disqus-iframe anhand seiner übergeordneten ID <code>disqus_thread</code> und dann der iframe selbst:</p><pre>def get_comment_count (driver, url): driver.get (url) class_name = 'content-banner_title' name = driver.find_element_by_class_name (class_name) .text e = driver.find_element_by_id ('disqus_thread') disqus_iframe = e.find_element_name. iframe_url = disqus_iframe.get_attribute ('src') </pre><p>Im nächsten Schritt wird der Inhalt des Iframes selbst abgerufen. Beachten Sie, dass wir auf das warten <code>Anzahl Kommentare</code> Element vorhanden sein, da die Kommentare dynamisch geladen werden und noch nicht notwendigerweise verfügbar sind.</p><pre> driver.get (iframe_url) wait = WebDriverWait (Treiber, 5) commentCountPresent = Präsenz_des_Elementes ((von.CLASS_NAME, 'comment-count')) wait.until (commentCountPresent) comment_count_span = driver.find_element_by_class_name ('comment-count') int (comment_count_span.text.split () [0]) </pre><p>Der letzte Teil ist, den letzten Kommentar zurückzugeben, wenn er nicht von mir gemacht wurde. Die Idee besteht darin, Kommentare zu finden, auf die ich noch nicht geantwortet habe.</p><pre> last_comment = if comment_count> 0: e = driver.find_elements_by_class_name ('author') [- 1] last_author = e.find_element_by_tag_name ('a') last_author = e.get_attribute ('data-username') if last_author! = ' the_gigi ': e = driver.find_elements_by_class_name (' post-meta ') meta = e [-1] .find_element_by_tag_name (' a ') last_comment = dict (Autor = letzter_author, title = meta.get_attribute (' title '), wenn = meta.text) Rückgabewert, comment_count, last_comment</pre><h2>Fazit</h2><p>Web-Scraping ist eine nützliche Vorgehensweise, wenn auf die benötigten Informationen über eine Webanwendung zugegriffen werden kann, die keine entsprechende API bereitstellt. Das Extrahieren von Daten aus modernen Webanwendungen erfordert einige nicht triviale Arbeit, aber ausgereifte und gut konzipierte Tools wie Requests, BeautifulSoup und Selenium machen es wert.</p><p>Zögern Sie nicht, zu sehen, was wir für den Verkauf und das Studium auf dem Envato-Markt zur Verfügung haben, und zögern Sie nicht, Fragen zu stellen und mit dem untenstehenden Feed wertvolles Feedback zu geben.</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/code">Code</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/code/modern-wordpress-workflow-for-professionals-rationale.html">Moderner WordPress-Workflow für Profis Gründe</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_17/modern-wordpress-workflow-for-professionals-rationale_3.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/code/modern-debugging-experience-part-2.html">Modernes Debugging-Erlebnis Teil 2</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_12/modern-debugging-experience-part-2_8.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Suche..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>