Răzuirea web modernă cu BeautifulSoup și seleniu

Prezentare generală

HTML este aproape intuitiv. CSS este o avansare excelentă care separă curând structura unei pagini de aspectul ei. JavaScript adaugă unele pizazz. Aceasta este teoria. Lumea reală este puțin diferită.

În acest tutorial, veți afla modul în care conținutul pe care îl vedeți în browser devine realmente redat și cum se poate schimba atunci când este necesar. În special, veți afla cum să numărați comentariile Disqus. Instrumentele noastre vor fi Python și pachete minunate precum cererile, BeautifulSoup și Selenium.

Când ar trebui să utilizați răzuirea pe Web?

Înlăturarea paginilor web este practica preluării în mod automat a conținutului paginilor web destinate interacțiunii cu utilizatorii umani, parsarea acestora și extragerea unor informații (eventual navigarea către alte pagini). Este uneori necesar să nu existe altă modalitate de extragere a informațiilor necesare. În mod ideal, aplicația oferă un API dedicat pentru accesarea datelor sale programabil. Există mai multe motive pentru că răsturnarea web ar trebui să fie ultima dvs. soluție:

Este fragil (paginile web pe care le răzuiți s-ar putea schimba frecvent).
Poate fi interzis (unele aplicații web au politici împotriva răzuinței).
S-ar putea să fie lentă și expansivă (dacă aveți nevoie să aduceți și să faceți o mulțime de zgomot).

Înțelegerea paginilor web din lumea reală

Să înțelegem ce ne confruntăm, analizând rezultatele unor coduri comune de aplicații web. În articolul Introducere la Vagrant, există câteva comentarii Disqus în partea de jos a paginii:

Pentru a elimina aceste comentarii, trebuie să le găsim pe prima pagină.

Vezi sursa paginii

Fiecare browser de la începutul anilor 1990 a sprijinit abilitatea de a vizualiza codul HTML al paginii curente. Aici este un fragment din sursa de vizualizare a Introducere în Vagrant, care începe cu o mare bucată de JavaScript minimalizat și uglificat care nu are legătură cu articolul în sine. Aici este mic parte din acesta:

Iată câteva coduri HTML reale din pagină:

Acest lucru pare destul de murdar, dar ceea ce este surprinzător este că nu veți găsi comentariile Disqus în sursa paginii.

Cadrul Inline Mighty

Se pare că pagina este un mashup, iar comentariile Disqus sunt încorporate ca un element iframe (cadru inline). Puteți afla acest lucru făcând clic dreapta pe zona de comentarii și veți vedea că există informații despre cadre și sursă acolo:

Are sens. Incorporarea conținutului terță parte ca cadru iframe este unul din motivele principale de utilizare a cadrelor iframe. Hai să găsim </code> etichetă apoi în sursa principală a paginii. Împiedicați din nou! Nu este <code><iframe></code> tag în sursa paginii principale. </p><h3>Marcare generată de JavaScript</h3><p>Motivul acestei omisiuni este acela <code>Vezi sursa paginii</code> vă arată conținutul care a fost preluat de pe server. Dar ultimul DOM (model obiect de document) care devine randat de browser poate fi foarte diferit. JavaScript rulează și poate manipula DOM la nevoie. Nu se poate găsi iframe, deoarece nu a fost acolo când pagina a fost preluată de pe server. </p><h2>Înlăturarea statică vs. răzuirea dinamică</h2><p>Înlăturarea statică ignoră JavaScript. Încarcă pagini web de pe server fără ajutorul unui browser. Ați obținut exact ceea ce vedeți în "sursa de vizualizare a paginii", apoi ați tăiat și ați zarit-o. Dacă conținutul pe care îl căutați este disponibil, nu trebuie să mergeți mai departe. Cu toate acestea, dacă conținutul este ceva asemănător cu discursul iframe, aveți nevoie de răsturnare dinamică. </p><p>Înlăturarea dinamică utilizează un browser real (sau un browser fără cap) și permite JavaScript să facă acest lucru. Apoi, interoghează DOM pentru a extrage conținutul pe care îl caută. Uneori trebuie să automatizezi browserul simulând un utilizator pentru a obține conținutul de care ai nevoie.</p><h2>Descoperire statică cu cereri și BeautifulSoup</h2><p>Să vedem cum funcționează răsturnarea statică utilizând două pachete minunate de Python: cereri de preluare a paginilor web și BeautifulSoup pentru parsarea paginilor HTML.</p><h3>Instalarea cererilor și a aplicației BeautifulSoup</h3><p>Instalați mai întâi pipenv, apoi: <code>pipenv instala cererile beautifulsoup4</code> </p><p>Acest lucru va crea un mediu virtual și pentru dvs. Dacă utilizați codul din gitlab, puteți doar <code>instalare pipenv</code>.<br></p><h3>Fetching Pagini</h3><p>Fetching-ul unei pagini cu cereri este un liner: <code>r = requests.get (url)</code></p><p>Obiectul răspunsului are multe atribute. Cele mai importante sunt <code>O.K</code> și <code>conţinut</code>. Dacă cererea nu reușește atunci <code>r.ok</code> va fi Fals și <code>r.content</code> va conține eroarea. Conținutul este un flux de octeți. De obicei este mai bine să o decodezi la utf-8 atunci când se ocupă de text:</p><pre>>>> r = requests.get ('http://www.c2.com/no-such-page') >>> r.ok Fals >>> print (r.content.decode ('utf-8' )) <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <html><head> <title>404 Nu a fost gasit</title> </head><body> <h1>Nu a fost gasit</h1> <p>URL-ul / ggg-ul solicitat nu a fost găsit pe acest server.</p> <hr> <address> Serverul Apache / 2.0.52 (CentOS) la www.c2.com Port 80 </address> </body></html> </pre><p>Dacă totul este OK atunci <code>r.content</code> va conține pagina web solicitată (aceeași ca și sursa paginii de vizualizare).</p><h3>Găsirea elementelor cu BeautifulSoup</h3><p> <code>get_page ()</code> funcția de mai jos aduce o pagină web prin URL, o decodifică la UTF-8 și o parsează într-un obiect BeautifulSoup folosind parserul HTML.</p><pre>def get_page (url): r = requests.get (url) content = r.content.decode ('utf-8') retur BeautifulSoup (conținut, 'html.parser') </pre><p>Odată ce avem un obiect BeautifulSoup, putem începe să extragem informații din pagină. BeautifulSoup oferă multe funcții de căutare pentru a localiza elementele din interiorul paginii și pentru a detalia elementele adânci imbricate. </p><p>Tuts + paginile autorului conțin mai multe tutoriale. Aici este pagina mea de autor. Pe fiecare pagină există până la 12 tutoriale. Dacă aveți mai mult de 12 tutoriale, puteți naviga la pagina următoare. HTML pentru fiecare articol este închis într-un <code><article></code> etichetă. Următoarea funcție găsește toate elementele de articol de pe pagină, trasează linkurile lor și extrage atributul href pentru a obține adresa URL a tutorialului:</p><pre>def get_page_articles (pagina): elements = page.findAll ('articolul') articole = [e.a.attrs ['href'] pentru e în elemente] </pre><p>Următorul cod primește toate articolele din pagina mea și le imprimă (fără prefixul comun):</p><pre>pagina = get_page ('https://tutsplus.com/authors/gigi-sayfan') articole = get_page_articles (pagina) prefix = 'https://code.tutsplus.com/tutorials' pentru articolele: print (a [ lenjerie-python-3-and-pygame-part-5 - cms-30085 building-games-with-python- cms-30084 building-games-with-python-3-and-pygame-part-3 - cms-30083 building-games-cu-python-3-and-pygame-part-2 - cu-python-3-și-pygame-part-1 - cms-30081 metode de mastering-reacție-ciclu de viață - cms-29849 test-data-intensive-code-with-go- cms-29852 test-data-intensive-code-with-go-part-4 - cms-29851 test-data-intensive-code-with-go-part-3 - cu-go-part-2 - cms-29848 test-data-intensive-code-with-go-part-1 - cms-29847 CMS-29809</pre><h2>Dinamică răzuire cu seleniu</h2><p>Descoperirea statică a fost suficient de bună pentru a obține lista de articole, dar așa cum am văzut mai devreme, comentariile Disqus sunt încorporate ca un element iframe de către JavaScript. Pentru a recolta comentariile, va trebui să automatizăm browserul și să interacționăm cu DOM interactiv. Unul dintre cele mai bune instrumente pentru această slujbă este Selenium.<br></p><p>Seleniul este orientat în primul rând spre testarea automată a aplicațiilor web, însă este un instrument de automatizare a browserului general.</p><h3>Instalarea seleniului</h3><p>Tastați această comandă pentru a instala Selenium: <code>pipenv instala seleniu</code><br></p><h3>Alegeți driverul Web</h3><p>Selenium are nevoie de un driver web (browserul pe care îl automatizează). Pentru răzuirea web, de obicei, nu contează driverul pe care îl alegeți. Prefer filtrul Chrome. Urmați instrucțiunile din acest ghid pentru Selenium.</p><h3>Chrome vs. PhantomJS</h3><p>În unele cazuri, puteți prefera să utilizați un browser fără cap, ceea ce înseamnă că nu este afișat niciun UI. Teoretic, PhantomJS este doar un alt șofer web. Dar, în practică, oamenii au raportat probleme de incompatibilitate în care Selenium funcționează corect cu Chrome sau Firefox și uneori eșuează cu PhantomJS. Prefer să eliminați această variabilă din ecuație și să folosiți un driver web actual de browser.<br></p><h2>Numărătoare comentarii Disqus</h2><p>Să facem niște răsturnări dinamice și să folosim Selenium pentru a număra comentarii Disqus pe Tuts + tutoriale. Iată importurile necesare.</p><pre>de la selenium import webdriver de la selenium.webdriver.common.by import De la selenium.webdriver.support.expected_conditions import (presence_of_element_located) de la selenium.webdriver.support.wait import WebDriverWait</pre><p> <code>get_comment_count ()</code> funcția acceptă un șofer și URL-ul pentru Selenium. Utilizează <code>obține()</code> metoda driverului de a prelua adresa URL. Acest lucru este similar cu <code>requests.get ()</code>, dar diferența este că obiectul șoferului gestionează o reprezentare live a DOM.</p><p>Apoi, devine titlul de tutorial și localizează iframe Disqus folosind id părinte <code>disqus_thread</code> și apoi iframe-ul însuși:</p><pre>Definiți defragmentarea fișierului de tip "iframe" (fișierul "iframe" ) iframe_url = disqus_iframe.get_attribute ('src') </pre><p>Următorul pas este să preluați conținutul iframe-ului în sine. Rețineți că așteptăm <code>comment-count</code> element pentru a fi prezent, deoarece comentariile sunt încărcate dinamic și nu neapărat disponibile încă.</p><pre> driver.get (iframe_url) wait = WebDriverWait (șofer, 5) commentCountPresent = prezență_decare_locație ((By.CLASS_NAME, "comment-count")) comment_count = int (comment_count_span.text.split () [0]) </pre><p>Ultima parte este aceea de a returna ultimul comentariu dacă nu a fost făcut de mine. Ideea este de a detecta comentariile la care nu am răspuns încă.</p><pre> ('a') last_author = e.get_attribute ('data-username') dacă last_author! = 'last_comment = if comment_count> the_gigi ': e = driver.find_elements_by_class_name (' post-meta ') meta = e [-1] .find_element_by_tag_name (' a ') last_comment = meta.text) return name, comment_count, last_comment</pre><h2>Concluzie</h2><p>Descoperirea web este o practică utilă atunci când informațiile de care aveți nevoie sunt accesibile printr-o aplicație web care nu oferă un API adecvat. Este nevoie de o activitate non-trivială pentru a extrage date de la aplicațiile web moderne, dar instrumentele mature și bine concepute cum ar fi cererile, BeautifulSoup și Selenium o fac utilă.</p><p>În plus, nu ezitați să vedeți ceea ce avem la dispoziție pentru vânzare și pentru studierea pe piața Envato și nu ezitați să adresați întrebări și să oferiți feedback-ul dvs. valoros utilizând feedul de mai jos.</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">Cod</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">Flux de lucru modern pentru WordPress pentru profesioniști Argument</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">Experiență modernă de depanare Partea 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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero. </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="Căutare..."> <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>