¿Sabe cuál es el selector correcto que debe utilizar en el web scraping? El web scraping ha sido muy popular en la última década para extraer datos de Internet. Ayuda a las empresas a adquirir y analizar datos para tomar mejores decisiones empresariales. Gracias a las tecnologías automatizadas, el web scraping nunca ha sido tan fácil como ahora.
¿Sabe cuál es el selector correcto que debe utilizar en el web scraping? El web scraping ha sido muy popular en la última década para extraer datos de Internet. Ayuda a las empresas a adquirir y analizar datos para tomar mejores decisiones empresariales. Gracias a las tecnologías automatizadas, el web scraping nunca ha sido tan fácil como ahora.
Sin embargo, independientemente de la herramienta o el framework que elijas, debes tomar una decisión crucial para asegurarte de que tu scraper extrae los datos de forma educada. Es decir, si extraer elementos web utilizando XPath o selectores CSS, que aprenderás en este artículo.
Veamos algunos ejemplos.
XPath son las siglas de XML Path Language. Sin embargo, utiliza sintaxis no XML para seleccionar etiquetas o grupos de etiquetas de un documento XML o HTML, como en el caso del web scraping. XPath permite escribir expresiones para acceder directamente a un elemento HTML o XML sin recorrer todo el árbol HTML.
Para entender cómo se puede acceder a un elemento utilizando el XPath, vamos a profundizar con un código HTML. Asumo que ya conoces algo de HTML básico.
<!doctype html>
<html xmlns=”http://www.w3.org/1999/xhtml” lang="en" xml:lang="en">
<head>
<meta charset="utf-8">
<title>Awesome Products at your Fingertips</title>
</head>
<body>
<h1>Description of product features</h1>
<p>These products are great. So let's just look at the features !</p>
<ul id="product-list" class=”basic-list”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Puede escribir el código anterior en un editor de su elección y guardarlo como products.html. A continuación, puede verlo en un navegador (preferiblemente Google Chrome como vamos a caminar a través de este ejemplo con él).
Cuando el navegador ejecuta este código, frasea el HTML y crea una representación en árbol de los elementos. Se conoce como DOM (Document Object Model) de la siguiente forma:
Puedes leer más sobre el DOM en el enlace dado. Ahora nuestro enfoque aquí es en el XPath sobre cómo navegar a cada uno de estos elementos directamente sin atravesar todo el árbol. Así que vamos a empezar con la terminología básica de la Xpath.
Con XPath, el elemento más fundamental es un nodo. Pues bien, los nodos son simplemente los elementos individuales que acabas de ver en el árbol DOM. A medida que avancemos en este artículo, descubrirá aún más que los nodos consisten en elementos de etiquetas, atributos, valores de cadenas asignados a él, y así sucesivamente. Hay siete en cada página XML o HTML, y veamos de cerca cada tipo de nodo.
Aunque los tres anteriores son los más significativos, también es vital conocer los cuatro siguientes por mera información.
Hay dos maneras de hacerlo. Primero, vamos a demostrarlo o a codificar un ejemplo. Como he mencionado anteriormente, espero que lo haya guardado en su disco local y está listo para ser visto en su navegador.
Cuando se cargue la página, pase el ratón sobre el elemento 1 y haga clic con el botón derecho del ratón sobre él. A continuación, seleccione Inspeccionar en el menú que aparece, como se muestra en la siguiente captura de pantalla:
Then you would be able to find the full XPath by clicking on the <li> element in the console and selecting “copy” from the drop-down menu, and then specifying “Copy full XPath as shown below:
Entonces, después de pegarlo en un archivo de texto o en algún lugar, obtendrías:
/html/body/ul/li[1]Esto se conoce como ruta absoluta. A continuación voy a explicar cómo se ha derivado.
Paso 1 => li[1] //Aquí uno denota el primer elemento li
Paso 2 => /li[1]
Paso 3 => ul/li[1]
Paso 4 => /ul/li[1]
Paso 5 => body/ul/li[1]
Paso 6 => /body/ul/li[1]
Paso 7 => html/body/ul/li[1]
Paso 8 => /html/body/ul/li[1]
With this method, you need to work your way backward, starting from the target element all the way back to the root element. You add a forward slash before the element you have just added as you write each element. So let’s look at how you could work out the XPath for the first <li> element manually:
Aunque el método anterior parece ser largo, le ayudará a entender cómo construir el XPath completo. Ahora pasemos al método relativo.
//*[@id="product-list"]/li[1]As you can see, it is pretty short, and the path is relative to the parent <ul> element. Since the <li> element does not have an id attribute, its relative path is relative to the <ul> element.
Las diferencias significativas son que el XPath completo no es legible y es difícil de mantener. La otra preocupación obvia es que si hay cambios en cualquier elemento a partir del elemento raíz, el XPath absoluto no será válido. Así que tiene sentido usar el XPath relativo.
Sin embargo, antes de seguir comentándolo, veamos primero las ventajas y los inconvenientes.
Con XPath, no tiene que preocuparse si no conoce el nombre de un elemento porque puede utilizar la función contains para buscar posibles coincidencias. Por lo tanto, se puede ir hacia arriba en el DOM cuando la consulta de elementos para raspar.
Otra ventaja importante de CSS es que funciona en navegadores antiguos, como las versiones obsoletas de Internet Explorer.
Como has aprendido más arriba, su desventaja más significativa es que es más fácil de romper cuando cambias los elementos de la ruta. Puede ser difícil de comprender en comparación con los selectores CSS que descubrirás a continuación.
Además, al recuperar elementos a partir de XPath, su rendimiento es bastante más lento que el de CSS.
Como ya sabe, CSS son las siglas de Cascading Style Sheets (hojas de estilo en cascada), que se utilizan principalmente para dar estilo a los elementos HTML de una página web. Estos estilos incluyen aplicar colores a la fuente, imágenes de fondo y colores, alinear y posicionar elementos y aumentar/disminuir los espacios entre párrafos.
Para establecer un estilo a un elemento HTML, es necesario especificarlo a través de un Selector CSS. Empecemos con un ejemplo sencillo a partir del marcado de la siguiente sección.
<h1 id="main-heading" class="header-styles" name="h1name">What are CSS Selectors?</h1>Así que aquí está el selector CSS para el elemento anterior:
También puedes combinarlos:
h1.header-styles-Esteselector CSS selecciona los elementos h1 con clase header-styles.
El operador > se utiliza para seleccionar a los hijos. En cambio, el operador + elige al primer hermano, y el operador ~ se utiliza para elegir a todos los hermanos. Algunos ejemplos son los siguientes:
A diferencia de XPath, que Beautiful Soup no admite, los selectores CSS son compatibles con las bibliotecas de scraping más eficaces. Además, a diferencia de XPath, los selectores CSS son más fáciles de aprender y mantener. Casi todos los navegadores lo soportan, excepto los navegadores heredados por debajo de la versión 8 de Internet Explorer. Sin embargo, la gente rara vez utiliza esos navegadores en estos tiempos.
Aunque elimine las versiones antiguas de Internet Explorer de la ecuación, podría haber incoherencias en la representación en los distintos navegadores.
Dado que existen varias versiones de CSS, pueden crear confusión tanto entre los desarrolladores como entre los principiantes.
Otro factor vital en la tecnología web actual es la seguridad del CSS.
La diferencia aparente entre XPath y CSS es que XPath es bidireccional. Esto significa que puede recorrer el árbol DOM en ambas direcciones. Sin embargo, con CSS sólo se puede recorrer desde el nodo padre a los nodos hijos, lo que se conoce como flujo unidireccional.
Como se ha comentado en secciones anteriores, XPath es más difícil de mantener y no es un buen candidato para una legibilidad eficaz. Por otro lado, aunque XPath puede funcionar en navegadores heredados, la forma en que se renderiza difiere de un navegador a otro.
Por lo tanto, en ese aspecto, el CSS tiene ventaja.
XPATH destaca porque CSS sólo puede ir de padres a hijos en áreas específicas, como el árbol DOM. En cuanto a la velocidad, CSS tiene ventaja.
Sin embargo, la diferencia de velocidad entre XPath y CSS no cuenta mucho cuando se trata de web scraping. Hay otros factores a tener en cuenta, como la latencia de la red en el web scrapping.
CSS sería su primera opción cuando se trata de Beautiful Soup, ya que no soporta el XPath.
No existe una respuesta precisa sobre qué selectores utilizar para su proyecto de web scraping. Como has descubierto en este artículo, el XPath tiene ventaja en ciertas situaciones, mientras que el CSS destaca en otras.
Por lo tanto, hay que tener en cuenta puntos vitales específicos como el desplazamiento, la compatibilidad del navegador y algunas de las capacidades técnicas que hemos comentado. Esperamos que pongas en práctica lo que has aprendido y permanezcas atento a más artículos.