Phenquestions
A különböző webböngészők különböző megjelenítő motorokat használnak a weboldalak megjelenítéséhez. Tehát ugyanaz a kezelői kód nem biztos, hogy minden webböngészőben azonos módon jelenik meg. A probléma megoldásához előfordulhat, hogy hozzá kell adnia néhány böngészőspecifikus kezelői kódot a webhelyéhez. A különböző böngészőkkel és eszközökkel kompatibilis weboldal tervezésénél azonban nem ez az egyetlen nehézség. Időigényes lehet a webhely manuális ellenőrzése az egyes megcélzott böngészőkben. Meg kell nyitnia az összes megcélzott webböngészőt, fel kell látogatnia a weblapra, meg kell várnia az oldal betöltését, és össze kell hasonlítania a renderelt oldalakat egymással. Időmegtakarítás érdekében a Selenium screenshot funkcióval automatikusan elkészítheti a képernyőképeket a webhelyről az egyes megcélzott böngészőkben, és saját maga is összehasonlíthatja a képeket. Ez sokkal gyorsabb, mint a manuális módszer. Ez a cikk megmutatja, hogyan készíthet képernyőképeket a böngészőablakokról a Selenium használatával.
Előfeltételek
A cikkben tárgyalt parancsok és példák kipróbálásához rendelkeznie kell a következőkkel:
1) Linux disztribúció (lehetőleg Ubuntu) telepítve a számítógépére.
2) A Python 3 telepítve van a számítógépére.
3) A PIP 3 telepítve van a számítógépére.
4) A Python csomag virtualenv telepítve van a számítógépre.
5) A számítógépre telepített Mozilla Firefox és Google Chrome böngészők.
6) Tudás a Firefox Gecko illesztőprogram és a Chrome webillesztő telepítéséről a rendszerre.
A 4., 5. és 6. követelmény teljesítése érdekében elolvashatja a cikkemet Bevezetés a szelénbe a Python 3 alkalmazással a Linuxhintnél.com.
A szükséges témákról sok más cikket talál a LinuxHint oldalon.com. Feltétlenül nézze meg ezeket a cikkeket, ha további segítségre van szüksége.
Projektkönyvtár beállítása
Ha mindent rendben szeretne tartani, hozza létre az új projektkönyvtárat szelén-képernyőkép /, alábbiak szerint:
$ mkdir -pv selenium-screenshot / képek, illesztőprogramok
Navigáljon a szelén-képernyőkép / projektkönyvtár, az alábbiak szerint:
$ cd selenium - képernyőkép /
Hozzon létre egy Python virtuális környezetet a projektkönyvtárban az alábbiak szerint:
$ virtualenv .venv
Aktiválja a virtuális környezetet az alábbiak szerint:
$ forrás .venv / bin / aktiválás
Telepítse a szelént a PIP3 segítségével, az alábbiak szerint:
$ pip3 telepítse a szelént
Töltse le és telepítse a szükséges webes illesztőprogramot a járművezetők / a projekt könyvtárát. A cikkben ismertettem a webes illesztőprogramok letöltésének és telepítésének folyamatát Bevezetés a szelénbe a Python 3 alkalmazással. Ha segítségre van szüksége ebben a témában, keressen LinuxHint.com ehhez a cikkhez.
Képernyőkép készítésének alapjai a szelénnel
Ez a szakasz nagyon egyszerű példát mutat be a böngésző képernyőképeinek elkészítéséhez a Seleniummal.
Először hozzon létre egy új Python szkriptet ex01_google-chrome.py és írja be a következő kódsorokat a szkriptbe.
a szelénimport-meghajtórólszelénből.web meghajtó.gyakori.kulcsok importálása kulcsok
googleChromeOptions = webdriver.króm.opciók.Opciók()
googleChromeOptions.fejetlen = Igaz
googleChromeOptions.add_argument ('- ablakméret = 1280,720')
googleChrome = webdriver.Chrome (végrehajtható_útvonal = "./ drivers / chromedriver ",
options = googleChromeOptions)
pageUrl = "https: // www.w3iskolák.com ";
googleChrome.get (pageUrl)
googleChrome.save_screenshot ('images / w3schools_google-chrome.png ')
googleChrome.Bezárás()
Ha elkészült, mentse a ex01_google-chrome.py Python szkript.
A 4. sor létrehoz egy Opciók objektum a Google Chrome böngészőhöz.
Az 5. vonal fej nélküli módot tesz lehetővé a Google Chrome számára.
A 6. sor az ablak méretét 1280 × 720 pixelre állítja.
A 8. Sor létrehoz egy böngészőobjektumot a Chrome illesztőprogram segítségével, és tárolja a googleChrome változó.
A 10. sor meghatározza a pageUrl változó. A pageUrl változó tartalmazza annak a weboldalnak az URL-jét, amelyet a Selenium képernyőképezni fog.
A 11. sor betölti a pageUrl a böngészőben.
A 12. sor a save_screenshot () módszer a böngészőablak képernyőképének fájlba mentésére w3schools_google-chrome.png ban,-ben képek / a projekt könyvtárát.
Végül a 14. sor bezárja a böngészőt.
Ezután futtassa a ex01_google-chrome.py Python szkript, az alábbiak szerint:
$ python3 ex01_google-chrome.py
A szkript sikeres végrehajtása után a képernyőképet a képfájlba menti w3schools_google-chrome.png ban,-ben képek / a projekt könyvtárát, amint az az alábbi képernyőképen látható.
Ha ugyanarról a webhelyről szeretne képernyőképet készíteni, de a Firefox böngészőben hozza létre az új Python parancsfájlt ex01_firefox.py és írja be a következő kódsorokat a szkriptbe.
a szelénimport-meghajtórólszelénből.web meghajtó.gyakori.kulcsok importálása kulcsok
firefoxOptions = web meghajtó.firefox.opciók.Opciók()
firefoxOptions.fejetlen = Igaz
firefoxOptions.add_argument ('- szélesség = 1280')
firefoxOptions.add_argument ('- magasság = 720')
firefox = webdriver.Firefox (végrehajtható_útvonal = "./ drivers / geckodriver ", options = firefoxOptions)
pageUrl = "https: // www.w3iskolák.com ";
firefox.get (pageUrl)
firefox.save_screenshot ('images / w3schools_firefox.png ')
firefox.Bezárás()
Ha elkészült, mentse a ex01_firefox.py Python szkript.
A 4. sor létrehoz egy Opciók objektum a Firefox böngészőhöz.
Az 5. vonal fej nélküli módot engedélyez a Firefox számára.
A 6. sor a böngészőablak szélességét 1280 pixelre, a 7. sor pedig a böngészőablak magasságát 720 pixelre állítja.
A 9. Sor létrehoz egy böngészőobjektumot a Firefox Gecko illesztőprogram segítségével, és eltárolja a firefox változó.
A 11. sor meghatározza a pageUrl változó. A pageUrl változó tartalmazza annak a weboldalnak az URL-jét, amelyet a Selenium képernyőképezni fog.
A 13. sor betölti a pageUrl a böngészőben.
A 14. sor a save_screenshot () módszer a böngészőablak képernyőképének fájlba mentésére w3schools_firefox.png ban,-ben képek / a projekt könyvtárát.
Végül a 15. sor bezárja a böngészőt.
Ezután futtassa a ex01_firefox.py Python szkript, az alábbiak szerint:
$ python3 ex01_firefox.py
A szkript sikeres végrehajtása után a képernyőképet el kell menteni a képfájlba w3schools_firefox.png ban,-ben képek / a projekt könyvtárát, amint az az alábbi képernyőképen látható.
Különböző képernyőfelbontások képernyőképeinek készítése
Ez a szakasz bemutatja, hogyan készíthet képernyőképeket ugyanazon weboldalról, különböző képernyőfelbontásokkal. Ebben a részben a Google Chrome böngészőt fogom használni, de ehhez a szakaszhoz használhatja a Firefox vagy bármely más böngészőt.
Először hozza létre az új Python szkriptet ex02.py és írja be a következő kódsorokat a szkriptbe.
a szelénimport-meghajtórólszelénből.web meghajtó.gyakori.kulcsok importálása kulcsok
pageUrl = "https: // www.w3iskolák.com / ";
felbontások = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
állásfoglalásokra állásfoglalások:
print ("Képernyőkép készítése a felbontáshoz% s…"% (felbontás.cserélje ki (',', 'x')))
chromeOptions = web meghajtó.ChromeOptions ()
chromeOptions.fejetlen = Igaz
chromeOptions.add_argument ('- ablakméret =' + felbontás)
chrome = webdriver.Chrome (végrehajtható_útvonal = "./ driver / chromedriver ", options = chromeOptions)
króm.get (pageUrl)
outputImage = 'images / homepage_chrome_' + felbontás.cserélje ki (',', '_') + '.png '
króm.save_screenshot (outputImage)
króm.Bezárás()
print ('Mentve a% s fájlba.% (outputImage))
Ha elkészült, mentse a ex02.py Python szkript.
A 4. sor meghatározza a pageUrl változó, amely a weboldal URL-jét tárolja. Szeretnék képernyőképeket készíteni különböző képernyőfelbontásokkal.
Az 5. sor meghatározza a állásfoglalások lista, amely tartalmazza azoknak a felbontásoknak a listáját, amelyekről képernyőképeket szeretnék készíteni.
A 7. sor az egyes sorokon keresztül ismétlődik felbontáss a állásfoglalások lista.
A hurok belsejében a 8. sor értelmes üzenetet nyomtat a konzolra.
A 10-15. Sor létrehoz egy böngészőobjektumot a felbontás az aktuális hurok iterációból, és az króm változó.
A 17. sor betölti a pageUrl a böngészőben.
A 19. sor létrehoz egy képutat, ahová a képernyőkép mentésre kerül, és a képet a outputImage változó.
A 20. sor egy képernyőképet készít a böngészőablakról, és az útvonalon tárolja outputImage.
A 21. sor bezárja a böngészőt.
A 22. sor értelmes üzenetet nyomtat a konzolra, és befejezi a ciklust.
Ezután a hurok újra kezdődik a következő képernyőfelbontással (i.e., a következő listaelem).
Ezután futtassa a ex02.py Python szkript, az alábbiak szerint:
$ python3 ex02.py
A Python szkript ex02.py képernyőképeket kell készítenie az adott URL-ről a kiválasztott képernyőfelbontások mindegyikében.
Pillanatkép a w3iskolák.com 320 pixel szélességben.
Pillanatkép a w3iskolák.com 500 pixel szélességben.
Pillanatkép a w3iskolák.com 720 pixel szélességben.
Pillanatkép a w3iskolák.com 1366 pixel szélességben.
Pillanatkép a w3iskolák.com 1920 pixel szélességben.
Ha összehasonlítja a képernyőképeket, látnia kell, hogy a felhasználói felület változik a böngésző ablakának szélességével. A Selenium képernyőkép funkció használatával gyorsan és egyszerűen megnézheti, hogyan néz ki webhelye a különböző képernyőfelbontásokkal.
Következtetés
Ez a cikk bemutatta a képernyőképek készítésének néhány alapját a Selenium, valamint a Chrome és a Firefox internetes illesztőprogramok használatával. A cikk azt is bemutatta, hogyan készíthet képernyőképeket különböző képernyőfelbontásokkal. Ez segíthet a Selenium képernyőkép funkció használatának megkezdésében.
