0% found this document useful (0 votes)
26 views11 pages

Guide de Web Scraping JavaScript

This guide provides tools and methods for web scraping dynamic JavaScript content using Google Colab, including Selenium, Requests-HTML, Playwright, and BeautifulSoup. It includes practical examples for scraping GitHub repositories and MDN documentation, as well as comparisons and recommendations for different use cases. Additionally, it covers best practices, optimizations, and legal considerations for web scraping.

Uploaded by

mokhtar.sellami
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
26 views11 pages

Guide de Web Scraping JavaScript

This guide provides tools and methods for web scraping dynamic JavaScript content using Google Colab, including Selenium, Requests-HTML, Playwright, and BeautifulSoup. It includes practical examples for scraping GitHub repositories and MDN documentation, as well as comparisons and recommendations for different use cases. Additionally, it covers best practices, optimizations, and legal considerations for web scraping.

Uploaded by

mokhtar.sellami
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

web_scraping_guide.

md 2025-05-24

Guide Complet Web Scraping JavaScript - Google


Colab
🎯 Introduction
Ce guide présente différents outils pour scraper des sites web avec contenu JavaScript dynamique, avec des
exemples pratiques testables sur Google Colab.

📋 Table des Matières


1. Selenium + Chrome
2. Requests-HTML
3. Playwright
4. BeautifulSoup + Selenium
5. Scrapy-Splash
6. Comparatif et Recommandations

🚀 1. Selenium + Chrome
Installation et Configuration

# Installation des dépendances


!apt-get update
!apt install chromium-chromedriver
!cp /usr/lib/chromium-browser/chromedriver /usr/bin
!pip install selenium beautifulsoup4 pandas

# Import des modules


from selenium import webdriver
from [Link] import By
from [Link] import WebDriverWait
from [Link] import expected_conditions as EC
from [Link] import Options
from bs4 import BeautifulSoup
import time
import json

Configuration du navigateur

def setup_chrome_driver():
"""Configure Chrome pour Colab"""
chrome_options = Options()
chrome_options.add_argument("--headless")
chrome_options.add_argument("--no-sandbox")
1 / 11
web_scraping_guide.md 2025-05-24

chrome_options.add_argument("--disable-dev-shm-usage")
chrome_options.add_argument("--disable-gpu")
chrome_options.add_argument("--window-size=1920,1080")

driver = [Link](options=chrome_options)
return driver

Exemple 1: Scraper GitHub (contenu dynamique)

def scrape_github_repos(username):
"""Scrape les repositories GitHub d'un utilisateur"""
driver = setup_chrome_driver()

try:
url = f"[Link]
[Link](url)

# Attendre que les repos se chargent


WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.CSS_SELECTOR, "[data-testid='repos-
list']"))
)

# Obtenir le HTML complet après rendu JS


html = driver.page_source
soup = BeautifulSoup(html, '[Link]')

repos = []
repo_items = soup.find_all('div', {'class': lambda x: x and 'Box-row' in
x})

for repo in repo_items:


name_elem = [Link]('a', {'itemprop': 'name codeRepository'})
if name_elem:
repo_data = {
'name': name_elem.[Link](),
'url': '[Link] + name_elem.get('href', ''),
'description': ''
}

desc_elem = [Link]('p', {'itemprop': 'description'})


if desc_elem:
repo_data['description'] = desc_elem.[Link]()

[Link](repo_data)

return repos

finally:
[Link]()

2 / 11
web_scraping_guide.md 2025-05-24

# Test
repos = scrape_github_repos("octocat")
print(f"Trouvé {len(repos)} repositories:")
for repo in repos[:3]:
print(f"- {repo['name']}: {repo['description']}")

Exemple 2: Scraper une documentation JavaScript (Exemple avec MDN)

def scrape_mdn_documentation(topic="javascript"):
"""Scrape documentation MDN avec contenu dynamique"""
driver = setup_chrome_driver()

try:
url = f"[Link]
[Link](url)

# Attendre que les résultats se chargent


WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.CSS_SELECTOR, ".search-results"))
)

html = driver.page_source
soup = BeautifulSoup(html, '[Link]')

results = []
articles = soup.find_all('article', class_='result-item')

for article in articles[:5]: # Limiter à 5 résultats


title_elem = [Link]('h3')
link_elem = [Link]('a')
desc_elem = [Link]('p')

if title_elem and link_elem:


result = {
'title': title_elem.[Link](),
'url': '[Link] + link_elem.get('href',
''),
'description': desc_elem.[Link]() if desc_elem else ''
}
[Link](result)

return results

finally:
[Link]()

# Test
docs = scrape_mdn_documentation("fetch")
for doc in docs:
print(f"📖 {doc['title']}")
print(f" {doc['url']}")

3 / 11
web_scraping_guide.md 2025-05-24

print(f" {doc['description'][:100]}...")
print()

🌐 2. Requests-HTML
Installation et Configuration

# Installation
!pip install requests-html pyppeteer

# Import
from requests_html import HTMLSession
import asyncio

Exemple: Scraper des prix dynamiques

async def scrape_with_requests_html():


"""Scraper avec requests-html pour contenu JS"""
session = HTMLSession()

try:
# Site d'exemple avec contenu JavaScript
url = "[Link] # Simule un délai
r = [Link](url)

# Rendre le JavaScript (si nécessaire)


await [Link](timeout=20)

# Extraire les données


data = {
'status': r.status_code,
'url': [Link],
'content_length': len([Link])
}

return data

except Exception as e:
return {'error': str(e)}

# Test (nécessite un environnement async)


# result = await scrape_with_requests_html()
# print(result)

🎭 3. Playwright
4 / 11
web_scraping_guide.md 2025-05-24

Installation et Configuration

# Installation
!pip install playwright
!playwright install chromium

# Import
from playwright.async_api import async_playwright
import asyncio

Exemple: Scraper une Single Page Application

async def scrape_with_playwright():


"""Scraper avec Playwright pour SPA complexes"""
async with async_playwright() as p:
# Lancer le navigateur
browser = await [Link](headless=True)
page = await browser.new_page()

try:
# Naviguer vers une page avec JS
await [Link]("[Link]

# Attendre que la page se charge complètement


await page.wait_for_load_state('networkidle')

# Extraire le contenu
title = await [Link]()
content = await [Link]()

# Interaction avec la page


links = await page.query_selector_all('a')
link_texts = []
for link in links:
text = await link.inner_text()
href = await link.get_attribute('href')
if text and href:
link_texts.append({'text': text, 'href': href})

return {
'title': title,
'links_count': len(link_texts),
'links': link_texts[:5], # Premiers 5 liens
'html_length': len(content)
}

finally:
await [Link]()

# Test

5 / 11
web_scraping_guide.md 2025-05-24

# result = await scrape_with_playwright()


# print(f"Titre: {result['title']}")
# print(f"Liens trouvés: {result['links_count']}")

🍲 4. BeautifulSoup + Selenium (Méthode Hybride)


Exemple Complet: Scraper Documentation React

def scrape_react_docs():
"""Scraper la documentation React officielle"""
driver = setup_chrome_driver()

try:
url = "[Link]
[Link](url)

# Attendre le chargement
[Link](3)

html = driver.page_source
soup = BeautifulSoup(html, '[Link]')

# Extraire les sections de documentation


sections = []

# Chercher les articles ou sections principales


articles = soup.find_all(['article', 'section', 'div'],
class_=lambda x: x and any(word in [Link]()
for word in ['content', 'article', 'section',
'learn']))

for article in articles[:5]:


# Extraire le titre
title_elem = [Link](['h1', 'h2', 'h3'])
title = title_elem.[Link]() if title_elem else "Sans titre"

# Extraire le contenu textuel


paragraphs = article.find_all('p')
content = ' '.join([[Link]() for p in paragraphs[:3]])

if content:
[Link]({
'title': title,
'content': content[:200] + '...' if len(content) > 200 else
content,
'word_count': len([Link]())
})

return sections

6 / 11
web_scraping_guide.md 2025-05-24

finally:
[Link]()

# Test
react_sections = scrape_react_docs()
print(f"📚 Documentation React - {len(react_sections)} sections trouvées:")
for i, section in enumerate(react_sections, 1):
print(f"\n{i}. {section['title']}")
print(f" Contenu: {section['content']}")
print(f" Mots: {section['word_count']}")

🕷 5. Scrapy-Splash (Avancé)
Installation et Configuration

# Note: Scrapy-Splash nécessite un serveur Splash séparé


# Voici un exemple conceptuel

!pip install scrapy scrapy-splash

# Configuration basique
splash_settings = {
'SPLASH_URL': '[Link] # URL du serveur Splash
'DOWNLOADER_MIDDLEWARES': {
'scrapy_splash.SplashCookiesMiddleware': 723,
'scrapy_splash.SplashMiddleware': 725,
},
'DUPEFILTER_CLASS': 'scrapy_splash.SplashAwareDupeFilter',
}

📊 6. Comparatif et Recommandations
Tableau Comparatif

Outil Facilité Performance JS Support Colab Compatible

Selenium ⭐⭐⭐ ⭐⭐ ⭐⭐⭐⭐⭐ ✅

Requests-HTML ⭐⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⚠

Playwright ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ✅

BeautifulSoup+Selenium ⭐⭐⭐⭐⭐ ⭐⭐ ⭐⭐⭐⭐ ✅

Scrapy-Splash ⭐⭐ ⭐⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ ❌

Recommandations par Cas d'Usage

7 / 11
web_scraping_guide.md 2025-05-24

🎯 Pour Documentation (votre cas)

# Recommandation: Selenium + BeautifulSoup


def scrape_documentation_pages(base_url, page_urls):
"""Fonction optimisée pour scraper documentation"""
driver = setup_chrome_driver()
scraped_pages = []

try:
for url in page_urls:
full_url = base_url + url if not [Link]('http') else url

print(f"📄 Scraping: {full_url}")


[Link](full_url)

# Attendre le contenu
[Link](2)

html = driver.page_source
soup = BeautifulSoup(html, '[Link]')

# Nettoyer le HTML (supprimer scripts, styles)


for script in soup(["script", "style", "nav", "footer"]):
[Link]()

# Extraire le contenu principal


main_content = [Link](['main', 'article', 'div'],
class_=lambda x: x and 'content' in [Link]())

if not main_content:
main_content = [Link]('body')

page_data = {
'url': full_url,
'title': [Link] if [Link] else '',
'html': str(main_content) if main_content else '',
'text': main_content.get_text(strip=True) if main_content else '',
'word_count': len(main_content.get_text().split()) if main_content
else 0
}

scraped_pages.append(page_data)

# Pause entre les requêtes


[Link](1)

finally:
[Link]()

return scraped_pages

8 / 11
web_scraping_guide.md 2025-05-24

💾 Sauvegarde des Données

def save_scraped_data(data, filename="scraped_docs"):


"""Sauvegarder les données scrapées"""
import json
import pandas as pd

# Sauvegarde JSON
with open(f"{filename}.json", 'w', encoding='utf-8') as f:
[Link](data, f, ensure_ascii=False, indent=2)

# Sauvegarde CSV
df = [Link](data)
df.to_csv(f"{filename}.csv", index=False, encoding='utf-8')

# Sauvegarde HTML individuelle


for i, page in enumerate(data):
with open(f"{filename}_page_{i+1}.html", 'w', encoding='utf-8') as f:
[Link](page['html'])

print(f"✅ Données sauvegardées: {len(data)} pages")


print(f"📁 Fichiers: {filename}.json, {filename}.csv, pages HTML
individuelles")

# Exemple d'utilisation complète


example_urls = [
"[Link]
"[Link]
]

# scraped_data = scrape_documentation_pages("", example_urls)


# save_scraped_data(scraped_data, "example_docs")

🚀 Script de Test Complet

def test_all_methods():
"""Tester tous les outils sur une page simple"""
test_url = "[Link]

print("🧪 Test de tous les outils de scraping\n")

# Test 1: Selenium
print(" Test Selenium...")
try:
driver = setup_chrome_driver()
[Link](test_url)
selenium_html = driver.page_source
[Link]()
print(f" ✅ Selenium: {len(selenium_html)} caractères récupérés")

9 / 11
web_scraping_guide.md 2025-05-24

except Exception as e:
print(f" ❌ Selenium: {e}")

# Test 2: Requests simple (pour comparaison)


print(" Test Requests (sans JS)...")
try:
import requests
response = [Link](test_url)
requests_html = [Link]
print(f" ✅ Requests: {len(requests_html)} caractères récupérés")
except Exception as e:
print(f" ❌ Requests: {e}")

print("\n📊 Résumé:")
print("- Selenium: Idéal pour JavaScript complexe")
print("- Requests: Rapide pour contenu statique")
print("- Choisir selon le niveau de JavaScript sur votre site cible")

# Lancer le test
test_all_methods()

🎓 Conseils Pratiques
✅ Bonnes Pratiques

Respecter [Link] et conditions d'utilisation


Limiter la fréquence des requêtes (rate limiting)
Gérer les erreurs et timeouts
Nettoyer les données extraites
Sauvegarder régulièrement pendant le scraping

🔧 Optimisations

Utiliser des sélecteurs CSS spécifiques


Réutiliser les sessions navigateur
Paralléliser quand possible (avec précaution)
Cacher les ressources inutiles (images, CSS)

🚨 Points d'Attention

Légalité: Vérifier les conditions d'utilisation


Éthique: Ne pas surcharger les serveurs
Maintenance: Les sites changent, adapter le code
Performance: Optimiser pour de gros volumes

🔗 Ressources Utiles
Selenium Documentation

10 / 11
web_scraping_guide.md 2025-05-24

Playwright Documentation
BeautifulSoup Documentation
Scrapy Documentation

Ce guide est conçu pour être exécuté dans Google Colab. Adaptez les exemples selon vos besoins spécifiques de
scraping.

11 / 11

You might also like