Phenquestions
Előfeltételek:
A cikk parancsainak és példáinak kipróbálásához rendelkeznie kell,
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) Python virtualenv számítógépre telepített csomagot.
5) A számítógépre telepített Mozilla Firefox vagy Google Chrome böngészők.
6) Tudnia kell, hogyan kell telepíteni a Firefox Gecko illesztőprogramot vagy a Chrome internetes illesztőprogramot.
A 4., 5. és 6. követelmény teljesítéséhez olvassa el cikkemet Bevezetés a szelénbe a Python 3 alkalmazással a Linuxhintnél.com.
Számos cikket talál a LinuxHint egyéb témáiról.com. Ügyeljen arra, hogy ellenőrizze őket, ha segítségre van szüksége.
Projektkönyvtár beállítása:
Ha mindent rendben szeretne tartani, hozzon létre egy új projektkönyvtárat szelén-css-választó / alábbiak szerint:
$ mkdir -pv selenium-css-selector / meghajtók
Navigáljon a szelén-css-választó / projekt könyvtár az alábbiak szerint:
$ cd szelén-css-választó /
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 Selenium Python könyvtárat a PIP3 segítségével az alábbiak szerint:
$ pip3 telepítse a szelént
Töltse le és telepítse az összes szükséges webes illesztőprogramot a járművezetők / a projekt könyvtárát. Cikkemben 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, keressen rá LinuxHint.com ahhoz a cikkhez.
Töltse le a CSS Selector programot a Chrome Developer Tool segítségével:
Ebben a részben bemutatom, hogyan találhatja meg a Selenium segítségével kiválasztani kívánt weboldal elem CSS-választóját a Google Chrome böngésző beépített fejlesztői eszközével.
A CSS-választó megszerzéséhez a Google Chrome böngészővel nyissa meg a Google Chrome-ot, és keresse fel azt a webhelyet, amelyről adatokat szeretne kinyerni. Ezután nyomja meg a jobb egérgombot (RMB) az oldal üres részén, majd kattintson a gombra Ellenőrizze hogy kinyissa a Chrome Developer Tool.
Megnyomhatja a gombot is
Chrome Developer Tool meg kell nyitni.
A kívánt weblap elem HTML ábrázolásának megkereséséhez kattintson a gombra Ellenőrizze() ikon az alábbi képernyőképen látható módon.
Ezután vigye az egérmutatót a kívánt weboldal elem fölé, és nyomja meg az egér bal gombját (LMB) a kiválasztásához.
A kiválasztott webes elem HTML-ábrázolása ki lesz emelve a Elemek lapja Chrome Developer Tool ahogy az alábbi képernyőképen láthatja.
A kívánt elem CSS választójának megszerzéséhez válassza ki az elemet a Elemek lapja Chrome Developer Tool és kattintson rá a jobb gombbal (RMB). Ezután válassza ki Másolat > Másolásválasztó az alábbi képernyőképen jelölt módon.
Beillesztettem a CSS választót egy szövegszerkesztőbe. A CSS választó úgy néz ki, mint az alábbi képernyőképen látható.
Töltse le a CSS Selector programot a Firefox Developer Tool segítségével:
Ebben a részben bemutatom, hogyan találhatja meg a Selenium segítségével kiválasztani kívánt weboldal elem CSS-választóját a Mozilla Firefox böngésző beépített fejlesztői eszközével.
Ha meg akarja szerezni a CSS választót a Firefox böngészővel, nyissa meg a Firefox böngészőt, és keresse fel azt a webhelyet, amelyről adatokat szeretne kinyerni. Ezután nyomja meg a jobb egérgombot (RMB) az oldal üres részén, majd kattintson a gombra Ellenőrizze az elemet (Q) hogy kinyissa a Firefox fejlesztői eszköz.
Firefox fejlesztői eszköz meg kell nyitni.
A kívánt weblap elem HTML ábrázolásának megkereséséhez kattintson a gombra Ellenőrizze() ikon az alábbi képernyőképen látható módon.
Ezután vigye az egérmutatót a kívánt weboldal elem fölé, és nyomja meg az egér bal gombját (LMB) a kiválasztásához.
A kiválasztott webes elem HTML-ábrázolása ki lesz emelve a Ellenőr lapja Firefox fejlesztői eszköz ahogy az alábbi képernyőképen láthatja.
A kívánt elem CSS választójának megszerzéséhez válassza ki az elemet a Ellenőr lapja Firefox fejlesztői eszköz és kattintson rá a jobb gombbal (RMB). Ezután válassza ki Másolat > CSS választó az alábbi képernyőképen jelölt módon.
A kívánt elem CSS-választójának ilyennek kell lennie.
Adatok kinyerése a szelén CSS Selector segítségével:
Ebben a részben bemutatom, hogyan válasszon ki weboldal elemeket és vonjon ki belőlük adatokat az Selenium Python könyvtárral rendelkező CSS választókkal.
Először hozzon létre egy új Python szkriptet ex00.py és írja be a következő kódsorokat.
a szelénimport-meghajtórólszelénből.web meghajtó.gyakori.kulcsok importálása kulcsok
szelénből.web meghajtó.gyakori.behozatal által
opciók = webdriver.ChromeOptions ()
opciók.fejetlen = Igaz
böngésző = webdriver.Chrome (végrehajtható_útvonal = "./ driver / chromedriver ", opciók = opciók)
böngésző.get ("https: // www.unixtimestamp.com / ")
időbélyeg = böngésző.find_element_by_css_selector ('h3.szövegveszély: n -edik gyermek (3) ')
nyomtatás ('Aktuális időbélyeg:% s'% (időbélyeg.szöveg.felosztás (") [0]))
böngésző.Bezárás()
Ha elkészült, mentse a ex00.py Python szkript.
Az 1-3. Sor az összes szükséges szelén alkatrészt importálja.
Az 5. sor létrehoz egy Chrome Options objektumot, a 6. sor pedig fej nélküli módot engedélyez a Chrome böngészőben.
A 8. sor létrehoz egy Chrome-ot böngésző objektum a chromedriver bináris a járművezetők / a projekt könyvtárát.
A 10. sor azt mondja a böngészőnek, hogy töltse be a webhely unixtimestamp-jét.com.
A 12. sor megtalálja azt az elemet, amelynek az időbélyeg-adatai vannak az oldalról a CSS választó segítségével, és tárolja az időbélyeg változó.
A 13. sor elemzi az elem időbélyegének adatait, és kinyomtatja a konzolra.
Így működik a UNIX időbélyeg adatainak HTML szerkezete az unixtimestampben.com úgy néz ki.
A 14. sor bezárja a böngészőt.
Futtassa a Python szkriptet ex00.py alábbiak szerint:
$ python3 ex00.py
Mint látható, az időbélyeg adatok kinyomtatásra kerülnek a képernyőn.
Itt használtam a böngésző.find_element (Által, választó) módszer.
Mivel CSS szelektorokat használunk, az első paraméter az lesz Által.CSS_SELECTOR a második paraméter pedig maga a CSS választó lesz.
Ahelyett böngésző.find_element () módszerrel is használhatja böngésző.find_element_by_css_selector (választó) módszer. Ehhez a módszerhez csak CSS-választóra van szükség. Az eredmény ugyanaz lesz.
A böngésző.find_element () és böngésző.find_element_by_css_selector () módszereket használnak egyetlen elem megkeresésére és kiválasztására a weboldalról. Ha több elemet akar keresni és kiválasztani a CSS választókkal, akkor használnia kell böngésző.find_elements () és böngésző.find_elements_by_css_selector () mód.
A böngésző.find_elements () metódus ugyanazokat az érveket veszi fel, mint a böngésző.find_element () módszer.
A böngésző.find_elements_by_css_selector () metódus ugyanazt az érvet veszi fel, mint a böngésző.find_element_by_css_selector () módszer.
Lássunk egy példát a névlista CSS szelektorokkal történő kivonására a random-name-generatorból.info a szelénnel.
Amint láthatja, a rendezetlen listán szerepel az osztály neve névlista. Tehát használhatjuk a CSS választót .névLista li hogy kiválassza az összes nevet a weboldalról.
Nézzünk át egy példát arra, hogy a weblapról több elemet válasszunk ki CSS választókkal.
Hozzon létre egy új Python szkriptet ex01.py és írja be a következő kódsorokat benne.
a szelénimport-meghajtórólszelénből.web meghajtó.gyakori.kulcsok importálása kulcsok
szelénből.web meghajtó.gyakori.behozatal által
opciók = webdriver.ChromeOptions ()
opciók.fejetlen = Igaz
böngésző = webdriver.Chrome (végrehajtható_útvonal = "./ driver / chromedriver ", opciók = opciók)
böngésző.get ("http: // random-name-generator.info / ")
nevek = böngésző.find_elements (Írta:.CSS_SELECTOR, '.nameList li ')
a névhez a nevekben:
nyomtatott név.szöveg)
böngésző.Bezárás()
Ha elkészült, mentse a ex01.py Python szkript.
Az 1–8. Sor megegyezik a ex00.py Python szkript. Tehát nem fogom itt újra elmagyarázni őket.
A 10. sor azt mondja a böngészőnek, hogy töltse be a webhely véletlen-név-generátort.info.
A 12. sor a név segítségével választja ki a névlistát böngésző.find_elements () módszer. Ez a módszer a CSS választót használja .névLista li hogy megtalálja a névlistát. Ezután a névlista a nevek változó.
A 13. és a 14. sorban a mert ciklust használjuk a nevek listázza és nyomtassa ki a neveket a konzolra.
A 16. sor bezárja a böngészőt.
Futtassa a Python szkriptet ex01.py alábbiak szerint:
$ python3 ex01.py
Mint láthatja, a neveket kivonják a weboldalról és kinyomtatják a konzolra.
Ahelyett, hogy a böngésző.find_elements () módszerrel, használhatja a böngésző.find_elements_by_css_selector () a módszer, mint korábban. Ehhez a módszerhez csak CSS-választóra van szükség. Az eredmény ugyanaz lesz.
A CSS-választók alapjai:
A weboldal elemének CSS-választóját mindig megtalálhatja a Firefox vagy a Chrome böngésző Fejlesztői eszköze segítségével. Lehet, hogy ez az automatikusan létrehozott CSS-választó nem az, amit szeretne. Időnként előfordulhat, hogy meg kell írnia a CSS-választót.
Ebben a részben a CSS-választók alapjairól fogok beszélni, hogy megértsük, mit választ egy adott CSS-választó egy weboldalról, és szükség esetén megírhatjuk az egyéni CSS-választót.
Ha egy elemet szeretne kiválasztani a weboldalról az azonosító használatával üzenet, a CSS választó lesz #üzenet.
A CSS választó .zöld osztály nevét választja ki zöld.
Ha ki akar választani egy elemet (osztály üzenet) egy másik elem (osztály tartály), akkor a CSS választó lesz .tartály .üzenet
A CSS választó .üzenet.siker kiválasztja azt az elemet, amelynek két CSS osztálya van üzenet és siker.
Az összes kiválasztásához o címkékkel, használhatja a CSS választót o.
Csak a o címkék a div címkékkel, használhatja a CSS választót div o
A o címkék, amelyek a div címkékkel, használhatja a CSS választót div> o
Az összes kiválasztásához span és o címkékkel, használhatja a CSS választót p, span
A o címke közvetlenül a div címkét, használhatja a CSS választót div + o
A o címke a div címkét, használhatja a CSS választót div ~ o
Az összes kiválasztásához o címkék, amelyeknek az osztály neve van üzenet, használhatja a CSS választót o.üzenet
Az összes kiválasztásához span címkék, amelyeknek az osztály neve van üzenet, használhatja a CSS választót span.üzenet
Az összes elem kiválasztása, amelyek rendelkeznek az attribútummal href, használhatja a CSS választót [href]
Az elem kiválasztása, amely rendelkezik az attribútummal név és a név attribútum az felhasználónév, használhatja a CSS választót [név = ”felhasználónév”]
Az összes elem kiválasztása, amelyek rendelkeznek az attribútummal alt és a alt attribútum, amely tartalmazza az alszöveget vscode, használhatja a CSS választót [alt ~ = ”vscode”]
Az összes elem kijelölése, amelyek rendelkeznek href attribútum és a href attribútum a karakterlánccal kezdődik https, használhatja a CSS választót [href ^ = ”https”]
Az összes elem kijelölése, amelyek rendelkeznek href attribútum és a href a karakterlánccal végződő attribútum .com, használhatja a CSS választót [href $ = ”.com ”]
Az összes elem kiválasztásához, amelyek rendelkeznek href attribútum és a href attribútumhoz tartozik az alfej Google, használhatja a CSS választót [href * = ”google”]
Ha ki akarja választani az elsőt li címke a ul címkét, használhatja a CSS választót ul li: első gyermek
Ha ki akarja választani az elsőt li címke a ul címkét, használhatja a CSS választót is ul li: n -edik gyermek (1)
Ha ki akarja választani az utolsót li címke a ul címkét, használhatja a CSS választót ul li: utolsó gyermek
Ha ki akarja választani az utolsót li címke a ul címkét, használhatja a CSS választót is ul li: n-dik-utolsó gyermek (1)
Ha ki akarja választani a másodikat li címke a ul kezdetektől kezdve használhatja a CSS választót ul li: n -edik gyermek (2)
Ha ki akarja választani a harmadikat li címke a ul kezdetektől kezdve használhatja a CSS választót ul li: n -edik gyermek (3)
Ha ki akarja választani a másodikat li címke a ul tagtól kezdve használhatja a CSS választót ul li: utolsó gyermek (n)
Ha ki akarja választani a harmadikat li címke a ul tagtól kezdve használhatja a CSS választót ul li: n-dik-utolsó gyermek (3)
Ezek a leggyakoribb CSS-választók. Szinte minden Szelén-projektnél megtalálhatja ezeket. Sokkal több CSS-választó van. Az összes listáját megtalálja a w3schools-ban.com CSS Selectors Reference.
Összegzés:
Ebben a cikkben bemutattam, hogyan keressük meg és válasszuk ki a weblap elemeit a Seleniumot használó CSS választókkal. Megvitattam a CSS szelektorok alapjait is. Önnek képesnek kell lennie arra, hogy a szelén projektjeihez kényelmesen használja a CSS választókat.
