Raclage Web moderne avec BeautifulSoup et Selenium

Vue d'ensemble

HTML est presque intuitif. CSS est un grand progrès qui sépare proprement la structure d'une page de son apparence. JavaScript ajoute quelques pizazz. C'est la théorie. Le monde réel est un peu différent.

Dans ce didacticiel, vous apprendrez comment le contenu que vous voyez dans le navigateur est rendu et comment le supprimer si nécessaire. En particulier, vous apprendrez à compter les commentaires Disqus. Nos outils seront Python et d’impressionnants packages tels que les requêtes, BeautifulSoup et Selenium..

Quand faut-il utiliser le raclage Web??

Le grattage Web consiste à récupérer automatiquement le contenu de pages Web conçues pour interagir avec des utilisateurs humains, à les analyser et à extraire certaines informations (éventuellement en parcourant des liens vers d'autres pages). C'est parfois nécessaire s'il n'y a pas d'autre moyen d'extraire les informations nécessaires. Idéalement, l'application fournit une API dédiée pour accéder à ses données par programme. Il y a plusieurs raisons pour lesquelles le raclage Web devrait être votre dernier recours:

Il est fragile (les pages Web que vous grattez peuvent changer fréquemment).
Cela peut être interdit (certaines applications Web ont des politiques contre le raclage).
Il peut être lent et coûteux (si vous devez chercher et parcourir beaucoup de bruit).

Comprendre les pages Web du monde réel

Voyons ce à quoi nous sommes confrontés en examinant le résultat d’un code d’application Web commun. Dans l'article Introduction to Vagrant, il y a quelques commentaires de Disqus au bas de la page:

Afin de recueillir ces commentaires, nous devons d'abord les trouver sur la page..

Voir le source de la page

Depuis la nuit des temps (tous les navigateurs), tous les navigateurs prennent en charge l’affichage du code HTML de la page en cours. Voici un extrait de la source de vue de Introduction to Vagrant qui commence par un énorme bloc de JavaScript minifié et oublié et sans rapport avec l'article lui-même. Voici une petit partie de celui-ci:

Voici du code HTML réel de la page:

Cela semble assez compliqué, mais ce qui est surprenant, c'est que vous ne trouverez pas les commentaires Disqus dans le source de la page..

Le puissant cadre en ligne

Il s'avère que la page est un mashup et que les commentaires Disqus sont incorporés en tant qu'élément iframe (inline frame). Vous pouvez le trouver en cliquant avec le bouton droit de la souris sur la zone de commentaires et vous verrez qu'il contient des informations sur le cadre et la source:

Ça a du sens. L’incorporation de contenu tiers sous forme d’iframe est l’une des principales raisons d’utiliser des iframes. Trouvons le </code> tag puis dans la source de la page principale. Encore repoussé! Il n'y a pas <code><iframe></code> balise dans la source de la page principale. </p><h3>Balisage généré par JavaScript</h3><p>La raison de cette omission est que <code>voir la source de la page</code> vous montre le contenu qui a été récupéré du serveur. Mais le DOM final (modèle d'objet de document) rendu par le navigateur peut être très différent. JavaScript entre en action et peut manipuler le DOM à volonté. L'iframe est introuvable, car il n'était pas là lorsque la page a été extraite du serveur.. </p><h2>Raclage statique et raclage dynamique</h2><p>Raclage statique ignore JavaScript. Il récupère les pages Web du serveur sans l'aide d'un navigateur. Vous obtenez exactement ce que vous voyez dans "Afficher le source de la page", puis vous le découpez en morceaux. Si le contenu que vous recherchez est disponible, vous ne devez pas aller plus loin. Toutefois, si le contenu ressemble à l'iframe de commentaires Disqus, vous avez besoin d'un raclage dynamique.. </p><p>Le raclage dynamique utilise un navigateur réel (ou un navigateur sans interface graphique) et laisse JavaScript agir. Ensuite, il interroge le DOM pour extraire le contenu recherché. Parfois, vous devez automatiser le navigateur en simulant un utilisateur pour obtenir le contenu dont vous avez besoin..</p><h2>Raclage statique avec demandes et BeautifulSoup</h2><p>Voyons comment fonctionne le scraping statique à l'aide de deux superbes packages Python: des requêtes d'extraction de pages Web et BeautifulSoup pour l'analyse de pages HTML..</p><h3>Installation de requêtes et de BeautifulSoup</h3><p>Installez d'abord pipenv, puis: <code>demandes d'installation pipenv beautifulsoup4</code> </p><p>Cela créera un environnement virtuel pour vous aussi. Si vous utilisez le code de gitlab, vous pouvez simplement <code>pipenv installer</code>.<br></p><h3>Aller chercher des pages</h3><p>Aller chercher une page avec des demandes est un liner: <code>r = requests.get (url)</code></p><p>L'objet de réponse a beaucoup d'attributs. Les plus importants sont <code>D'accord</code> et <code>contenu</code>. Si la demande échoue alors <code>r.ok</code> sera Faux et <code>r.content</code> contiendra l'erreur. Le contenu est un flux d'octets. Il est généralement préférable de le décoder en utf-8 lorsqu'il s'agit de texte:</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 introuvable</title> </head><body> <h1>Pas trouvé</h1> <p>L'URL / ggg demandé n'a pas été trouvé sur ce serveur.</p> <hr> <address> Serveur Apache / 2.0.52 (CentOS) sur www.c2.com Port 80 </address> </body></html> </pre><p>Si tout va bien alors <code>r.content</code> contiendra la page Web demandée (identique à la source de la page d'affichage).</p><h3>Trouver des éléments avec BeautifulSoup</h3><p>le <code>get_page ()</code> La fonction ci-dessous récupère une page Web par URL, la décode en UTF-8 et la analyse dans un objet BeautifulSoup à l'aide de l'analyseur HTML..</p><pre>def get_page (url): r = requests.get (url) content = r.content.decode ('utf-8') renvoie BeautifulSoup (content, 'html.parser') </pre><p>Une fois que nous avons un objet BeautifulSoup, nous pouvons commencer à extraire des informations de la page. BeautifulSoup fournit de nombreuses fonctions de recherche pour localiser des éléments dans la page et explorer en profondeur des éléments imbriqués. </p><p>Les pages Tuts + Author contiennent plusieurs tutoriels. Voici ma page auteur. Sur chaque page, il y a jusqu'à 12 tutoriels. Si vous avez plus de 12 tutoriels, vous pouvez accéder à la page suivante. Le code HTML de chaque article est placé dans un <code><article></code> étiquette. La fonction suivante recherche tous les éléments de la page, explore leurs liens et extrait l'attribut href pour obtenir l'URL du didacticiel:</p><pre>def get_page_articles (page): elements = page.findAll ('article') articles = [e.a.attrs ['href'] pour e dans éléments] retourne articles </pre><p>Le code suivant récupère tous les articles de ma page et les imprime (sans le préfixe commun):</p><pre>page = get_page ('https://tutsplus.com/authors/gigi-sayfan') articles = get_page_articles (page) prefix = 'https://code.tutsplus.com/tutorials' pour les articles suivants: print (a [ len (préfixe):]) Sortie: jeux-de-construction-avec-python-3-et-pygame-part-5 - cms-30085 jeux-de-construction-avec-python-3-et-pygame-part-4-- cms-30084 jeux-de-construction-avec-python-3-et-pygame-partie-3 - cms-30083 jeux-de-construction-avec-python-3 et pygame-partie-2 - cms-30082 de jeux de construction -with-python-3-and-pygame-part-1 - cms-30081 maîtrisant-les-méthodes-du-cycle de vie - cms-29849 test-données-intensives-codes-avec-go-part-5-- cms-29852 code-avec-go-partie-4 - données-intensif-test-données-code-avec-go-part-3 - cms-29850 code-avec données intensives -with-go-part-2 - cms-29848 tests-données-intensif-code-avec-go-part-1 - cms-29847 programmes-à-lancer-avec-les-projets-ultra-rapides-avec profilage-- cms-29809</pre><h2>Raclage dynamique au sélénium</h2><p>Le grattage statique était suffisant pour obtenir la liste des articles, mais comme nous l'avons vu précédemment, les commentaires Disqus sont incorporés sous forme d'élément iframe par JavaScript. Afin de récolter les commentaires, nous devrons automatiser le navigateur et interagir avec le DOM de manière interactive. Selenium est l’un des meilleurs outils pour ce travail..<br></p><p>Selenium est principalement conçu pour le test automatisé d'applications Web, mais il constitue un excellent outil d'automatisation de navigateur polyvalent..</p><h3>Installation de sélénium</h3><p>Tapez cette commande pour installer Selenium: <code>pipenv installer sélénium</code><br></p><h3>Choisissez votre pilote Web</h3><p>Selenium a besoin d’un pilote Web (le navigateur qu’il automatise). Pour le raclage Web, le pilote que vous choisissez est généralement indifférent. Je préfère le pilote Chrome. Suivez les instructions de ce guide de sélénium.</p><h3>Chrome vs PhantomJS</h3><p>Dans certains cas, vous préférerez peut-être utiliser un navigateur sans interface graphique, ce qui signifie qu'aucune interface utilisateur n'est affichée. Théoriquement, PhantomJS n'est qu'un autre pilote Web. Mais, dans la pratique, les utilisateurs ont signalé des problèmes d’incompatibilité dans lesquels Selenium fonctionne correctement avec Chrome ou Firefox et échoue parfois avec PhantomJS. Je préfère supprimer cette variable de l'équation et utiliser un pilote Web de navigateur réel..<br></p><h2>Counting Disqus Commentaires</h2><p>Faisons du grattage dynamique et utilisons Selenium pour compter les commentaires Disqus sur les tutoriels Tuts +. Voici les importations nécessaires.</p><pre>from selenium import webdriver from selenium.webdriver.common.by import De à partir de selenium.webdriver.support.expected_conditions import (presence_of_element_located) à partir de selenium.webdriver.support.support.wait import WebDriverWait</pre><p>le <code>get_comment_count ()</code> Cette fonction accepte un pilote et une URL Selenium. Il utilise le <code>obtenir()</code> méthode du pilote pour récupérer l'URL. Ceci est similaire à <code>requests.get ()</code>, mais la différence est que l'objet driver gère une représentation en direct du DOM.</p><p>Ensuite, il obtient le titre du didacticiel et localise l'iframe Disqus à l'aide de son ID parent <code>disqus_thread</code> et ensuite l'iframe lui-même:</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. ) iframe_url = disqus_iframe.get_attribute ('src') </pre><p>L'étape suivante consiste à extraire le contenu de l'iframe lui-même. Notez que nous attendons le <code>compteur de commentaire</code> élément à présenter car les commentaires sont chargés de manière dynamique et ne sont pas nécessairement encore disponibles.</p><pre> driver.get (iframe_url) wait = WebDriverWait (driver, 5) commentCountPresent = presence_of_element_located ((By.CLASS_NAME, 'comment-count')) wait.until (commentCountPresent) comment_count_span = driver.find_element_by_class_name ('commentaire) int (comment_count_span.text.split () [0]) </pre><p>La dernière partie est de renvoyer le dernier commentaire s'il n'a pas été fait par moi. L'idée est de détecter les commentaires auxquels je n'ai pas encore répondu.</p><pre> last_comment = si 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') si 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 (auteur = dernier_auteur, titre = meta.get_attribute (' title '), lorsque = meta.text) retourne le nom, comment_count, last_comment</pre><h2>Conclusion</h2><p>Le raclage Web est une pratique utile lorsque les informations dont vous avez besoin sont accessibles via une application Web ne fournissant pas d'API appropriée. Extraire des données d'applications Web modernes nécessite des travaux non-triviaux, mais des outils sophistiqués et bien conçus, tels que request, BeautifulSoup et Selenium, en valent la peine..</p><p>De plus, n'hésitez pas à voir ce que nous avons disponible à la vente et à étudier dans le marché Envato, et n'hésitez pas à poser des questions et à fournir vos précieux commentaires en utilisant le flux ci-dessous.</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">Workflow moderne de WordPress pour les professionnels justification</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">Expérience de débogage moderne partie 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="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro. </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="Chercher..."> <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>