Supprimer des applications d'une seule page avec Playwright : un guide détaillé

Les applications monopage, ou SPA, sont devenues la norme pour le développement Web moderne. Contrairement aux sites multipages traditionnels, les SPA mettent à jour dynamiquement le contenu et affichent les pages à l'aide de JavaScript sans nécessiter de rechargement complet de la page. Cela crée une expérience fluide, semblable à celle d’une application, pour les utilisateurs.

Cependant, le recours accru au JavaScript côté client et au chargement de données asynchrone pose des défis uniques en matière de récupération de données à partir d'applications monopage. Les outils de scraping traditionnels ne sont pas à la hauteur car ils sont conçus pour les sites statiques et l'analyse HTML.

Dans ce guide complet de plus de 3200 XNUMX mots, vous apprendrez des techniques éprouvées pour surmonter les obstacles courants rencontrés lors du grattage de SPA modernes à l'aide de Playwright.

Pourquoi gratter les SPA est un défi

Avant de plonger dans les solutions, il est important de comprendre ce qui rend les applications d'une seule page difficiles à supprimer en premier lieu.

Utilisation intensive de JavaScript côté client

Le HTML initialement servi par le serveur est essentiellement un shell statique de la page. Le contenu réel est généré dynamiquement et rendu côté client via JavaScript. Cela signifie qu'une grande partie des données n'existe que dans les objets JavaScript et les éléments DOM plutôt que dans la source HTML initiale.

Chargement de données asynchrone

Les SPA récupèrent fréquemment du nouveau contenu de manière asynchrone en arrière-plan et mettent à jour la page sans rechargement complet. Les données ne sont souvent pas disponibles dès le premier chargement de la page.

Selon les mesures de Radware, une page Web moyenne effectue plus de 100 requêtes vers des ressources externes lors du rendu.

Avec une utilisation intensive de technologies comme AJAX, les données dont vous avez besoin peuvent toujours se charger en arrière-plan lorsque vous essayez de les extraire. Cela conduit à la suppression de données incomplètes.

Manipulation dynamique du DOM

Les composants et éléments rendus sur un SPA peuvent changer rapidement en réponse aux entrées de l'utilisateur. Le contenu est généré, ajouté, supprimé ou mis à jour dynamiquement au fur et à mesure que l'utilisateur interagit avec l'application.

Essayer de cibler des éléments par leur position DOM initiale est fragile car elle change si fréquemment.

Dépendance aux API et aux requêtes AJAX

Les SPA utilisent largement les API REST, GraphQL, WebSockets et les requêtes AJAX pour récupérer les données des serveurs backend. Le contenu est ensuite restitué côté client.

Cet échange de données entre le client et le serveur est invisible pour les approches de scraping traditionnelles qui ne voient que la réponse HTML initiale.

Sessions et état authentifiés

Les SPA complexes exigent souvent que les utilisateurs se connectent avant d'accéder au contenu et aux données privés. Cet état d'authentification doit être correctement maintenu dans les scripts de scraping.

Les cookies stockant les identifiants de session, les identifiants d'utilisateur et les jetons doivent être traités pour imiter une session utilisateur authentifiée.

La nécessité de l'exécution de JavaScript

Contrairement aux sites statiques, l’analyse pure du HTML n’est pas suffisante pour les SPA. La page doit être rendue en exécutant JavaScript dans un environnement de type navigateur pour générer la structure de données finale.

Les navigateurs sans tête comme Playwright offrent cette capacité pour produire l'expérience utilisateur final réaliste nécessaire pour supprimer les SPA.

Ces défis rendent le SPA scraping efficace très différent du web scraping conventionnel. Voyons maintenant comment Playwright peut vous aider à surmonter ces obstacles.

Pourquoi utiliser Playwright pour gratter les SPA ?

Playwright est une bibliothèque Node.js permettant d'automatiser les navigateurs Web populaires tels que Chromium, Firefox et WebKit. Les fonctionnalités clés pertinentes pour le scraping SPA incluent :

Automatisation du navigateur sans tête

Playwright peut piloter les navigateurs sans afficher d'interface utilisateur visible, appelé mode sans tête. Cela permet d'exécuter des pages JavaScript lourdes pour remplir les données.

En attente des éléments et des conditions

Des mécanismes d'attente intelligents intégrés empêchent les erreurs de scraping en attendant que les éléments ou les fonctions atteignent les états souhaités avant d'interagir.

Requêtes API moqueuses

Playwright permet d'intercepter les demandes et de répondre avec des données fictives au lieu d'appeler de véritables API. Cela permet de récupérer les données AJAX.

Tests réactifs

Émulez les appareils mobiles, les zones géographiques et la limitation du processeur pour répondre aux besoins de tests de conception réactifs.

Visionneuse de traces

Visualisez les scripts Playwright pour comprendre les interactions exactes du navigateur et diagnostiquer les problèmes.

Gestion automatique des popups et des boîtes de dialogue

Playwright gère automatiquement les alertes, les confirmations, les invites, les demandes d'authentification et les téléchargements, simplifiant ainsi la logique du script.

Sélecteurs et API DOM

API riche pour extraire des données via des sélecteurs CSS ou parcourir directement des éléments DOM comme une page Web ordinaire.

Ces capacités rendent Playwright bien adapté aux défis posés par les applications Web monopage. Les principales alternatives telles que Puppeteer, Selenium et HtmlUnit, bien qu'utiles pour les tests généraux des navigateurs, ne disposent pas de l'ensemble de fonctionnalités robustes de Playwright pour un scraping SPA efficace.

Passons ensuite à quelques exemples de code illustrant les modèles de récupération de clés à l'aide de Playwright.

Modèles de grattage pour les SPA à l'aide de Playwright

Ci-dessous, nous explorerons quelques techniques de grattage courantes pour surmonter les défis spécifiques du SPA.

Attendez que le contenu se charge

L’un des défis les plus fondamentaux du SPA scraping est de laisser le temps au contenu de se charger avant l’extraction.

Plutôt que d'essayer d'extraire les données immédiatement, nous devons attendre que le rendu JavaScript asynchrone ait fini de remplir la page.

Dramaturge page.waitForSelector() La méthode permet d'attendre qu'un sélecteur spécifique apparaisse avant d'exécuter d'autres commandes :

// Navigate to SPA
await page.goto(‘https://spa.com‘);

// Wait for content to load
await page.waitForSelector(‘.content‘);

// Extract data now that .content exists
const data = await page.$eval(‘.content‘, elem => elem.textContent); 

Cela attend que l'élément avec la classe content est disponible dans le DOM avant d'extraire son contenu texte.

Sans cette attente, .content peut ne pas exister encore s'il se charge toujours de manière asynchrone, provoquant des erreurs. Ce simple délai laisse au SPA le temps de récupérer et de restituer de nouvelles données permettant une extraction ultérieure.

AttendreFonction

Dans certains cas, nous devrons peut-être attendre que des conditions JavaScript plus complexes soient vraies plutôt qu'un simple sélecteur. Ici, nous pouvons utiliser page.waitForFunction():

// Wait for data to load
await page.waitForFunction(() => {
  return window.store.articles.length > 0 ;
});

// Store now has loaded articles
const articles = await page.evaluate(() => {
  return window.store.articles; 
});

Cela interroge la page jusqu'à ce que la coutume window.store.articles la condition renvoie vrai avant de lire les données.

L'attente intelligente des sélecteurs et des conditions évite les échecs de scraping dus au chargement asynchrone des données de page.

Gérer les mises à jour de contenu dynamique

Les applications à page unique peuvent mettre à jour le contenu de manière dynamique en réponse aux entrées et aux événements de l'utilisateur sans recharger la page.

Un exemple courant est le défilement infini où de nouveaux éléments sont ajoutés lorsque l'utilisateur fait défiler vers le bas.

Pour gérer les éléments ajoutés dynamiquement, nous pouvons écouter les modifications du DOM à l'aide d'observateurs de mutation :

// Monitor mutations
await page.evaluate(() => {

  const observer = new MutationObserver(mutations => {
    console.log(‘Added nodes:‘, mutations[0].addedNodes);
  });

  observer.observe(document, { 
    childList: true,
    subtree: true
  });

});

La observer sera averti chaque fois que de nouveaux éléments sont ajoutés au corps de la page. Nous pouvons alors déclencher notre logique de scraping en réponse à ces mutations.

Cela permet de s'adapter aux mises à jour de contenu au lieu de simplement gérer le chargement initial de la page.

Requêtes API simulées

Les SPA utilisent largement les API REST et GraphQL pour récupérer des données côté client.

Pour intercepter ces requêtes, nous pouvons définir des itinéraires dans Playwright pour simuler les réponses :

await page.route(‘/api/articles‘, route => {
  route.fulfill({
    status: 200,
    body: JSON.stringify([
      {title: ‘Article 1‘},
      {title: ‘Article 2‘}  
    ])
  }); 
});

// Mock response will be returned from /api/articles
await page.goto(‘/page-that-calls-api‘) 

Lorsque le SPA tente d'appeler /api/articles, notre gestionnaire répondra avec la fausse réponse définie au lieu d'accéder à la véritable API.

Cela permet de récupérer les données de l'API sans effets secondaires. Nous pouvons créer des réponses robustes pour gérer différents scénarios auxquels notre code SPA peut s'attendre.

Authentifier la session

La suppression des zones de compte privées dans les SPA nécessite une gestion appropriée de l'authentification.

Une approche simple consiste à vous connecter normalement via l'interface utilisateur avant de gratter :

// Navigate to login page
await page.goto(‘/login‘);

// Enter credentials and submit form 
await page.type(‘#email‘, ‘[email protected]‘);
await page.type(‘#password‘, ‘secret‘);
await page.click(‘#submit‘);

// Session now authenticated
// Crawl member pages 

Cela exploite les capacités de Playwright pour automatiser les remplissages de formulaires et les clics créant une session de navigateur authentifiée.

Pour de meilleurs résultats, connectez-vous dans un beforeAll accrocher et réutiliser le browser ainsi que page contexte tout au long des tests pour partager des cookies.

Gestion de la conception réactive

Les SPA adaptent fréquemment leur présentation et leur contenu à différentes tailles d'appareils. Pour tester ces scénarios réactifs, nous pouvons émuler les navigateurs mobiles en utilisant page.emulate():

await page.emulate({
  viewport: {
    width: 400,  
    height: 800
  },
  userAgent: ‘...‘,
});

La configuration d'une fenêtre d'affichage iPhone et d'un agent utilisateur permet de restituer la page comme le ferait un appareil mobile.

Combinez l'émulation avec waitForSelector et vous pouvez gérer les conceptions réactives de manière fiable.

L'émulation de différents environnements permet de garantir que votre scraper s'adapte au SPA sur ordinateur et mobile.

Bibliothèques d'assistance Scraper

Des services comme Apifier ainsi que GrattageBee fournissez des bibliothèques basées sur Playwright qui gèrent intelligemment l'attente du contenu, automatisent le défilement pour les mises à jour dynamiques des pages, les demandes de limitation et bien plus encore.

Ces outils peuvent simplifier l’écriture vous-même de scripts de scraping SPA robustes.

Script pratique de grattoir de dramaturge

Rassemblons maintenant ces approches dans un grattoir du monde réel pour un hypothétique SPA :

const { chromium } = require(‘playwright‘);

(async () => {

  const browser = await chromium.launch();
  const page = await browser.newPage();  

  // Login to scrape private content
  await page.goto(‘/login‘);
  await page.type(‘#email‘, ‘[email protected]‘);
  await page.type(‘#password‘, ‘secret‘); 
  await page.click(‘#submit‘);

  await page.waitForNavigation();

  // Navigate to SPA
  await page.goto(‘/app‘);

  // Wait for content to load
  await page.waitForSelector(‘.content‘);

  // Monitor mutations
  page.evaluate(() => {
    new MutationObserver().observe(document, {
      childList: true 
    });    
  });

  // Mock API response
  page.route(‘/api/articles‘, route => {
    route.fulfill({ /*...mock response...*/ }); 
  });

  // Extract content 
  const data = await page.evaluate(() => {
    const content = document.querySelector(‘.content‘);
    return content.innerText;
  });

  console.log(data);

  await browser.close();

})();

Ce script se connecte à l'application privée, attend le chargement du contenu authentifié, gère les mutations dynamiques, se moque de la réponse de l'API et extrait les données dans const data.

Les techniques peuvent être adaptées pour développer des grattoirs robustes pour les SPA du monde réel.

Grattage des SPA à grande échelle

Pour les grands SPA, gratter manuellement seulement quelques pages peut être assez simple. Cependant, des solutions intelligentes sont nécessaires pour explorer des milliers ou des millions de pages.

Services d'API de suppression

API de scraping Web comme GrattoirAPI gérez l'automatisation du navigateur, les cookies, les proxys et les rotations à grande échelle. Cela simplifie le scraping des sites lourds en JavaScript, y compris les SPA.

Fermes de navigateurs sans tête

Des services comme Sans navigateur ainsi que Navigateur Cloud Sangfor fournir de grands clusters d'instances Playwright et Puppeteer accessibles via des API. Ces instances parallèles permettent un scraping distribué des SPA à grande échelle.

Robots d'exploration hébergés

Au lieu d'exécuter votre propre infrastructure de scraping, des robots hébergés comme Crawlera ainsi que Exploration des proxys gérer l'orchestration des navigateurs, des proxys et de l'automatisation pour explorer des sites complexes.

Bots de grattage Web

Des outils comme Fantôme, Dexi.io ainsi que ParseHub fournir une configuration pointer-cliquer des grattoirs pour les SPA sans codage. Ces robots détectent automatiquement le contenu des pages, les attentes, les clics, etc., permettant une configuration sans code.

Selon votre cas d'utilisation, tirer parti de l'un de ces services d'entreprise peut s'avérer plus efficace que de créer votre propre infrastructure de scraping pour l'exploration SPA à grande échelle.

Une alternative plus simple : Crawlee

Crawlee fournit un robot d'exploration Web innovant en tant que service pour les sites rendus en JavaScript.

Il gère automatiquement les défis de scraping courants tels que :

• En attente du chargement des éléments ou des URL avant l'extraction
• Authentification des sessions et stockage des cookies
• Intercepter les requêtes API et gérer les données AJAX
• Faire défiler des pages à défilement infini
• Réexécution des extractions ayant échoué pour améliorer la résilience

Crawlee peut explorer des SPA complexes dès le départ sans avoir besoin de coder des scripts Playwright pour l'attente, l'authentification, la gestion AJAX, etc.

Principales fonctionnalités:

• Configurer via une interface visuelle au lieu de coder
• Attend automatiquement les URL et les sélecteurs avant d'extraire les données
• L'exploration avec état transmet les cookies sur toutes les pages
• Interception de requêtes API pour gérer les données XHR, Fetch et JSON
• Rendu Chrome sans tête par défaut
• Outils visuels pour inspecter et déboguer l’exploration
• Backend de robot d'exploration distribué évolutif horizontalement

Cela simplifie le scraping, même des applications Web JavaScript sophistiquées, sans codage Playwright. Le robot d'exploration en tant que service de Crawlee est idéal pour les utilisateurs qui ne souhaitent pas gérer leur propre infrastructure de scraper.

Les applications prises en charge incluent :

• Applications React et Next.js
• SPA angulaires
• Pages Vue.js
• Sites Webpacks
• Pages lourdes AJAX
• PWA et applications Electron
• Des conceptions dynamiques et réactives

Fournir un support clé en main pour les défis de scraping tels que les conditions d'attente, les sessions authentifiées et les modifications de contenu dynamiques fait de Crawlee un choix incontournable pour le scraping SPA sans écrire de scripts complexes.

Conclusion

La suppression d'applications modernes à page unique nécessite l'émulation des interactions des utilisateurs et l'attente d'une activité JavaScript asynchrone. Playwright offre d'excellentes capacités d'automatisation du navigateur pour surmonter ces défis.

Les stratégies clés couvertes dans ce guide comprennent :

• En attente du chargement du contenu initial et des mises à jour dynamiques avant l'extraction
• Écoute des modifications du DOM pour détecter le nouveau contenu en cours de rendu
• Interception des requêtes API REST et GraphQL pour accéder aux données backend
• Émulation d'appareils mobiles et limitation pour gérer les conceptions réactives
• Authentification des sessions et gestion des cookies pour accéder aux données privées des utilisateurs

Suivre ces modèles vous aidera à développer des scrapers Playwright maintenables pour les SPA même complexes s'appuyant fortement sur JavaScript et les API côté client.

À grande échelle, tirer parti des services API de scraping, des fermes de navigateurs sans tête et des robots d'exploration hébergés peut s'avérer plus efficace que de créer votre propre infrastructure Playwright.

Bien que l'écriture de scripts Playwright offre une flexibilité maximale, des outils tels que Crawlee fournissent un service de scraping clé en main plus simple pour les SPA sans avoir besoin de coder vous-même les scripts d'automatisation du navigateur.

J'espère que ce guide vous a permis de bien comprendre les techniques permettant de supprimer des applications difficiles d'une seule page à l'aide de Playwright. Faites-moi savoir si vous avez d'autres questions !