Récupérer la source de la page d’un site Web sous surveillance est une tâche quotidienne pour la plupart des ingénieurs en automatisation des tests. L’analyse de la source de la page permet d’éliminer les bogues identifiés lors des tests réguliers du site Web, des tests fonctionnels ou des exercices de test de sécurité. Dans un processus de test d’application extrêmement complexe, les scripts de test d’automatisation peuvent être écrits de manière à ce que si des erreurs sont détectées dans le programme, il :
- Enregistre le code source de cette page particulière.
- Informe la personne responsable de l’URL de la page.
- Extrait le code source HTML d’un élément ou d’un bloc de code spécifique et le délègue aux autorités responsables si l’erreur s’est produite dans un WebElement ou un bloc de code HTML indépendant particulier.
Il s’agit d’un moyen simple de suivre et de corriger les erreurs logiques et syntaxiques dans le code frontal. Dans cet article, nous comprenons d’abord les terminologies impliquées et explorons comment obtenir la source de la page dans Selenium WebDriver à l’aide de Python.
Qu’est-ce qu’une source de page HTML ?
Dans une terminologie non technique, il s’agit d’un ensemble d’instructions permettant aux navigateurs d’afficher des informations à l’écran de manière esthétique. Les navigateurs interprètent ces instructions à leur manière pour créer des écrans de navigateur pour le côté client. Ceux-ci sont généralement écrits à l’aide du langage HyperText Markup Language (HTML), des feuilles de style en cascade (CSS) et de Javascript.
Cet ensemble complet d’instructions HTML qui constituent une page Web est appelé source de page, source HTML ou simplement code source. Le code source du site Web est une collection de code source provenant de pages Web individuelles.
Voici un exemple de code source pour une page de base avec un titre, un formulaire, une image et un bouton d’envoi.
<!DOCTYPE html>
<html>
<head>
<title>Page Source Example - LambdaTest</title>
</head>
<body>
<h2>Debug selenium testing results : LambdaTest</h2>
<img loading="lazy" data-fr-src="https://cdn.lambdatest.com/assetsnew/images/debug-selenium-testing-results.jpg" alt="debug selenium testing" width="550" height="500"><br><br>
<form action="https://dzone.com/">
<label for="debug">Do you debug test results using LambdaTest?</label><br>
<input type="text" id="debug" name="debug" value="Of-course!"><br>
<br>
<input type="submit" value="Submit">
</form> <br><br>
<button type="button" onclick="alert('Page Source Example : LambdaTest!')">Click Me!</button>
</body>
</html>Qu’est-ce qu’un élément Web HTML ?
La manière la plus simple de décrire un élément Web HTML serait la suivante : « toute balise HTML qui constitue le code source de la page HTML est un élément Web ». Il peut s’agir d’un bloc de code HTML, d’une balise HTML indépendante comme </br>un objet multimédia sur la page Web—image, audio, vidéo, une fonction JS ou un objet JSON enveloppé dans <script> </script> Mots clés.
Dans l’exemple ci-dessus, <title> est un élément Web HTML, et les enfants des balises body sont également des éléments Web HTML, c’est-à-dire, <img>, <button>etc.
Comment obtenir la source de la page dans Selenium WebDriver à l’aide de Python
Selenium WebDriver est un outil de test d’automatisation robuste et fournit aux ingénieurs de test d’automatisation un ensemble diversifié d’API prêtes à l’emploi. Pour que Selenium WebDriver obtienne la source de la page, les liaisons Selenium Python nous fournissent une fonction de pilote appelée page_source pour obtenir la source HTML de l’URL actuellement active dans le navigateur.
Alternativement, nous pouvons également utiliser le GET fonction de la bibliothèque de requêtes de Python pour charger la source de la page. Une autre méthode consiste à exécuter JavaScript à l’aide de la fonction de pilote execute_script et faites en sorte que Selenium WebDriver obtienne la source de la page en Python. Une manière non recommandée d’obtenir la source de la page consiste à utiliser XPath en tandem avec l’URL « view-source: ». Explorons des exemples pour ces quatre façons d’obtenir la source de la page dans Selenium WebDriver à l’aide de Python.
Nous utiliserons un exemple de petite page Web hébergée sur GitHub pour les quatre exemples. Cette page a été créée pour démontrer les tests de glisser-déposer dans Selenium Python à l’aide de LambdaTest.
Obtenir la source de la page HTML à l’aide de driver.page_source
Nous allons chercher pynishant.github.io dans ChromeDriver et enregistrez son contenu dans un fichier nommé page_source.html. Ce nom de fichier peut être n’importe quel nom de votre choix. Ensuite, nous lisons le contenu du fichier et l’imprimons sur le terminal avant de fermer le pilote :
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://pynishant.github.io/")
pageSource = driver.page_source
fileToWrite = open("page_source.html", "w")
fileToWrite.write(pageSource)
fileToWrite.close()
fileToRead = open("page_source.html", "r")
print(fileToRead.read())
fileToRead.close()
driver.quit()Lors de l’exécution réussie du script ci-dessus, la sortie de votre terminal affichera la source de page suivante :
Obtenir la source de la page HTML à l’aide de driver.execute_javascript
Dans l’exemple précédent, nous devons commenter (ou remplacer) le driver.page_source ligne et ajoutez la ligne suivante : driver.execute_script est une API Selenium Python WebDriver pour exécuter JS dans un environnement Selenium. Ici, nous exécutons un script JS qui renvoie un élément de corps HTML.
# pageSource = driver.page_source
pageSource = driver.execute_script("return document.body.innerHTML;")Le code de sortie ressemble à ceci :
Comme vous pouvez le constater, il ne renvoie que le innerHTML de l’élément corps. Comme la dernière sortie, nous n’obtenons pas la source entière de la page. Pour obtenir le document entier, nous exécutons document.documentElement.outerHTML. Le execute_script la ligne ressemble maintenant à ceci :
pageSource = driver.execute_script("return document.documentElement.outerHTML;")Cela nous donne précisément la sortie que nous avons obtenue en utilisant le driver.page_source.
Récupérer la source de la page à l’aide de la bibliothèque de requêtes de Python dans Selenium WebDriver
Cette méthode n’a rien à voir avec le sélénium mais vous pouvez vérifier le « Qu’est-ce que le sélénium? » article, c’est purement Pythonique moyen d’obtenir une source de page Web. Ici, nous utilisons la bibliothèque de requêtes de Python pour faire une requête get à l’URL et enregistrer la réponse de la requête, c’est-à-dire la source de la page dans un fichier HTML et l’imprimer sur le terminal.
Voici le scénario :
import requests
url="https://pynishant.github.io/"
pythonResponse = requests.get(url)
fileToWrite = open("py_source.html", "w")
fileToWrite.write(pythonResponse.text)
fileToWrite.close()
fileToRead = open("py_source.html", "r")
print(fileToRead.read())
fileToRead.close()Cette méthode peut être utilisée pour stocker rapidement le code source d’une page Web sans charger la page dans le navigateur contrôlé par Selenium. De même, nous pouvons utiliser la bibliothèque Python urllib pour récupérer la source de la page HTML.
Obtenir la source de la page HTML à l’aide de l’URL « view-source »
Ceci est rarement nécessaire, mais vous pouvez ajouter l’URL cible avec view-source et chargez-le dans la fenêtre du navigateur pour charger le code source et l’enregistrer en test manuel :
Par programmation, pour prendre le code source des captures d’écran en Python Selenium (si nécessaire), vous pouvez charger la page en utilisant :
driver.get("view-source:https://pynishant.github.io/")Obtenir la source de la page HTML dans Selenium Python WebDriver à l’aide de XPath
La quatrième méthode pour que Selenium WebDriver obtienne une source de page consiste à utiliser XPath pour l’enregistrer. Ici, au lieu de page_source ou en exécutant JavaScript, nous identifions l’élément source, c’est-à-dire, <html> et l’extraire. Commentez la logique de récupération de la source de la page précédente et remplacez-la par ce qui suit :
# pageSource = driver.page_source
pageSource = driver.find_element_by_xpath("//*").get_attribute("outerHTML")Dans le script ci-dessus, nous utilisons une méthode de pilote, find_element_by_xpath, pour localiser l’élément HTML de la page Web. Nous entrons dans le document en utilisant source nod :"//*" et obtenir son « HTML externe », qui est le document lui-même. La sortie ressemble à celle que nous avons obtenue précédemment en utilisant driver.page_source.
Comment récupérer la source HTML de WebElement dans Selenium
Pour obtenir la source HTML d’un WebElement dans Selenium WebDriver, nous pouvons utiliser le get_attribute méthode du Selenium Python WebDriver. Tout d’abord, nous récupérons le HTML WebElement en utilisant des méthodes de localisation d’élément de pilote telles que (find_element_by_xpath or find_element_by_css_selector). Ensuite, nous appliquons la get_attribute() méthode sur cet élément saisi pour obtenir sa source HTML.
Supposons, à partir de pynishant.github.io, et nous voulons récupérer et imprimer le code source de la div avec l’id « div1 ». Le code pour cela ressemble à ceci :
from selenium import webdriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.get("https://pynishant.github.io/")
elementSource = driver.find_element_by_id("div1").get_attribute("outerHTML")
print(elementSource)
driver.quit()Voici la sortie :
De même, pour amener les enfants ou innerHTML d’un WebElement :
driver.find_element_by_id("some_id_or_selector").get_attribute("innerHTML")Il existe une autre façon de procéder et d’obtenir le même résultat :
elementSource = driver.find_element_by_id("id_selector_as_per_requirement")
driver.execute_script("return arguments[0].innerHTML;", elementSource)Comment récupérer des données JSON à partir d’une source de page HTML dans Python Selenium WebDriver
Les applications modernes sont construites avec plusieurs API en jeu. Et souvent, ces API modifient dynamiquement le contenu des éléments HTML. Les objets JSON sont apparus comme une alternative aux types de réponse XML. Ainsi, il est devenu essentiel pour un testeur pro Selenium Python de gérer les objets JSON, en particulier ceux intégrés dans <script> Balises HTML. Python nous fournit une bibliothèque JSON intégrée pour expérimenter avec des objets JSON.
Pour illustrer avec un exemple, nous chargeons « https://www.cntraveller.in/ » dans le pilote Selenium et recherchons le schéma SEO contenu dans <script type=”application/ld+json”> </script> pour vérifier que l’URL du logo est incluse dans le schéma « JSON ». Au fait, si vous vous sentez confus, ce « schéma de référencement » est utile pour classer les pages Web sur Google. Cela n’a rien à voir avec la logique du code ou les tests. Nous l’utilisons juste pour la démonstration.
Nous utiliserons LambdaTest pour cette démo :
from selenium import webdriver
import json
import re
username = "hustlewiz247"
accessToken = "1BtTGpkzkYeOKJiUdivkWxvmHQppbahpev3DpcSfV460bXq0GC"
gridUrl =...