Tutoriel pas à pas : extraire des données web avec Cypress

Je me rappelle encore la toute première fois où j’ai voulu extraire des données produits d’un site web. Je me suis retrouvé devant une page pleine de baskets de running, en me disant : « Franchement, ça doit être simple de récupérer tous ces noms et prix dans un tableur, non ? » Quelques heures plus tard, j’étais embourbé dans des erreurs JavaScript, des sélecteurs tordus, et j’ai commencé à avoir un vrai respect pour tous ceux qui ont déjà monté un extracteur web à la main.

Si tu t’es déjà retrouvé dans cette galère—que tu bosses en vente, e-commerce ou opérations et que tu veux juste des données fraîches pour prendre de meilleures décisions—rassure-toi, tu n’es pas le seul. L’extraction de données web a explosé ces dernières années. D’ailleurs, le et devrait doubler d’ici 2030. Mais voilà le souci : la plupart des outils classiques demandent de vraies compétences techniques. C’est pour ça que je vais te présenter deux façons de faire : une méthode « main dans le cambouis » avec Cypress, et une alternative sans code, boostée à l’IA, avec . On va prendre la comme terrain de jeu.

Que tu sois développeur prêt à tester tes skills JavaScript ou utilisateur métier qui préfère zapper le code, ce guide va t’aider à choper les données qu’il te faut—sans y laisser ta santé mentale (ni ton week-end).

L’extraction web, c’est quoi et pourquoi c’est devenu indispensable pour les boîtes ?

Pour faire simple : l’extraction web, c’est automatiser la récupération de données sur des sites internet. Plutôt que de copier-coller à la main les noms de produits, les prix ou les contacts, tu laisses un logiciel faire le sale boulot.

Mais pourquoi c’est si crucial pour les entreprises ? Aujourd’hui, la donnée, c’est de l’or (ou du lait d’avoine, selon tes préférences). Les équipes commerciales, e-commerce ou opérations utilisent l’extraction web pour :

• Trouver des leads en récupérant des contacts sur des annuaires ou réseaux sociaux.
• Surveiller les prix des concurrents et les tendances produits—.
• Analyser les avis clients en extrayant notes et commentaires.
• Automatiser la veille qui prendrait des heures (voire des jours) à la main.

Et le retour sur investissement est bien réel : disent que les données publiques du web leur permettent de décider plus vite et plus juste. Bref, si tu n’utilises pas l’extraction web, tu passes sûrement à côté d’opportunités et d’infos clés.

Focus sur Cypress : un outil phare pour l’extraction web

Parlons outils. Cypress est un framework open-source pensé à la base pour les tests end-to-end d’applis web. Imagine un robot qui clique sur des boutons, remplit des formulaires et vérifie que ton site tourne bien. Mais l’astuce, c’est que comme Cypress s’exécute dans un vrai navigateur et gère super bien les sites dynamiques, il est aussi devenu un outil (un peu détourné) pour l’extraction web.

Comment Cypress se compare-t-il aux autres outils, notamment ceux en Python (genre BeautifulSoup ou Scrapy) ? Petit topo :

• Cypress : Parfait pour extraire du contenu dynamique généré en JavaScript. Il faut connaître JavaScript et être à l’aise avec Node.js. C’est puissant et flexible, mais clairement pour les devs.
• Extracteurs Python : Des outils comme BeautifulSoup ou Scrapy sont top pour crawler à grande échelle et pour les pages HTML statiques. Leur écosystème est riche, mais ils galèrent avec les sites qui ont besoin d’un vrai navigateur pour charger le contenu.

Si tu as déjà des bases en JavaScript ou en QA, Cypress peut être super efficace pour extraire des données. Mais si le code te donne des sueurs froides, pas de panique—je te montre une alternative sans code juste après.

Tutoriel pas à pas : extraire des données avec Cypress (exemple Adidas chaussures homme)

Passons à la pratique et créons un extracteur Cypress pour la . Objectif : récupérer les noms, prix, images et liens des produits dans un fichier bien propre.

1. Préparer ton environnement Cypress

Avant tout, installe et npm. Ensuite, ouvre ton terminal et tape :

1mkdir adidas-scraper
2cd adidas-scraper
3npm init -y
4npm install cypress --save-dev

Ça crée un nouveau projet et installe Cypress en local. Pour lancer Cypress la première fois :

1npx cypress open

Cypress va générer un dossier cypress/ avec des exemples de tests. Tu peux les virer et créer ton propre fichier, par exemple cypress/e2e/adidas-scraper.cy.js.

2. Inspecter le site et repérer les infos à extraire

Place à l’enquête. Ouvre la dans ton navigateur, fais un clic droit sur un produit et choisis « Inspecter ». Tu verras que chaque produit est dans une carte, avec des éléments pour le nom, le prix, l’image et le lien.

Par exemple :

1<div class="product-card">
2   <a href="/us/adizero-sl2-running-shoes/XYZ123.html">
3      <img src="..." alt="Adizero SL2 Running Shoes"/>
4      <div class="product-price">$130</div>
5      <div class="product-name">Adizero SL2 Running Shoes -- Men's Running</div>
6   </a>
7</div>

Repère les classes comme .gl-price pour les prix, et cherche des motifs récurrents dans le HTML. C’est là que tu vas dire à Cypress quoi extraire.

3. Écrire le script Cypress pour extraire les données

Voici un exemple de script Cypress pour commencer :

1// cypress/e2e/adidas-scraper.cy.js
2describe('Scrape Adidas Running Shoes', () => {
3  it('collects product name, price, image, and link', () => {
4    cy.visit('<https://www.adidas.com/us/men-running-shoes>');
5    const products = [];
6    cy.get('a[href*="/us/"][href*="running-shoes"]').each(($el) => {
7      const name = $el.find('*:contains("Running Shoes")').text().trim();
8      const price = $el.find('.gl-price').text().trim();
9      const imageUrl = $el.find('img').attr('src');
10      const link = $el.attr('href');
11      products.push({ name, price, image: imageUrl, link: `https://www.adidas.com${link}` });
12    }).then(() => {
13      cy.writeFile('cypress/output/adidas_products.json', products);
14    });
15  });
16});

Ce que fait ce script :

• cy.visit() charge la page.
• cy.get() sélectionne tous les liens produits qui correspondent au motif Adidas.
• .each() parcourt chaque produit pour récupérer nom, prix, image et lien.
• Les données sont stockées dans un tableau puis écrites dans un fichier JSON.

Tu devras peut-être ajuster les sélecteurs si Adidas change son site, mais ce script te donne une bonne base.

4. Exporter et utiliser les données extraites

Après avoir lancé le script (via l’interface Cypress ou npx cypress run), va voir le fichier cypress/output/adidas_products.json. Tu y trouveras un tableau d’objets produits comme :

1[
2  {
3    "name": "Adizero SL2 Running Shoes Men's Running",
4    "price": "$130",
5    "image": "<https://assets.adidas.com/images/w_280,h_280,f_auto,q_auto:sensitive/.../adizero-SL2-shoes.jpg>",
6    "link": "<https://www.adidas.com/us/adizero-sl2-running-shoes/XYZ123.html>"
7  },
8  ...
9]

Tu peux ensuite convertir ce JSON en CSV, l’analyser dans Excel ou l’intégrer à ton outil de BI préféré. Et si tu veux aller plus loin, tu peux automatiser ce process pour surveiller les prix tous les jours.

Les galères classiques de l’extraction web avec Cypress

Soyons clairs : l’extraction web, ce n’est pas toujours une promenade de santé. Voici quelques galères fréquentes avec Cypress (et comment les contourner) :

• Contenu généré en JavaScript : Cypress gère bien le contenu dynamique, mais il faut parfois attendre que les éléments chargent ou faire défiler la page pour déclencher le lazy loading. Utilise cy.wait() ou des commandes de scroll si besoin.
• Anti-bot : Certains sites bloquent les robots via l’user agent ou en limitant le nombre de requêtes. Cypress tourne dans un vrai navigateur, ce qui aide, mais pour les sites très protégés, il faudra peut-être passer par des proxys ou bidouiller les headers.
• Sélecteurs instables : Si Adidas change la structure HTML ou les noms de classes, ton script peut casser. Pense à mettre à jour tes sélecteurs régulièrement.
• Pagination : La plupart des pages produits sont paginées. Il faudra ajouter une logique pour cliquer sur « Suivant » et agréger les résultats.
• Gestion des erreurs : Cypress est fait pour les tests, donc il râle fort si un élément manque. Ajoute des vérifs pour gérer les absences d’éléments sans tout planter.

Si tu as l’impression qu’il faut un diplôme d’informatique juste pour sortir une liste de baskets, tu n’es pas le seul. C’est justement pour ça qu’on a créé Thunderbit.

Trop galère ? Passe à Thunderbit pour extraire des données en 2 clics

Imaginons que tu n’aies pas envie de t’embêter avec Node.js, les sélecteurs ou le débogage JavaScript. Découvre , notre extension Chrome d’extraction web boostée à l’IA. Elle est pensée pour les pros qui veulent juste les données—sans code, sans config, sans prise de tête.

Ce qui fait la différence avec Thunderbit :

• Aucun code ni sélecteur à gérer : Tu pointes, tu cliques, l’IA fait le reste.
• Un modèle, plusieurs sites : L’IA de Thunderbit s’adapte à différentes mises en page, pas besoin de tout reconfigurer à chaque site.
• Extraction en local ou dans le cloud : Choisis le mode qui colle à tes besoins de rapidité ou de fiabilité.
• Gère la pagination et les sous-pages : Thunderbit peut cliquer sur les pages suivantes et même visiter les pages produits pour enrichir tes données.
• Export gratuit : Télécharge tes données vers Excel, Google Sheets, Airtable ou Notion—aucune mauvaise surprise côté paiement.

Voyons comment extraire la page Adidas avec Thunderbit.

Tutoriel pas à pas : extraire des données avec Thunderbit (exemple Adidas)

1. Installer l’extension Chrome Thunderbit

Commence par installer . Ça prend moins d’une minute, plus rapide que de retrouver mes clés le matin.

Crée-toi un compte gratuit—Thunderbit offre un essai gratuit (10 pages) et un forfait gratuit (6 pages par mois), parfait pour tester sur des vrais cas sans sortir la CB.

2. Extraire les données avec l’IA (AI Suggest Fields)

• Ouvre la .
• Clique sur l’icône Thunderbit dans ton navigateur. La barre latérale s’ouvre.
• Clique sur « IA : suggérer les champs ». L’IA de Thunderbit analyse la page et détecte automatiquement les champs nom, prix, image et lien. Un aperçu des premières lignes s’affiche.
• Tu veux ajuster les colonnes ? Renomme-les ou ajoute-en d’un clic. Tu peux même donner une consigne en langage naturel, genre « extraire aussi le nombre de coloris disponibles ».
• Clique sur « Extraire ». Thunderbit collecte toutes les données, en cliquant automatiquement sur les pages suivantes si besoin. Pour enrichir avec plus de détails, active l’extraction des sous-pages—Thunderbit visitera chaque fiche produit pour compléter ton tableau.

3. Exporter et utiliser tes données

Une fois l’extraction terminée, vérifie le tableau dans la barre latérale Thunderbit. Tu peux :

• Exporter vers Excel, Google Sheets, Airtable ou Notion en un clic.
• Télécharger au format CSV ou JSON.
• Exporter images, emails, numéros de téléphone, etc.—Thunderbit gère tous les types de données courants.

Et oui, l’export est totalement gratuit. Pas de mauvaise surprise à la dernière minute.

Pour plus d’astuces, jette un œil à notre ou explore le pour d’autres tutos d’extraction.

Cypress vs Thunderbit : quel extracteur web choisir ?

Comparons Cypress et Thunderbit côte à côte. Voici un tableau récapitulatif :

En résumé : Cypress, c’est le contrôle total, Thunderbit, c’est la rapidité et la simplicité. Si tu aimes coder et personnaliser, Cypress est fait pour toi. Si tu veux juste les données (et que ton boss les attend pour midi), Thunderbit est ton meilleur pote.

À retenir : comment choisir la meilleure méthode d’extraction web ?

• L’extraction web est devenue incontournable pour les entreprises modernes—que ce soit pour surveiller la concurrence, générer des leads ou analyser le marché.
• Cypress est un outil puissant et flexible pour les développeurs qui veulent coder leurs propres extracteurs. Idéal pour les sites dynamiques et les workflows sur-mesure, mais demande un peu d’apprentissage et d’entretien.
• Thunderbit s’adresse à tous les autres. C’est une qui rend l’extraction aussi simple que deux clics—sans code, sans config, sans prise de tête. Elle gère la pagination, les sous-pages et exporte gratuitement vers tes outils préférés.
• Opte pour Cypress si tu veux une flexibilité totale et que le code ne te fait pas peur.
• Choisis Thunderbit pour gagner du temps, éviter les galères techniques et obtenir des données propres rapidement—surtout si tu bosses en vente, e-commerce, marketing ou opérations.

Pour aller plus loin, explore notre pour des tutos sur , , et bien plus.

Et si un jour tu te retrouves devant une page blindée de baskets de running, à te demander comment tout mettre dans un tableur—pense-y, tu as le choix. Bonne extraction !

FAQ

1. Qu’est-ce que Cypress et comment l’utiliser pour l’extraction web ?

Cypress est un outil de test basé sur JavaScript qui peut interagir avec des sites dynamiques, ce qui le rend adapté à l’extraction de contenus générés en JavaScript.

2. Quels sont les principaux défis de l’extraction web avec Cypress ?

Les difficultés courantes incluent les changements de structure HTML, le lazy loading, les protections anti-bot, la gestion de la pagination ou des éléments manquants sur des pages complexes.

3. Existe-t-il une solution plus simple pour extraire des données sans coder ?

Oui, Thunderbit est une extension Chrome alimentée par l’IA qui permet d’extraire des données en quelques clics—sans code, sans configuration, ni réglage de sélecteurs.

En savoir plus :