Phenquestions
Verschillende webbrowsers gebruiken verschillende rendering-engines om webpagina's weer te geven. Het is dus mogelijk dat dezelfde frontend-code niet in alle webbrowsers op dezelfde manier wordt weergegeven. Om dit probleem op te lossen, moet u mogelijk enkele browserspecifieke frontend-codes aan uw website toevoegen. Dat is echter niet het enige moeilijke onderdeel bij het ontwerpen van een website die compatibel is met verschillende browsers en apparaten. Het kan tijdrovend zijn om handmatig te controleren hoe de website eruitziet in elk van uw gerichte browsers. U zou al uw gerichte webbrowsers moeten openen, de webpagina moeten bezoeken, wachten tot de pagina is geladen en de weergegeven pagina's met elkaar moeten vergelijken. Om tijd te besparen, kunt u de Selenium-screenshotfunctie gebruiken om automatisch screenshots van uw website te maken in elk van uw gerichte browsers en de afbeeldingen zelf te vergelijken. Dat is veel sneller dan de handmatige methode. Dit artikel laat je zien hoe je schermafbeeldingen maakt van browservensters met Selenium.
Vereisten
Om de opdrachten en voorbeelden die in dit artikel worden besproken uit te proberen, moet u beschikken over:
1) Een Linux-distributie (bij voorkeur Ubuntu) geïnstalleerd op uw computer.
2) Python 3 geïnstalleerd op uw computer.
3) PIP 3 geïnstalleerd op uw computer.
4) Het Python-pakket virtueel geïnstalleerd op uw computer.
5) Mozilla Firefox- en Google Chrome-webbrowsers geïnstalleerd op uw computer.
6) Kennis van het installeren van de Firefox Gecko Driver en Chrome Web Driver op uw systeem.
Om aan de vereisten 4, 5 en 6 te voldoen, kun je mijn artikel lezen Inleiding tot Selenium met Python 3 bij Linuxhint.com.
Je kunt veel andere artikelen over de vereiste onderwerpen vinden op LinuxHint.com. Zorg ervoor dat je deze artikelen bekijkt als je extra hulp nodig hebt.
Een projectdirectory instellen
Maak de nieuwe projectdirectory aan om alles georganiseerd te houden selenium-screenshot/, als volgt:
$ mkdir -pv selenium-screenshot/images,drivers
Navigeer naar de selenium-screenshot/ projectmap, als volgt:
$ cd selenium-screenshot/
Maak als volgt een virtuele Python-omgeving in de projectdirectory:
$ virtuele omgeving .venv
Activeer de virtuele omgeving als volgt:
$ bron .venv/bin/activeren
Installeer Selenium met PIP3 als volgt:
$ pip3 installeer selenium
Download en installeer de vereiste webdriver in de chauffeurs/ map van het project. Ik heb het proces van het downloaden en installeren van webstuurprogramma's uitgelegd in het artikel Inleiding tot Selenium met Python 3. Als je hulp nodig hebt over dit onderwerp, zoek dan LinuxHint.com voor dit artikel.
Basisprincipes van het maken van screenshots met Selenium
Deze sectie geeft je een heel eenvoudig voorbeeld van het maken van browserscreenshots met Selenium.
Maak eerst een nieuw Python-script ex01_google-chrome.py en typ de volgende regels codes in het script:.
van selenium import webdrivervan selenium.webstuurprogramma.gemeenschappelijk.sleutels importeren Sleutels
googleChromeOptions = webstuurprogramma.chroom.opties.Opties()
googleChromeOpties.zonder hoofd = waar
googleChromeOpties.add_argument('--window-size=1280.720')
googleChrome = webstuurprogramma.Chrome(executable_path="./drivers/chromedriver",
options=googleChromeOptions)
pageUrl = "https://www.w3schools.com";
googleChrome.get(pagina-URL)
googleChrome.save_screenshot('images/w3schools_google-chrome.png')
googleChrome.dichtbij()
Als u klaar bent, slaat u de ex01_google-chrome.py Python-script.
Regel 4 creëert een Opties object voor de Google Chrome-webbrowser.
Lijn 5 activeert de headless-modus voor Google Chrome.
Regel 6 stelt de venstergrootte in op 1280×720 pixels.
Regel 8 maakt een browserobject met behulp van het Chrome-stuurprogramma en slaat het op in de googleChrome variabele.
Regel 10 definieert a pagina URL variabele. De pagina URL variabele bevat de URL van de webpagina waarvan Selenium een screenshot zal maken.
Lijn 11 laadt de pagina URL in de browser.
Lijn 12 gebruikt de save_screenshot() methode om een screenshot van het browservenster in het bestand op te slaan w3schools_google-chrome.png in de afbeeldingen/ map van het project.
Ten slotte sluit regel 14 de browser.
Voer vervolgens de . uit ex01_google-chrome.py Python-script, als volgt:
$ python3 ex01_google-chrome.py
Na succesvolle uitvoering van het script, wordt de schermafbeelding opgeslagen in het afbeeldingsbestand w3schools_google-chrome.png in de afbeeldingen/ directory van het project, zoals je kunt zien in de onderstaande schermafbeelding.
Om een screenshot te maken van dezelfde website maar in de Firefox-webbrowser, maakt u het nieuwe Python-script ex01_firefox.py en typ de volgende regels codes in het script:.
van selenium import webdrivervan selenium.webstuurprogramma.gemeenschappelijk.sleutels importeren Sleutels
firefoxOptions = webstuurprogramma.firefox.opties.Opties()
firefoxOpties.zonder hoofd = waar
firefoxOpties.add_argument('--width=1280')
firefoxOpties.add_argument('--height=720')
firefox = webstuurprogramma.Firefox(executable_path="./drivers/geckodriver", options=firefoxOptions)
pageUrl = "https://www.w3schools.com";
firefox.get(pagina-URL)
firefox.save_screenshot('images/w3schools_firefox.png')
firefox.dichtbij()
Als u klaar bent, slaat u de ex01_firefox.py Python-script.
Regel 4 creëert een Opties object voor de Firefox-webbrowser.
Lijn 5 activeert de headless-modus voor Firefox.
Regel 6 stelt de breedte van het browservenster in op 1280 pixels en regel 7 stelt de hoogte van het browservenster in op 720 pixels.
Regel 9 maakt een browserobject met behulp van het Firefox Gecko-stuurprogramma en slaat het op in de firefox variabele.
Regel 11 definieert a pagina URL variabele. De pagina URL variabele bevat de URL van de webpagina waarvan Selenium een screenshot zal maken.
Lijn 13 laadt de pagina URL op de browser.
Lijn 14 gebruikt de save_screenshot() methode om een screenshot van het browservenster in het bestand op te slaan w3schools_firefox.png in de afbeeldingen/ map van het project.
Ten slotte sluit regel 15 de browser.
Voer vervolgens de . uit ex01_firefox.py Python-script, als volgt:
$ python3 ex01_firefox.py
Na succesvolle uitvoering van het script, moet de schermafbeelding worden opgeslagen in het afbeeldingsbestand w3schools_firefox.png in de afbeeldingen/ directory van het project, zoals je kunt zien in de onderstaande schermafbeelding.
Screenshots maken van verschillende schermresoluties
In dit gedeelte wordt uitgelegd hoe u schermafbeeldingen kunt maken van dezelfde webpagina in verschillende schermresoluties. In dit gedeelte zal ik de Google Chrome-webbrowser gebruiken, maar u kunt Firefox of een andere browser voor dit gedeelte gebruiken.
Maak eerst het nieuwe Python-script ex02.py en typ de volgende regels code in het script:.
van selenium import webdrivervan selenium.webstuurprogramma.gemeenschappelijk.sleutels importeren Sleutels
pageUrl = "https://www.w3schools.com/";
resoluties = [ '320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080' ]
voor resolutie in resoluties:
print("Schermafbeelding maken voor resolutie %s... " % (resolutie.vervang(',', 'x')))
chromeOptions = webstuurprogramma.Chrome-opties()
chromeOpties.zonder hoofd = waar
chromeOpties.add_argument('--window-size=' + resolutie)
chrome = webstuurprogramma.Chrome(executable_path="./drivers/chromedriver", options=chromeOptions)
chroom.get(pagina-URL)
outputImage = 'images/homepage_chrome_' + resolutie.vervang(',','_') + '.png'
chroom.save_screenshot(outputImage)
chroom.dichtbij()
print('Opgeslagen in %s.' % (uitvoerafbeelding))
Als u klaar bent, slaat u de ex02.py Python-script.
Regel 4 definieert a pagina URL variabele die de webpagina-URL bevat waarvan ik screenshots wil maken in verschillende schermresoluties.
Regel 5 definieert a resoluties lijst met een lijst van de resoluties waarvan ik screenshots wil maken.
Regel 7 itereert door elk van de resolutieis in de resoluties lijst.
In de lus drukt Lijn 8 een betekenisvol bericht af op de console.
Regels 10-15 maken een browserobject met de resolutie van de huidige lus-iteratie en slaat deze op in de chroom variabele.
Lijn 17 laadt de pagina URL in de browser.
Regel 19 genereert een afbeeldingspad, waar de schermafbeelding wordt opgeslagen, en slaat de afbeelding op in de outputImage variabele.
Regel 20 maakt een screenshot van het browservenster en slaat het op in het pad outputImage.
Regel 21 sluit de browser.
Regel 22 drukt een betekenisvol bericht af op de console en beëindigt de lus.
Daarna begint de lus opnieuw met de volgende schermresolutie (i.e., het volgende lijstitem).
Voer vervolgens de . uit ex02.py Python-script, als volgt:
$ python3 ex02.py
Het Python-script ex02.py moet screenshots maken van de opgegeven URL in elk van de gekozen schermresoluties.
Screenshot van w3schools.com in 320 pixels breed.
Screenshot van w3schools.com met een breedte van 500 pixels.
Screenshot van w3schools.com met een breedte van 720 pixels.
Screenshot van w3schools.com in 1366 pixels breed.
Screenshot van w3schools.com in 1920 pixels breed.
Als je de schermafbeeldingen vergelijkt, zou je moeten zien dat de gebruikersinterface verandert met de breedte van het browservenster. Met de Selenium-screenshotfunctie kunt u snel en gemakkelijk zien hoe uw website eruitziet op verschillende schermresoluties.
Conclusie
Dit artikel liet je enkele basisprincipes zien van het maken van schermafbeeldingen met Selenium en de Chrome- en Firefox-webstuurprogramma's. Het artikel liet je ook zien hoe je screenshots maakt in verschillende schermresoluties. Dit zou je moeten helpen om aan de slag te gaan met de Selenium-screenshotfunctie.
