Modern webschrapen met BeautifulSoup en Selenium

Overzicht

HTML is bijna intuïtief. CSS is een geweldige vooruitgang die de structuur van een pagina netjes van zijn uiterlijk en gevoel scheidt. JavaScript voegt wat pit toe. Dat is de theorie. De echte wereld is een beetje anders.

In deze zelfstudie leert u hoe de inhoud die u in de browser ziet, daadwerkelijk wordt weergegeven en hoe u deze kunt bijwerken wanneer dat nodig is. In het bijzonder leert u hoe u Disqus-opmerkingen kunt tellen. Onze hulpmiddelen zijn Python en geweldige pakketten zoals verzoeken, BeautifulSoup en Selenium.

Wanneer moet u webschrapen gebruiken??

Webscraping is de praktijk van het automatisch ophalen van de inhoud van webpagina's die zijn ontworpen voor interactie met menselijke gebruikers, het ontleden ervan en het extraheren van bepaalde informatie (eventueel het navigeren door koppelingen naar andere pagina's). Het is soms nodig als er geen andere manier is om de benodigde informatie te extraheren. In het ideale geval biedt de toepassing een speciale API voor het programmatisch toegang verkrijgen tot de gegevens. Er zijn verschillende redenen waarom webscraping je laatste redmiddel zou moeten zijn:

Het is fragiel (de webpagina's die u scrapt kunnen vaak veranderen).
Het kan verboden zijn (sommige web-apps hebben een beleid tegen scraping).
Het is misschien traag en expansief (als je veel lawaai moet halen en doorwaden).

Real-World webpagina's begrijpen

Laten we begrijpen waar we mee te maken hebben, door te kijken naar de uitvoer van een aantal veelgebruikte webtoepassingscode. In het artikel Inleiding tot Vagrant staan onderaan de pagina enkele Disqus-opmerkingen:

Om deze opmerkingen te schrappen, moeten we ze eerst op de pagina vinden.

Bekijk paginabron

Elke browser sinds het begin van de tijd (de jaren 90) heeft de mogelijkheid om de HTML van de huidige pagina te bekijken ondersteund. Hier is een fragment uit de weergavebron van Introductie tot Vagrant die begint met een groot deel van geminificeerd en niet-geëgaliseerd JavaScript dat geen verband houdt met het artikel zelf. Hier is een klein gedeelte ervan:

Hier is wat echte HTML van de pagina:

Dit ziet er nogal rommelig uit, maar wat verrassend is, is dat je de Disqus-opmerkingen niet zult vinden in de bron van de pagina.

Het Mighty Inline Frame

Het is gebleken dat de pagina een mashup is en de Disqus-opmerkingen zijn ingesloten als een iframe (inline frame) element. U kunt dit achterhalen door met de rechtermuisknop op het gebied met opmerkingen te klikken en u zult zien dat er frame-informatie en bron daar is:

Dat is logisch. Het insluiten van inhoud van derden als een iframe is een van de belangrijkste redenen om iframes te gebruiken. Laten we het vinden </code> tag dan in de bron van de hoofdpagina. Opnieuw verijdeld! Er is geen <code><iframe></code> tag in de bron van de hoofdpagina. </p><h3>Door JavaScript gegenereerde markeringen</h3><p>De reden voor deze omissie is dat <code>Bekijk paginabron</code> toont u de inhoud die van de server is opgehaald. Maar de uiteindelijke DOM (document-objectmodel) die door de browser wordt weergegeven, kan heel verschillend zijn. JavaScript wordt ingeschakeld en kan naar eigen goeddunken de DOM manipuleren. Het iframe kan niet worden gevonden omdat het er niet was toen de pagina werd opgehaald van de server. </p><h2>Statisch schrapen versus dynamisch schrapen</h2><p>Statisch schrapen negeert JavaScript. Het haalt webpagina's van de server op zonder de hulp van een browser. Je krijgt precies wat je ziet in "bekijk paginabron", en dan snij je het in en snijd het. Als de inhoud die u zoekt beschikbaar is, hoeft u niet verder te gaan. Als de inhoud echter zoiets is als het Disqus-commentaar-iframe, hebt u dynamisch schrapen nodig. </p><p>Dynamisch schrapen maakt gebruik van een echte browser (of een headless browser) en laat JavaScript zijn gang gaan. Vervolgens vraagt hij de DOM om de inhoud te extraheren waarnaar hij op zoek is. Soms moet je de browser automatiseren door een gebruiker te simuleren om de inhoud te krijgen die je nodig hebt.</p><h2>Statisch schrapen met verzoeken en BeautifulSoup</h2><p>Laten we eens kijken hoe statisch schrapen werkt met behulp van twee geweldige Python-pakketten: aanvragen voor het ophalen van webpagina's en BeautifulSoup voor het parseren van HTML-pagina's.</p><h3>Verzoeken en BeautifulSoup installeren</h3><p>Installeer eerst pipenv en dan: <code>pipenv install requests beautifulsoup4</code> </p><p>Dit zal ook een virtuele omgeving voor u creëren. Als je de code van gitlab gebruikt, kun je gewoon <code>pipenv installeren</code>.<br></p><h3>Pagina's ophalen</h3><p>Een pagina met verzoeken ophalen is een voering: <code>r = requests.get (url)</code></p><p>Het antwoordobject heeft veel attributen. De belangrijkste zijn <code>OK</code> en <code>inhoud</code>. Als het verzoek dan mislukt <code>r.ok</code> is False en <code>r.content</code> zal de fout bevatten. De inhoud is een stroom van bytes. Het is meestal beter om het te decoderen naar utf-8 als je te maken hebt met tekst:</p><pre>>>> r = requests.get ('http://www.c2.com/no-such-page') >>> r.ok False >>> print (r.content.decode ('utf-8') )) <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>404 Niet Gevonden</title> </head><body> <h1>Niet gevonden</h1> <p>De gevraagde URL / ggg is niet gevonden op deze server.</p> <hr> <address> Apache / 2.0.52 (CentOS) Server op www.c2.com Poort 80 </address> </body></html> </pre><p>Als alles goed is dan <code>r.content</code> zal de gevraagde webpagina bevatten (hetzelfde als bron van weergavepagina).</p><h3>Elementen vinden met BeautifulSoup</h3><p>De <code>get_page ()</code> functie hieronder haalt een webpagina op URL op, decodeert deze naar UTF-8 en parseert deze in een BeautifulSoup-object met behulp van de HTML-parser.</p><pre>def get_page (url): r = requests.get (url) content = r.content.decode ('utf-8') return BeautifulSoup (inhoud, 'html.parser') </pre><p>Zodra we een BeautifulSoup-object hebben, kunnen we beginnen met het extraheren van informatie van de pagina. BeautifulSoup biedt veel zoekfuncties om elementen op de pagina te vinden en diep geneste elementen te doorzoeken. </p><p>Tuts + auteurspagina's bevatten meerdere zelfstudies. Hier is mijn auteurspagina. Op elke pagina zijn er maximaal 12 zelfstudies. Als je meer dan 12 tutorials hebt, kun je naar de volgende pagina gaan. De HTML voor elk artikel is ingesloten in een <code><article></code> label. De volgende functie vindt alle artikelelementen op de pagina, analyseert naar hun links en extraheert het href-kenmerk om de URL van de zelfstudie te krijgen:</p><pre>def get_page_articles (page): elements = page.findAll ('article') articles = [e.a.attrs ['href'] voor e in elementen] retourneer artikelen </pre><p>De volgende code haalt alle artikelen uit mijn pagina en drukt ze af (zonder het gewone voorvoegsel):</p><pre>page = get_page ('https://tutsplus.com/authors/gigi-sayfan') articles = get_page_articles (pagina) prefix = 'https://code.tutsplus.com/tutorials' voor een in artikelen: print (a [ len (prefix):]) Uitgang: gebouw-games-met-python-3-en-pygame-deel-5 - cms-30085 gebouw-spellen-met-python-3-en-pygame-deel-4-- cms-30084 gebouw-spellen-met-python-3-en-pygame-deel-3 - cms-30083 gebouw-spellen-met-python-3-en-pygame-deel-2 - cms-30082 gebouw-spellen -with-python-3-and-pygame-part-1 - cms-30081 mastering-the-react-lifecycle-methods - cms-29849 testing-data-intensieve-code-met-go-deel-5-- cms-29852 testen-data-intensieve-code-met-go-deel-4 - cms-29851 testen-data-intensieve-code-met-gaan-deel-3 - cms-29850 testen-data-intensieve code -with-go-part-2 - cms-29848 testen-data-intensieve-code-met-gaan-deel-1 - cms-29847 make-the-go-programma's-bliksemsnelle-met-profilering-- cms-29809</pre><h2>Dynamisch schrapen met selenium</h2><p>Statisch schrapen was goed genoeg om de lijst met artikelen te krijgen, maar zoals we eerder zagen, zijn de Disqus-opmerkingen ingebed als een iframe-element door JavaScript. Om de opmerkingen te kunnen verzamelen, moeten we de browser automatiseren en interactief communiceren met de DOM. Een van de beste tools voor de klus is Selenium.<br></p><p>Selenium is primair gericht op het geautomatiseerd testen van webapplicaties, maar het is geweldig als een browserautomatiseringshulpmiddel voor algemene doeleinden.</p><h3>Selenium installeren</h3><p>Typ deze opdracht om Selenium te installeren: <code>pipenv installeer selenium</code><br></p><h3>Kies uw webstuurprogramma</h3><p>Selenium heeft een webstuurprogramma nodig (de browser automatiseert dit). Voor webschrapen maakt het meestal niet uit welk stuurprogramma u kiest. Ik geef de voorkeur aan de Chrome-driver. Volg de instructies in deze Selenium-handleiding.</p><h3>Chrome versus PhantomJS</h3><p>In sommige gevallen kunt u de voorkeur geven aan een headless-browser, wat betekent dat er geen gebruikersinterface wordt weergegeven. Theoretisch is PhantomJS gewoon een andere webdriver. Maar in de praktijk meldden mensen incompatibiliteitsproblemen waar Selenium goed werkt met Chrome of Firefox en soms faalt met PhantomJS. Ik geef er de voorkeur aan om deze variabele uit de vergelijking te verwijderen en een echte browser-webdriver te gebruiken.<br></p><h2>Reacties van Disqus tellen</h2><p>Laten we wat dynamisch schrapen doen en Selenium gebruiken om Disqus-opmerkingen op Tuts + tutorials te tellen. Hier zijn de noodzakelijke invoer.</p><pre>van selenium import webdriver van selenium.webdriver.common.by import Door van selenium.webdriver.support.expected_conditions import (presence_of_element_located) van selenium.webdriver.support.wait import WebDriverWait</pre><p>De <code>get_comment_count ()</code> functie accepteert een Selenium-stuurprogramma en URL. Het gebruikt de <code>krijgen()</code> methode van het stuurprogramma om de URL op te halen. Dit is vergelijkbaar met <code>requests.get ()</code>, maar het verschil is dat het object driver een live weergave van de DOM beheert.</p><p>Vervolgens krijgt het de titel van de zelfstudie en lokaliseert het Disqus iframe met behulp van de bovenliggende id <code>disqus_thread</code> en dan het iframe zelf:</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_by_tag_name ('iframe' ) iframe_url = disqus_iframe.get_attribute ('src') </pre><p>De volgende stap is om de inhoud van het iframe zelf op te halen. Merk op dat we wachten op de <code>comment-count</code> element aanwezig omdat de opmerkingen dynamisch worden geladen en nog niet noodzakelijkerwijs beschikbaar zijn.</p><pre> driver.get (iframe_url) wait = WebDriverWait (stuurprogramma, 5) commentCountPresent = presence_of_element_located ((By.CLASS_NAME, 'comment-count')) wait.until (commentCountPresent) comment_count_span = driver.find_element_by_class_name ('comment-count') comment_count = int (comment_count_span.text.split () [0]) </pre><p>Het laatste deel is om de laatste opmerking terug te sturen als deze niet door mij is gemaakt. Het idee is om opmerkingen te ontdekken waar ik nog niet op heb gereageerd.</p><pre> last_comment = if comment_count> 0: e = driver.find_elements_by_class_name ('auteur') [- 1] last_author = e.find_element_by_tag_name ('a') last_author = e.get_attribute ('data-gebruikersnaam') als 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 (author = last_author, title = meta.get_attribute (' title '), when = meta.text) retourneer naam, comment_count, last_comment</pre><h2>Conclusie</h2><p>Webscraping is een nuttige praktijk wanneer de informatie die u nodig hebt, toegankelijk is via een webtoepassing die geen geschikte API biedt. Het kost wat niet-triviaal werk om gegevens uit moderne webapplicaties te extraheren, maar volwassen en goed ontworpen tools zoals verzoeken, BeautifulSoup en Selenium maken het de moeite waard.</p><p>Aarzel ook niet om te zien wat we beschikbaar hebben voor de verkoop en om te studeren in de Envato-markt, en aarzel niet om vragen te stellen en uw waardevolle feedback te geven met behulp van de onderstaande feed.</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">Modern WordPress Workflow voor Professionals Rationale</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">Modern Debugging Experience deel 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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur. </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="Zoeken..."> <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>