Elegir el selector adecuado para Web Scraping: CSS o XPath
¿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.
Do you know which is the correct selector to use in web scraping? Web scraping has been quite popular in the recent decade to extract data from the internet. It helps businesses acquire and analyze data to make better business decisions. Thanks to automated technologies, web scraping has never been easier than it is now.
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.
¿Qué es un selector XPath?
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.
¿Qué son los nodos?
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.
- Element node – These are the major tags in an HTML document. For instance, in our example, the elements nodes are <title>,<meta>,<body>,<h1>,<p>,<ul>,and <li>.
- Attribute node – You can provide elements nodes with properties to give them unique names or apply CSS styles. In this example, we have provided the <ul> element with attributes “id” and “class”. More on ids and classes later.
- Atomic values – these are the values that are inside the node elements. Over here, the atomic values are the text inside the <title>, <h1>,<p> and each of the three <li> elements.
Aunque los tres anteriores son los más significativos, también es vital conocer los cuatro siguientes por mera información.
- Namespace: Since XPath also deals with XML documents, it is a standard that specifies how you can use elements and attributes. It is identified by URI (Uniform Resource Identifier). For the latest HTML 5 version, you can set the namespace like this: <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>.
- Comentarios: Son la parte de comentarios de un documento HTML o XML que el compilador o un analizador no procesa.
- Process instruction: As with the case of HTML documents, they are the nodes that link external files such as CSS and JavaScript files. For example, the<link> node to include CSS files and the <src> node to include JavaScript files.
- Root node: As you guessed it right, this is the topmost element of an HTML document: the <html> node.
¿Cuál es la relación entre los nodos?
- Parent: These are the root elements of the DOM tree that are precisely one level up. Each element has exactly one parent. According to our example, the parent of <li> element is <ul>.
- Children: Children nodes are exactly one level down in the DOM tree. As per our example <h1>,<p> and <ul> elements are children of the <body> element.
- Siblings: These are the elements that share the same parent. In our example, both the <li> elements are siblings of the <ul> parent. Also <h1>,<p> and <ul> are siblngs as they belong to the same parent <body>.
- Descendants: Any elements that are one level down are descendants. For instance, the <title> element is a descendant of the <head> element.
- Ancestor: Any element level up in the DOM tree is called an ancestor. In our example <li> element’s ancestors are <ul>,<body> and <html>.
¿Cómo encontrar el XPath de un elemento HTML?
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, se obtendría:
/html/body/ul/li[1]
Esto se conoce como ruta absoluta. A continuación voy a explicar cómo se ha derivado.
Step 1 => li[1] //Here one denotes the first li element
Step 2 => /li[1]
Step 3 => ul/li[1]
Step 4 => /ul/li[1]
Step 5 => body/ul/li[1]
Step 6 => /body/ul/li[1]
Step 7 => html/body/ul/li[1]
Step 8 => /html/body/ul/li[1]
Ruta absoluta
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.
Trayectoria relativa
//*[@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.
Diferencia entre rutas relativas y absolutas
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.
Ventajas e inconvenientes de XPATH
Ventajas
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.
Desventajas
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.
¿Qué es un selector 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.
¿Cómo se crean los selectores CSS?
<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:
- <h1>-selects by the element name <h1>
- #encabezado-principal - #especifica el id del elemento
- .header-styles - El punto indica el nombre de la clase
- [name="h1name"] - Puede especificar los atributos entre corchetes.
También puedes combinarlos:
h1.header-styles-Este selector CSS selecciona los elementos h1 con clase header-styles.
Selectores avanzados
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:
- ul#product-list > li – selects <li> elements which are children of <ul> with id of product-list.
- ul#product-list li – selects <li> elements which are descendent of <ul> with id of product-list.
- ul#product-list + li – selects first <li> element after <ul> with id of product-list.
- ul#product-list ~ li – Selects all <li> elements after the <ul> with id of product-list.
Ventajas y desventajas del uso de selectores CSS
Ventajas
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.
Desventajas
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.
¿Cuáles son las diferencias entre los selectores CSS y XPath?
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.
¿Qué elegir entre los dos?
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.
Conclusión
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.