Phenquestions
Vereisten:
Om de opdrachten en voorbeelden van dit artikel uit te proberen, moet je:,
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) Python virtueel pakket geïnstalleerd op uw computer.
5) Mozilla Firefox- of Google Chrome-webbrowsers geïnstalleerd op uw computer.
6) Moet weten hoe de Firefox Gecko Driver of Chrome Web Driver te installeren.
Lees mijn artikel om aan de vereisten 4, 5 en 6 te voldoen Inleiding tot Selenium met Python 3 bij Linuxhint.com.
Je kunt veel artikelen over de andere onderwerpen vinden op LinuxHint.com. Bekijk ze zeker als je hulp nodig hebt.
Een projectmap opzetten:
Maak een nieuwe projectdirectory om alles overzichtelijk te houden selenium-css-selector/ als volgt:
$ mkdir -pv selenium-css-selector/drivers
Navigeer naar de selenium-css-selector/ projectmap als volgt:
$ cd selenium-css-selector/
Maak als volgt een virtuele Python-omgeving in de projectdirectory:
$ virtuele omgeving .venv
Activeer de virtuele omgeving als volgt:
$ bron .venv/bin/activeren
Installeer de Selenium Python-bibliotheek als volgt met PIP3:
$ pip3 installeer selenium
Download en installeer alle vereiste webstuurprogramma's in de chauffeurs/ map van het project. Ik heb het proces van het downloaden en installeren van webstuurprogramma's uitgelegd in mijn artikel Inleiding tot Selenium met Python 3. Als je hulp nodig hebt, zoek dan op LinuxHint.com voor dat artikel.
Download CSS Selector met Chrome Developer Tool:
In dit gedeelte laat ik u zien hoe u de CSS-selector kunt vinden van het webpagina-element dat u wilt selecteren met Selenium met behulp van de ingebouwde Developer Tool van de Google Chrome-webbrowser.
Om de CSS-kiezer te krijgen met behulp van de Google Chrome-webbrowser, opent u Google Chrome en gaat u naar de website waarvan u gegevens wilt extraheren. Druk vervolgens met de rechtermuisknop (RMB) op een leeg gedeelte van de pagina en klik op Inspecteren om de te openen Chrome-ontwikkelaarstool.
U kunt ook op drukken
Chrome-ontwikkelaarstool moet worden geopend.
Om de HTML-weergave van uw gewenste webpagina-element te vinden, klikt u op de Inspecteren() pictogram zoals aangegeven in de onderstaande schermafbeelding.
Beweeg vervolgens over het gewenste webpagina-element en druk op de linkermuisknop (LMB) om het te selecteren.
De HTML-weergave van het door u geselecteerde webelement wordt gemarkeerd in de elementen tabblad van Chrome-ontwikkelaarstool zoals je kunt zien in de onderstaande schermafbeelding.
Om de CSS-selector van uw gewenste element te krijgen, selecteert u het element uit de elementen tabblad van Chrome-ontwikkelaarstool en klik er met de rechtermuisknop (RMB) op. Selecteer vervolgens Kopiëren > Kopieerkiezer zoals aangegeven in de onderstaande schermafbeelding.
Ik heb de CSS-kiezer in een teksteditor geplakt. De CSS-selector ziet eruit zoals weergegeven in de onderstaande schermafbeelding.
Download CSS Selector met Firefox Developer Tool:
In dit gedeelte laat ik u zien hoe u de CSS-selector kunt vinden van het webpagina-element dat u wilt selecteren met Selenium met behulp van de ingebouwde Developer Tool van de Mozilla Firefox-webbrowser.
Om de CSS-kiezer te krijgen met de Firefox-webbrowser, opent u Firefox en gaat u naar de website waarvan u gegevens wilt extraheren. Druk vervolgens met de rechtermuisknop (RMB) op een leeg gedeelte van de pagina en klik op Inspecteer element (Q) om de te openen Firefox-ontwikkelaarstool.
Firefox-ontwikkelaarstool moet worden geopend.
Om de HTML-weergave van uw gewenste webpagina-element te vinden, klikt u op de Inspecteren() pictogram zoals aangegeven in de onderstaande schermafbeelding.
Beweeg vervolgens over het gewenste webpagina-element en druk op de linkermuisknop (LMB) om het te selecteren.
De HTML-weergave van het door u geselecteerde webelement wordt gemarkeerd in de Inspecteur tabblad van Firefox-ontwikkelaarstool zoals je kunt zien in de onderstaande schermafbeelding.
Om de CSS-selector van uw gewenste element te krijgen, selecteert u het element uit de Inspecteur tabblad van Firefox-ontwikkelaarstool en klik er met de rechtermuisknop (RMB) op. Selecteer vervolgens Kopiëren > CSS-kiezer zoals aangegeven in de onderstaande schermafbeelding.
De CSS-selector van het gewenste element zou er ongeveer zo uit moeten zien.
Gegevens extraheren met CSS Selector met Selenium:
In deze sectie laat ik je zien hoe je webpagina-elementen selecteert en gegevens eruit haalt met behulp van CSS-selectors met de Selenium Python-bibliotheek.
Maak eerst een nieuw Python-script ex00.py en typ de volgende regels codes in:.
van selenium import webdrivervan selenium.webstuurprogramma.gemeenschappelijk.sleutels importeren Sleutels
van selenium.webstuurprogramma.gemeenschappelijk.door import Door
opties = webstuurprogramma.Chrome-opties()
opties.zonder hoofd = waar
browser = webstuurprogramma.Chrome(executable_path="./drivers/chromedriver", options=opties)
browser.get("https://www.unixtimestamp.com/")
tijdstempel = browser.find_element_by_css_selector('h3.tekst-gevaar:nth-child(3)')
print('Huidige tijdstempel: %s' % (tijdstempel.tekst.split(")[0]))
browser.dichtbij()
Als u klaar bent, slaat u de ex00.py Python-script.
Regel 1-3 importeert alle benodigde Selenium-componenten.
Regel 5 maakt een Chrome-opties-object en regel 6 schakelt de headless-modus in voor de Chrome-webbrowser.
Lijn 8 maakt een Chrome browser object met behulp van de chromedriver binair van de chauffeurs/ map van het project.
Regel 10 vertelt de browser om de website unixtimestamp te laden.com.
Regel 12 vindt het element met de tijdstempelgegevens van de pagina met behulp van de CSS-selector en slaat het op in de tijdstempel variabele.
Regel 13 analyseert de tijdstempelgegevens van het element en drukt deze af op de console.
Dit is hoe de HTML-structuur van de UNIX-tijdstempelgegevens in unixtimestamp.com lijkt op.
Regel 14 sluit de browser.
Voer het Python-script uit ex00.py als volgt:
$ python3 ex00.py
Zoals u kunt zien, worden de tijdstempelgegevens op het scherm afgedrukt.
Hier heb ik de browser.find_element(Door, selector) methode.
Omdat we CSS-selectors gebruiken, is de eerste parameter parameter Door.CSS_SELECTOR en de tweede parameter is de CSS-selector zelf.
In plaats van browser.find_element() methode, kunt u ook browser.find_element_by_css_selector(selector) methode. Deze methode heeft alleen een CSS-selector nodig om te werken. Het resultaat zal hetzelfde zijn.
De browser.find_element() en browser.find_element_by_css_selector() methoden worden gebruikt om een enkel element van de webpagina te vinden en te selecteren. Als u meerdere elementen wilt vinden en selecteren met behulp van de CSS-selectors, moet u browser.find_elements() en browser.find_elements_by_css_selector() methoden.
De browser.find_elements() methode heeft dezelfde argumenten als de browser.find_element() methode.
De browser.find_elements_by_css_selector() methode heeft hetzelfde argument als de browser.find_element_by_css_selector() methode.
Laten we een voorbeeld bekijken van het extraheren van een lijst met namen met behulp van CSS-selectors uit de random-name-generator.info met Selenium.
Zoals je kunt zien, heeft de ongeordende lijst de klassenaam namenlijst. We kunnen dus de CSS-selector gebruiken .naamLijst li om alle namen van de webpagina te selecteren.
Laten we een voorbeeld bekijken van het selecteren van meerdere elementen van de webpagina met behulp van CSS-kiezers.
Een nieuw Python-script maken ex01.py en typ de volgende regels codes erin:.
van selenium import webdrivervan selenium.webstuurprogramma.gemeenschappelijk.sleutels importeren Sleutels
van selenium.webstuurprogramma.gemeenschappelijk.door import Door
opties = webstuurprogramma.Chrome-opties()
opties.zonder hoofd = waar
browser = webstuurprogramma.Chrome(executable_path="./drivers/chromedriver", options=opties)
browser.get("http://willekeurige-naam-generator.info/")
namen = browser.find_elements(Door.CSS_SELECTOR, '.naamLijst li')
voor naam in namen:
print naam.tekst)
browser.dichtbij()
Als u klaar bent, slaat u de ex01.py Python-script.
Regel 1-8 is hetzelfde als in ex00.py Python-script. Dus ik ga ze hier niet nog een keer uitleggen.
Regel 10 vertelt de browser om de website random-name-generator te laden.info.
Regel 12 selecteert de namenlijst met de browser.find_elements() methode. Deze methode gebruikt de CSS-selector .naamLijst li om de namenlijst te vinden. Vervolgens wordt de namenlijst opgeslagen in de namen variabele.
In regel 13 en 14, a voor lus wordt gebruikt om door de te itereren namen lijst en print de namen op de console.
Regel 16 sluit de browser.
Voer het Python-script uit ex01.py als volgt:
$ python3 ex01.py
Zoals u kunt zien, worden de namen van de webpagina gehaald en op de console afgedrukt.
In plaats van de browser.find_elements() methode, kunt u ook de browser.find_elements_by_css_selector() de methode als voorheen. Deze methode heeft alleen een CSS-selector nodig om te werken. Het resultaat zal hetzelfde zijn.
Basisprincipes van CSS-kiezers:
U kunt de CSS-selector van een webpagina-element altijd vinden met behulp van de Developer Tool van Firefox of de Chrome-webbrowser. Deze automatisch gegenereerde CSS-selector is misschien niet wat je zoekt. Soms moet u uw CSS-selector schrijven.
In deze sectie ga ik het hebben over de basisprincipes van CSS-selectors, zodat u kunt begrijpen wat een bepaalde CSS-selector op een webpagina selecteert en zo nodig uw aangepaste CSS-selector kunt schrijven.
Als u een element van de webpagina wilt selecteren met behulp van de ID bericht, de CSS-selector zal zijn #bericht.
De CSS-kiezer .groen zal een element selecteren met een klassenaam groen.
Als u een element (klasse bericht) binnen een ander element (class container), is de CSS-selector .container .bericht
De CSS-kiezer .bericht.succes selecteert het element dat twee CSS-klassen heeft bericht en succes.
Om alle te selecteren p tags, u kunt de CSS-selector gebruiken p.
Alleen de . selecteren p tags in de div tags, u kunt de CSS-selector gebruiken div p
Om de . te selecteren p tags die de directe broers en zussen zijn van de div tags, u kunt de CSS-selector gebruiken div > p
Om alle te selecteren span en p tags, u kunt de CSS-selector gebruiken p, span
Om de . te selecteren p tag direct na de div tag, kunt u de CSS-selector gebruiken div + p
Om de . te selecteren p tag na de div tag, kunt u de CSS-selector gebruiken div ~ p
Om alle te selecteren p tags die de klassenaam hebben bericht, je kunt de CSS-selector gebruiken p.bericht
Om alle te selecteren span tags die de klassenaam hebben bericht, je kunt de CSS-selector gebruiken span.bericht
Om alle elementen met het attribuut te selecteren: href, je kunt de CSS-selector gebruiken [href]
Om het element met het attribuut te selecteren: naam en de waarde van de naam attribuut is gebruikersnaam, je kunt de CSS-selector gebruiken [naam="gebruikersnaam"]
Om alle elementen met het attribuut te selecteren: alt en de waarde van de alt attribuut dat de subtekenreeks bevat vscode, je kunt de CSS-selector gebruiken [alt~="vs-code"]
Om alle elementen te selecteren die de . hebben href attribuut en de waarde van de href attribuut begint met de tekenreeks https, je kunt de CSS-selector gebruiken [href^=”https”]
Om alle elementen te selecteren die de . hebben href attribuut en de waarde van de href attribuut eindigend op de string .com, je kunt de CSS-selector gebruiken [href$=".com”]
Om alle elementen te selecteren die de . hebben href attribuut en de waarde van de href attribuut heeft de subtekenreeks google, je kunt de CSS-selector gebruiken [href*="google"]
Als u de eerste wilt selecteren li tag in de ul tag, kunt u de CSS-selector gebruiken ul li:eerste kind
Als u de eerste wilt selecteren li tag in de ul tag, u kunt ook de CSS-selector gebruiken ul li:nde-kind(1)
Als u de laatste wilt selecteren li tag in de ul tag, kunt u de CSS-selector gebruiken ul li:laatste kind
Als u de laatste wilt selecteren li tag in de ul tag, u kunt ook de CSS-selector gebruiken ul li:n-laatste-kind(1)
Als u de tweede wilt selecteren li tag in de ul tag vanaf het begin, u kunt de CSS-selector gebruiken ul li:nde-kind(2)
Als u de derde wilt selecteren li tag in de ul tag vanaf het begin, u kunt de CSS-selector gebruiken ul li:nde-kind (3)
Als u de tweede wilt selecteren li tag in de ul tag beginnend vanaf het einde, kunt u de CSS-selector gebruiken ul li:n-de-laatste-kind(2)
Als u de derde wilt selecteren li tag in de ul tag beginnend vanaf het einde, kunt u de CSS-selector gebruiken ul li:n-laatste-kind (3)
Dit zijn de meest voorkomende CSS-selectors. Je zult merken dat je deze bijna op elk Selenium-project gebruikt. Er zijn nog veel meer CSS-kiezers. Je vindt ze allemaal in de w3schools.com Referentie voor CSS-kiezers.
conclusie:
In dit artikel heb ik laten zien hoe u webpagina-elementen kunt lokaliseren en selecteren met behulp van CSS-selectors met Selenium. Ik heb ook de basisprincipes van CSS-selectors besproken. U zou CSS-selectors comfortabel moeten kunnen gebruiken voor uw Selenium-projecten.
