Comment prendre une capture d'écran avec du sélénium
Différents navigateurs Web utilisent différents moteurs de rendu pour rendre les pages Web. Ainsi, le même code frontal peut ne pas rendre de la même manière dans tous les navigateurs Web. Pour résoudre ce problème, vous devrez peut-être ajouter des codes de frontend spécifiques au navigateur sur votre site Web. Cependant, ce n'est pas la seule partie difficile lors de la conception d'un site Web compatible avec différents navigateurs et appareils. Vérifier manuellement l'apparence du site Web dans chacun de vos navigateurs ciblés peut prendre du temps. Vous devrez ouvrir tous vos navigateurs Web ciblés, visiter la page Web, attendre que la page se charge et comparer les pages rendues les unes aux autres. Pour gagner du temps, vous pouvez utiliser la fonctionnalité de capture d'écran Selenium pour prendre automatiquement des captures d'écran de votre site Web dans chacun de vos navigateurs ciblés et comparer les images vous-même. C'est beaucoup plus rapide que la méthode manuelle. Cet article vous montrera comment prendre des captures d'écran des fenêtres du navigateur à l'aide de sélénium.
Conditions préalables
Pour essayer les commandes et les exemples discutés dans cet article, vous devez avoir:
1) Une distribution Linux (de préférence Ubuntu) installée sur votre ordinateur.
2) Python 3 installé sur votre ordinateur.
3) PIP 3 installé sur votre ordinateur.
4) le package Python virtualv Installé sur votre ordinateur.
5) Les navigateurs Web Mozilla Firefox et Google Chrome sont installés sur votre ordinateur.
6) Connaissance de la façon d'installer le pilote Firefox Gecko et le pilote Web Chrome sur votre système.
Pour répondre aux exigences 4, 5 et 6, vous pouvez lire mon article Introduction au sélénium avec Python 3 à Linuxhint.com.
Vous pouvez trouver de nombreux autres articles sur les sujets requis à Linuxhint.com. Assurez-vous de vérifier ces articles si vous avez besoin d'une assistance supplémentaire.
Configuration d'un répertoire de projet
Pour garder tout organisé, créez le nouveau répertoire de projet sélénium-écran /, comme suit:
$ mkdir -pv sélénium-screenshot / images, pilotes
Accédez à la sélénium-écran / Répertoire du projet, comme suit:
$ CD Selenium-Screenshot /
Créez un environnement virtuel Python dans le répertoire du projet, comme suit:
$ virtualenv .venv
Activez l'environnement virtuel, comme suit:
$ source .Venv / bin / Activer
Installez le sélénium à l'aide de PIP3, comme suit:
$ pip3 installer le séléniumTéléchargez et installez le pilote Web requis dans le Conducteurs/ Annuaire du projet. J'ai expliqué le processus de téléchargement et d'installation de pilotes Web dans l'article Introduction au sélénium avec Python 3. Si vous avez besoin d'aide à ce sujet, recherchez Linuxhint.com Pour cet article.
Bases de la prise de captures d'écran avec du sélénium
Cette section vous donnera un exemple très simple de prendre des captures d'écran de navigateur avec du sélénium.
Tout d'abord, créez un nouveau script python ex01_google-chrome.py et tapez les lignes de codes suivantes dans le script.
à partir de Selenium Import WebDriverde sélénium.webdriver.commun.Clés Import les clés
googleChromeOptions = webDriver.chrome.options.Options ()
googlechromeoptions.sans tête = vrai
googlechromeoptions.add_argument ('- window-size = 1280,720')
googleChrome = webDriver.Chrome (exécutable_path = "./ pilotes / chromedriver ",
Options = GoogleChromeOptions)
pageurl = "https: // www.W3schools.com ";
Google Chrome.get (pageurl)
Google Chrome.Save_screenshot ('images / w3schools_google-chrome.png ')
Google Chrome.fermer()
Une fois que vous avez terminé, enregistrez le ex01_google-chrome.py Script python.
La ligne 4 crée un Options Objet pour le navigateur Web Google Chrome.
La ligne 5 permet le mode sans tête pour Google Chrome.
La ligne 6 définit la taille de la fenêtre à 1280 × 720 pixels.
La ligne 8 crée un objet de navigateur à l'aide du pilote chromé et le stocker dans le Google Chrome variable.
La ligne 10 définit un L'URL de la page variable. Le L'URL de la page Variable contient l'URL de la page Web que Selenium sera de capture d'écran.
Ligne 11 charge le L'URL de la page dans le navigateur.
La ligne 12 utilise le Save_screenshot () Méthode pour enregistrer une capture d'écran de la fenêtre du navigateur sur le fichier w3schools_google-chrome.PNG dans le images/ Annuaire du projet.
Enfin, la ligne 14 ferme le navigateur.
Ensuite, exécutez le ex01_google-chrome.py Script Python, comme suit:
$ python3 ex01_google-chrome.pyLors de l'exécution réussie du script, la capture d'écran sera enregistrée dans le fichier image w3schools_google-chrome.PNG dans le images/ Répertoire du projet, comme vous pouvez le voir dans la capture d'écran ci-dessous.
Pour prendre une capture d'écran du même site Web mais dans le navigateur Web Firefox, créez le nouveau script Python ex01_firefox.py et tapez les lignes de codes suivantes dans le script.
à partir de Selenium Import WebDriverde sélénium.webdriver.commun.Clés Import les clés
FireFoxOptions = WebDriver.incendier.options.Options ()
Firefoxoptions.sans tête = vrai
Firefoxoptions.add_argument ('- width = 1280')
Firefoxoptions.add_argument ('- hauteur = 720')
firefox = webdriver.Firefox (exécutable_path = "./ pilotes / geckodriver ", options = firefoxoptions)
pageurl = "https: // www.W3schools.com ";
incendier.get (pageurl)
incendier.Save_screenshot ('images / w3schools_firefox.png ')
incendier.fermer()
Une fois que vous avez terminé, enregistrez le ex01_firefox.py Script python.
La ligne 4 crée un Options Objet pour le navigateur Web Firefox.
La ligne 5 permet un mode sans tête pour Firefox.
La ligne 6 définit la largeur de la fenêtre du navigateur à 1280 pixels et la ligne 7 définit la hauteur de la fenêtre du navigateur à 720 pixels.
La ligne 9 crée un objet de navigateur à l'aide du pilote Firefox Gecko et le stocke dans le incendier variable.
La ligne 11 définit un L'URL de la page variable. Le L'URL de la page Variable contient l'URL de la page Web que Selenium sera de capture d'écran.
Ligne 13 charge le L'URL de la page sur le navigateur.
La ligne 14 utilise le Save_screenshot () Méthode pour enregistrer une capture d'écran de la fenêtre du navigateur sur le fichier w3schools_firefox.PNG dans le images/ Annuaire du projet.
Enfin, la ligne 15 ferme le navigateur.
Ensuite, exécutez le ex01_firefox.py Script Python, comme suit:
$ python3 ex01_firefox.pyLors de l'exécution réussie du script, la capture d'écran doit être enregistrée dans le fichier image w3schools_firefox.PNG dans le images/ Répertoire du projet, comme vous pouvez le voir dans la capture d'écran ci-dessous.
Prendre des captures d'écran de différentes résolutions d'écran
Cette section vous montrera comment prendre des captures d'écran de la même page Web dans différentes résolutions d'écran. Dans cette section, j'utiliserai le navigateur Web Google Chrome, mais vous pouvez utiliser Firefox ou tout autre navigateur pour cette section.
Tout d'abord, créez le nouveau script Python ex02.py et tapez les lignes de code suivantes dans le script.
à partir de Selenium Import WebDriverde sélénium.webdriver.commun.Clés Import les clés
pageurl = "https: // www.W3schools.com / ";
Résolutions = ['320,1080', '500,1080', '720,1080', '1366 1080', '1920,1080']
Pour la résolution des résolutions:
Imprimer ("prendre une capture d'écran pour la résolution% s ..."% (résolution.remplacer (',', 'x')))
chromeoptions = webdriver.ChromeOptions ()
chromeoptions.sans tête = vrai
chromeoptions.add_argument ('- window-size =' + résolution)
chrome = webdriver.Chrome (exécutable_path = "./ pilotes / chromedriver ", options = chromeoptions)
chrome.get (pageurl)
outputImage = 'Images / HomePage_Chrome_' + Résolution.remplacer (',', '_') + '.png '
chrome.Save_screenshot (outputImage)
chrome.fermer()
imprimer ('enregistré sur% s.'% (outputImage))
Une fois que vous avez terminé, enregistrez le ex02.py Script python.
La ligne 4 définit un L'URL de la page variable qui contient l'URL de la page Web que je voudrais prendre des captures d'écran dans différentes résolutions d'écran.
La ligne 5 définit un résolutions Liste qui détient une liste des résolutions que je voudrais prendre des captures d'écran de.
Ligne 7 itère à travers chacun des résolutions dans le résolutions liste.
À l'intérieur de la boucle, la ligne 8 imprime un message significatif sur la console.
Les lignes 10-15 créent un objet de navigateur avec le résolution de la boucle actuelle itération et le stocke dans le chrome variable.
Ligne 17 charge le L'URL de la page dans le navigateur.
La ligne 19 génère un chemin d'image, où la capture d'écran sera enregistrée et stocke l'image dans le outputImage variable.
La ligne 20 prend une capture d'écran de la fenêtre du navigateur et la stocke dans le chemin outputImage.
La ligne 21 ferme le navigateur.
La ligne 22 imprime un message significatif sur la console et termine la boucle.
Ensuite, la boucle recommence avec la résolution d'écran suivante (je.e., L'élément de liste suivante).
Ensuite, exécutez le ex02.py Script Python, comme suit:
$ Python3 Ex02.pyLe script Python ex02.py devrait prendre des captures d'écran de l'URL donnée dans chacune des résolutions d'écran choisies.
Capture d'écran de W3schools.com en largeur de 320 pixels.
Capture d'écran de W3schools.com en 500 pixels de largeur.
Capture d'écran de W3schools.com en 720 pixels de largeur.
Capture d'écran de W3schools.com en 1366 pixels de largeur.
Capture d'écran de W3schools.com en 1920 pixels de largeur.
Si vous comparez les captures d'écran, vous devriez voir que l'interface utilisateur change avec la largeur de la fenêtre du navigateur. En utilisant la fonctionnalité de capture d'écran Selenium, vous pouvez voir à quoi ressemble votre site Web sur différentes résolutions d'écran rapidement et facilement.
Conclusion
Cet article vous a montré certaines des bases de la prise de captures d'écran utilisant le sélénium et les pilotes Web Chrome et Firefox. L'article vous a également montré comment prendre des captures d'écran dans différentes résolutions d'écran. Cela devrait vous aider à démarrer avec la fonction de capture d'écran Selenium.