Web Scraper es una extensión para el navegador, disponible para Chrome y Firefox, que te permite extraer datos de cualquier web sin conocimientos de programación.
En este artículo vamos a ver un caso particular de web; una web Infinite Scroll (con scroll infinito). Esto es, una web que carga su contenido a medida que se va navegando haciendo scroll. Un ejemplo de web de este tipo es Pinterest.
Doy por hecho que tienes algunos conocimientos mínimos de Web Scraper. Si no es así, echa un vistazo antes a algún tutorial de Youtube, es muy sencillo comenzar a utilizarlo. También puedes aprender de la documentación oficial (en inglés).
Contenidos
¿Cómo hacer scroll con Web Scraper?
Esta herramienta, sencilla pero potente, ya incorpora un selector específico para hacer scroll. Este se denomina Element scroll down y con él podemos simular el scroll del ratón sobre la web.
En la configuración de este selector cabe destacar la propiedad delay. Aquí asignaremos el tiempo (en milisegundos) que esperará Web Scraper para cargar los nuevos datos al hacer scroll, ya que la carga de nuevos datos no es inmediata.
Para saber qué valor asignar al campo delay podemos navegar por la web y ver cuánto tiempo le lleva a la web cargar nuevos datos.
Si no tienes claro cómo usar este elemento, en la web oficial tienes un video tutorial corto bastante ilustrativo.
¿Cómo hacer scroll con Web Scraper en Pinterest?
A pesar de que el título de este apartado es muy similar al anterior; no, no estoy metiendo morralla para mejorar el SEO en Google 😄.
En una web pequeña haremos scroll varias veces y llegaremos pronto al final del contenido. Para un caso como este, podemos usar el selector de Web Scraper Element scroll down de manera natural como vimos en el apartado anterior.
Sin embargo, con Pinterest se complica su uso debido a la gran cantidad de imágenes disponibles. Esto puede causar un scroll infinito provocando problemas de memoria y generando un fallo en el escrapeo.
La solución a este problema de scroll infinito es indicarle a Web Scraper que solo haga scroll una cantidad limitada de veces y después detenga el escrapeo. A continuación veremos como indicarle a Web Scraper el criterio de parada del scroll.
Escrapeando Pinterest…
Vamos a realizar un ejemplo con el perfil de unareceta ya que tiene un gran volumen de imágenes y puede generar el problema del scroll que nunca acaba.
En concreto vamos a scrapear el feed de inicio.
Pues vamos al lío. Abrimos Web Scraper y creamos un sitemap con esta URL de inicio:
https://www.pinterest.es/unareceta/_created/
A continuación tendremos que crear un selector de tipo Element scroll down que es el que hará scroll sobre la página haciendo que se carguen nuevas imágenes.
Como vemos en la imagen anterior, el selector visual lo hemos situado sobre las imágenes y este ha seleccionado automáticamente las clases CSS .ujU img.
Aquí es donde se nos presenta el problema. Este scroll nunca acabará ya que el selector CSS es genérico (.ujU img) y siempre seleccionará imágenes. Tenemos que cambiar este selector por otro que limite la cantidad de imágenes seleccionadas a un valor determinado.
Para obtener este nuevo selector CSS vamos a ayudarnos de Chrome. Desde el inspector de elementos de Chrome (F12) seleccionamos la primera imagen y buscamos la etiqueta <div> raíz que la envuelve. En la imagen de abajo puedes ver señaladas las etiquetas div raíz que engloban a cada imagen.
Una vez identificado el div principal que engloba a la primera imagen (marcado en azul), damos clic derecho sobre él en el HTML y en menú que aparece seleccionamos la opción Copy > Copy selector. Esto copiará al portapapeles un código de selector CSS muy específico para el elemento HTML elegido. En concreto el siguiente:
#__PWS_ROOT__ > div.App.AppBase > div.appContent > div > div > div > div:nth-child(3) > div > div > div > div:nth-child(1) > div:nth-child(1)Ahora tenemos que adaptar este selector CSS para que, en lugar de que coincida con la primera imagen, lo haga con una cierta cantidad definida por nosotros. Para ello modificamos la última pseudo-clase nth-child(1) por esta nth-child(-n+99).
Con esto lo que estamos indicando es que seleccione 99 +1 imágenes. El valor 99 deberás cambiarlo según tus necesidades. Si quieres scrapear 30 imágenes, deberás poner un valor de 29 (siempre uno menos).
Así nos queda el selector CSS tras la modificación:
#__PWS_ROOT__ > div.App.AppBase > div.appContent > div > div > div > div:nth-child(3) > div > div > div > div:nth-child(1) > div:nth-child(-n+99)Ahora simplemente vamos a Web Scraper y editamos el elemento de Element scroll down creado anteriormente.
Pues ya lo tenemos. Hemos limitado el scroll infinito a una cierta cantidad de imágenes, en concreto 99.
Para acabar solo nos queda crear los selectores de extracción de datos. Para el ejemplo vamos a extraer el título de cada Pin y la URL de su imagen.
Vamos a ello. Abrimos el inspector de Chrome (F12) y vemos qué estructura y datos tenemos en el HTML:
Podemos ver que por cada imagen tenemos la etiqueta img de la que podemos extraer los datos. Por un lado tenemos el título del Pin en el atributo alt y la ruta de la imagen en el atributo src.
Ahora creamos los selectores correspondientes para extraer los atributos alt y src de cada imagen (etiqueta <img>). Para esto Web Scraper dispone de el selector Element attribute.
Estos selectores los crearemos como hijos del selector de scroll que hemos creado antes.
Cabe destacar que no marcaremos el check multiples debido a que el selector padre (scroll) ya está seleccionando varias imágenes.
Un vez tengamos los selectores para extraer los datos ya podemos lanzar el scraping. Este es el resultado tras ejecutar el scrapeo:
Me ha ocurrido varias veces que tras lanzar el scraping, Pinterest no carga nuevas imágenes al hacer scroll. Quizá detecta actividad sospechosa y detiene la nueva carga de datos. Si te ocurre esto, recarga la página y navega durante unos segundo de manera natural y después vuelve a lanzar el scrapeo.
Aquí te dejo el sitemap generado en formato JSON. Puedes importarlo en Web Scraper y probarlo.
{
"_id": "unareceta",
"startUrl": ["https://www.pinterest.es/unareceta/_created/"],
"selectors": [
{
"id": "title",
"type": "SelectorElementAttribute",
"parentSelectors": ["scroll"],
"selector": "img",
"multiple": false,
"extractAttribute": "alt",
"delay": 0
},
{
"id": "image-url",
"type": "SelectorElementAttribute",
"parentSelectors": ["scroll"],
"selector": "img",
"multiple": false,
"extractAttribute": "src",
"delay": 0
},
{
"id": "scroll",
"type": "SelectorElementScroll",
"parentSelectors": ["_root"],
"selector": "#__PWS_ROOT__ > div.App.AppBase > div.appContent > div > div > div > div:nth-child(3) > div > div > div > div:nth-child(1) > div:nth-child(-n+99)",
"multiple": true,
"delay": "5000"
}
]
}
Hemos llegado al final. Esta es la manera que se me ha ocurrido de limitar la cantidad de veces que se hace scroll en una web con scroll infinito. Si conoces una alternativa mejor o más sencilla te invito a dejarla en los comentarios.
Espero que te haya gustado y te sea de utilidad esta técnica. ¡Hasta la próxima! 😉