Phenquestions
Skirtingos žiniatinklio naršyklės naudoja skirtingus atvaizdavimo variklius tinklalapių pateikimui. Taigi tas pats sąsajos kodas visose žiniatinklio naršyklėse gali būti nepateikiamas vienodai. Norėdami išspręsti šią problemą, gali tekti pridėti keletą konkrečių naršyklių „frontend“ kodų savo svetainėje. Tačiau tai nėra vienintelė sudėtinga dalis kuriant svetainę, suderinamą su skirtingomis naršyklėmis ir įrenginiais. Rankinis tikrinimas, kaip svetainė atrodo kiekvienoje jūsų naršyklėje, gali užtrukti. Turėtumėte atidaryti visas tikslines žiniatinklio naršykles, apsilankyti tinklalapyje, palaukti, kol puslapis bus įkeltas, ir palyginti pateiktus puslapius. Norėdami sutaupyti laiko, galite naudoti „Selenium“ ekrano kopijos funkciją, kad automatiškai padarytumėte savo svetainės ekrano kopijas kiekvienoje tikslinėje naršyklėje ir patys palygintumėte vaizdus. Tai daug greičiau nei rankinis metodas. Šiame straipsnyje bus parodyta, kaip fotografuoti naršyklės langus naudojant „Selenium“.
Būtinos sąlygos
Norėdami išbandyti šiame straipsnyje aptartas komandas ir pavyzdžius, turite turėti:
1) „Linux“ paskirstymas (pageidautina „Ubuntu“), įdiegtas jūsų kompiuteryje.
2) „Python 3“ įdiegtas jūsų kompiuteryje.
3) PIP 3 įdiegtas jūsų kompiuteryje.
4) „Python“ paketas virtualenv įdiegta jūsų kompiuteryje.
5) „Mozilla Firefox“ ir „Google Chrome“ žiniatinklio naršyklės, įdiegtos jūsų kompiuteryje.
6) Žinios, kaip įdiegti „Firefox Gecko“ tvarkyklę ir „Chrome“ žiniatinklio tvarkyklę savo sistemoje.
Norėdami įvykdyti 4, 5 ir 6 reikalavimus, galite perskaityti mano straipsnį Įvadas į seleną su „Python 3“ „Linuxhint“.com.
„LinuxHint“ galite rasti daug kitų straipsnių reikalingomis temomis.com. Jei jums reikia papildomos pagalbos, būtinai peržiūrėkite šiuos straipsnius.
Projektų katalogo nustatymas
Kad viskas būtų tvarkinga, sukurkite naują projekto katalogą selenas - ekrano kopija /, taip:
$ mkdir -pv selenium-screenshot / vaizdai, tvarkyklės
Eikite į selenas - ekrano kopija / projekto kataloge:
$ cd selenium - ekrano kopija /
Sukurkite „Python“ virtualią aplinką projekto kataloge taip:
$ virtualenv .venv
Suaktyvinkite virtualią aplinką taip:
$ šaltinis .venv / bin / aktyvuoti
Įdiekite „Selenium“ naudodami PIP3 taip:
$ pip3 įdiekite seleną
Atsisiųskite ir įdiekite reikiamą žiniatinklio tvarkyklę vairuotojai / projekto katalogas. Straipsnyje paaiškinau žiniatinklio tvarkyklių atsisiuntimo ir diegimo procesą Įvadas į seleną su „Python 3“. Jei jums reikia pagalbos šia tema, ieškokite „LinuxHint“.com šiam straipsniui.
Ekrano fotografavimo su selenu pagrindai
Šiame skyriuje bus pateiktas labai paprastas naršyklės ekrano kopijų darymo su „Selenium“ pavyzdys.
Pirmiausia sukurkite naują „Python“ scenarijų ex01_google-chrome.py ir scenarijuje įveskite šias kodų eilutes.
iš seleno importo žiniatinklio tvarkyklėsiš seleno.žiniatinklio tvarkyklė.paplitęs.raktai importuoja raktus
googleChromeOptions = žiniatinklio tvarkyklė.chromuotas.galimybės.Galimybės()
„googleChromeOptions“.be galvos = Tiesa
„googleChromeOptions“.add_argument ('- lango dydis = 1280 720')
googleChrome = žiniatinklio tvarkyklė.„Chrome“ (vykdomojo_ kelias = "./ drivers / chromedriver ",
options = googleChromeOptions)
pageUrl = "https: // www.w3mokyklos.com ";
„googleChrome“.gauti („pageUrl“)
„googleChrome“.save_screenshot ('images / w3schools_google-chrome.png ')
„googleChrome“.Uždaryti()
Kai baigsite, išsaugokite ex01_google-chrome.py „Python“ scenarijus.
4 eilutė sukuria Galimybės „Google Chrome“ žiniatinklio naršyklės objektas.
5 eilutė įgalina „Google Chrome“ režimą be galvos.
6 eilutė nustato lango dydį 1280 × 720 taškų.
8 eilutė sukuria naršyklės objektą naudodama „Chrome“ tvarkyklę ir saugo jį „googleChrome“ kintamasis.
10 eilutė apibrėžia a puslapisUrl kintamasis. The puslapisUrl kintamasis turi tinklalapio, kurį „Selenium“ ekrano kopija, URL.
11 eilutė įkelia puslapisUrl naršyklėje.
12 eilutėje naudojamas save_screenshot () būdas išsaugoti naršyklės lango ekrano kopiją faile w3schools_google-chrome.png viduje konors vaizdai/ projekto katalogas.
Galiausiai 14 eilutė uždaro naršyklę.
Tada paleiskite ex01_google-chrome.py „Python“ scenarijus:
$ python3 ex01_google-chrome.py
Sėkmingai vykdant scenarijų, ekrano kopija bus išsaugota vaizdo faile w3schools_google-chrome.png viduje konors vaizdai/ projekto katalogą, kaip matote toliau pateiktoje ekrano kopijoje.
Norėdami padaryti tos pačios svetainės ekrano kopiją, bet naršyklėje „Firefox“, sukurkite naują „Python“ scenarijų ex01_firefox.py ir scenarijuje įveskite šias kodų eilutes.
iš seleno importo žiniatinklio tvarkyklėsiš seleno.žiniatinklio tvarkyklė.paplitęs.raktai importuoja raktus
firefoxOptions = žiniatinklio tvarkyklė.„Firefox“.galimybės.Galimybės()
„Firefox“ parinktys.be galvos = Tiesa
„Firefox“ parinktys.add_argument ('- plotis = 1280')
„Firefox“ parinktys.add_argument ('- aukštis = 720')
„Firefox“ = žiniatinklio tvarkyklė.„Firefox“ (vykdomojo_path = "./ drivers / geckodriver ", options = firefoxOptions)
pageUrl = "https: // www.w3mokyklos.com ";
„Firefox“.gauti (pageUrl)
„Firefox“.save_screenshot ('images / w3schools_firefox.png ')
„Firefox“.Uždaryti()
Kai baigsite, išsaugokite ex01_firefox.py „Python“ scenarijus.
4 eilutė sukuria Galimybės „Firefox“ žiniatinklio naršyklės objektas.
5 eilutė įgalina „Firefox“ režimą be galvos.
6 eilutė nustato naršyklės lango plotį iki 1280 taškų, o 7 eilutė - naršyklės lango aukštį iki 720 taškų.
9 eilutė sukuria naršyklės objektą naudodama „Firefox Gecko“ tvarkyklę ir saugo jį „Firefox“ kintamasis.
11 eilutė apibrėžia a puslapisUrl kintamasis. The puslapisUrl kintamasis turi tinklalapio, kurį „Selenium“ ekrano kopija, URL.
13 eilutė įkelia puslapisUrl naršyklėje.
14 eilutėje naudojamas save_screenshot () būdas išsaugoti naršyklės lango ekrano kopiją faile w3schools_firefox.png viduje konors vaizdai/ projekto katalogas.
Galiausiai 15 eilutė uždaro naršyklę.
Tada paleiskite ex01_firefox.py „Python“ scenarijus:
$ python3 ex01_firefox.py
Sėkmingai vykdant scenarijų, ekrano kopija turėtų būti išsaugota vaizdo faile w3schools_firefox.png viduje konors vaizdai/ projekto katalogą, kaip matote toliau pateiktoje ekrano kopijoje.
Skirtingos ekrano raiškos ekrano nuotraukos
Šiame skyriuje bus parodyta, kaip to paties tinklalapio ekrano kopijas atlikti skirtingomis ekrano raiškomis. Šiame skyriuje naudosiu „Google Chrome“ žiniatinklio naršyklę, tačiau šiam skyriui galite naudoti „Firefox“ ar bet kurią kitą naršyklę.
Pirmiausia sukurkite naują „Python“ scenarijų ex02.py ir scenarijuje įveskite šias kodo eilutes.
iš seleno importo žiniatinklio tvarkyklėsiš seleno.žiniatinklio tvarkyklė.paplitęs.raktai importuoja raktus
pageUrl = "https: // www.w3mokyklos.com / ";
rezoliucijos = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
rezoliucijoms rezoliucijose:
spausdinti ("Imama ekrano kopija skiriant raišką% s…"% (raiška.pakeisti (',', 'x')))
chromeOptions = žiniatinklio tvarkyklė.„Chrome“ parinktys ()
„Chrome“ parinktys.be galvos = Tiesa
„Chrome“ parinktys.add_argument ('- lango dydis =' + skiriamoji geba)
chromas = žiniatinklio tvarkyklė.„Chrome“ (vykdomojo_ kelias = "./ drivers / chromedriver ", options = chromeOptions)
chromuotas.gauti („pageUrl“)
outputImage = 'images / homepage_chrome_' + skiriamoji geba.pakeisti (',', '_') + '.png '
chromuotas.save_screenshot (outputImage)
chromuotas.Uždaryti()
spausdinti ('Išsaugota% s.% (outputImage))
Kai baigsite, išsaugokite ex02.py „Python“ scenarijus.
4 eilutė apibrėžia a puslapisUrl kintamasis, turintis tinklalapio URL, norėčiau padaryti ekrano kopijas skirtingomis ekrano raiškomis.
5 eilutė apibrėžia a rezoliucijas sąrašas, kuriame yra rezoliucijų, kurių norėčiau padaryti ekrano kopijas, sąrašas.
7 eilutė kartojasi per kiekvieną iš rezoliucijas rezoliucijas sąrašą.
Kilpos viduje 8 eilutė spausdina prasmingą pranešimą konsolėje.
10-15 eilutės sukuria naršyklės objektą su rezoliucija dabartinės kilpos iteracijos ir saugo ją chromuotas kintamasis.
17 eilutė įkelia puslapisUrl naršyklėje.
19 eilutė sukuria vaizdo kelią, kuriame bus išsaugota ekrano kopija, ir išsaugo vaizdą outputImage kintamasis.
20 eilutė daro naršyklės lango ekrano kopiją ir išsaugo ją kelyje outputImage.
21 eilutė uždaro naršyklę.
22 eilutė spausdina prasmingą pranešimą konsolėje ir baigia kilpą.
Tada ciklas vėl prasideda nuo kitos ekrano skiriamosios gebos (t.e., kitas sąrašo punktas).
Tada paleiskite ex02.py „Python“ scenarijus:
$ python3 ex02.py
„Python“ scenarijus ex02.py turėtų padaryti nurodyto URL ekrano kopijas kiekvienoje pasirinktoje ekrano skiriamojoje geboje.
Ekrano kopija w3mokyklos.com 320 taškų pločio.
Ekrano kopija w3mokyklos.com 500 taškų pločio.
Ekrano kopija w3mokyklos.com 720 taškų pločio.
Ekrano kopija w3mokyklos.com 1366 taškų pločio.
Ekrano kopija w3mokyklos.com 1920 taškų pločio.
Jei palygintumėte ekrano kopijas, turėtumėte pamatyti, kad vartotojo sąsaja keičiasi atsižvelgiant į naršyklės lango plotį. Naudodami „Selenium“ ekrano kopijos funkciją, greitai ir lengvai galite pamatyti, kaip jūsų svetainė atrodo skirtingomis ekrano raiškomis.
Išvada
Šiame straipsnyje buvo parodyti keli ekrano kopijų darymo pagrindai naudojant „Selenium“ ir „Chrome“ bei „Firefox“ žiniatinklio tvarkykles. Straipsnyje taip pat buvo parodyta, kaip padaryti ekrano kopijas skirtingomis ekrano raiškomis. Tai turėtų padėti pradėti naudoti „Selenium“ ekrano kopijos funkciją.
