CSS-Selektoren

In diesem Teil des Tutorials lernen wir etwas über CSS-Selektoren und erstellen CSS-Selektoren manuell mit verschiedenen HTML-Web-Element-Attributen. Wir verwenden das Firebug-Tool oder das Entwickler-Tool, um die HTML-Informationen der Web-Elemente zu erhalten. Einzelheiten zum Herunterladen und zur Verwendung des Firebug/Entwickler-Tools finden Sie im Tutorial – Locators in Selenium WebDriver.

Inhaltsübersicht

CSS und CSS-Selektoren – Einführung

CSS steht für Cascading Style Sheets, die zur Gestaltung verschiedener Elemente einer HTML-Webseite verwendet werden. In .css-Dateien können wir bestimmte Elemente einer Webseite (.html-Dateien) nachschlagen und sie dann gestalten, zum Beispiel Schriftgröße, Breite, Höhe usw. einstellen.

Wir verwenden bestimmte Regeln, die als CSS-Selektoren bereitgestellt werden, um die zu gestaltenden Webelemente zu finden.

Der folgende Befehl findet beispielsweise zunächst ein Webelement, das dem Selektormuster „div#searchBox“ entspricht, und richtet dann den Text darin mittig aus.

div#searchBox { text-align: center;}

In Selenium können wir diese CSS-Auswahlregeln/-Muster verwenden, um nach Webelementen zu suchen und später verschiedene Operationen mit ihnen durchzuführen. Zum Beispiel:

//SucheBox-Element mit CSS-Selektor lokalisieren

WebElement searchBox = driver.findElement(By.cssSelector(„div#searchBox“));

//Klickvorgang auf das Element ausführen

searchBox.sendKeys(„ITtester“);

Werfen wir nun einen Blick auf die verschiedenen CSS-Selektorregeln, ihre Syntax und Anwendungsbeispiele.

CSS-Selektoren

Im Folgenden finden Sie die Syntax und Beispiele dafür, wie Sie die erforderlichen Elemente finden und in Selenium-Skripten verwenden.

Verwendung der ID

CSS-Selektor-Regel – #id

Für das folgende HTML-Beispiel.

<button id=“submitButton1″ type=“button“ class=“btn“>Absenden</button>

• CSS-Suchmaschine – #submitButton1
• Beschreibung – ‚#submitButton1′ wählt das Element mit der ID ’submitButton1‘ aus.

Klasse verwenden – Klasse

CSS-Selektor-Regel – .class

Für das folgende HTML-Beispiel.

<button id=“submitButton1″ type=“button“ class=“btn“>Absenden</button>

• CSS-Suchmaschine – .btn
• Beschreibung – ‚.btn‘ selektiert alle Elemente mit der Klasse ‚btn‘.

Verwendung eines Tags – Tag

CSS-Selektor-Regel – tagName

Für das folgende HTML-Beispiel.

<input id=“fname“ type=“text“ name=“vorname“ class=“textbox“>

• CSS Locator – Eingabe
• Beschreibung – ‚input‘ wählt alle Elemente des Typs input aus.

Verwendung von Attributen und deren Werten

CSS-Selektor-Regel – [attributeName=’attributeValue‘]

Für das folgende HTML-Beispiel.

<input id=“fname“ type=“text“ name=“vorname“ class=“textbox“>

• CSS-Suchmaschine – [name=’firstName‘]
• Beschreibung – [name=’firstName‘] wählt Elemente mit dem Attribut name mit dem Wert ‚firstName‘ aus.

Mit diesen grundlegenden Regeln für die Lokalisierung von Webelementen können wir nun in Verbindung mit ihnen robustere Locators erstellen, die eindeutige Elemente auswählen.

Verwendung von Tags und IDs

CSS-Selektor-Regel – tag#id

Für das folgende HTML-Beispiel.

<input id=“fname“ type=“text“ name=“vorname“ class=“textbox“>

• CSS-Suchmaschine – input#fname
• Beschreibung – input#fname wählt das Element ‚input‘ mit der id ‚fname‘ aus.

Verwendung von Tags und Klasse

CSS-Selektor-Regel – tag.class

Für das folgende HTML-Beispiel.

<input id=“fname“ type=“text“ name=“vorname“ class=“textbox“>

• CSS-Locator – input.textbox
• Beschreibung – input.textbox wählt das Element „input“ mit der ID „textbox“ aus.

Verwendung von Tags und Attributen

CSS-Selektor-Regel – Tag[attributeName=’attributeValue‘]

Für das folgende HTML-Beispiel.

<input id=“fname“ type=“text“ name=“vorname“ class=“textbox“>

• CSS-Suchmaschine – Eingabe[name= firstname=““]
• Beschreibung – input[name= firstname=““] wählt das Element „input“ mit dem Attribut „name“ mit dem Wert „firstName“ aus.

Suche nach untergeordneten Elementen (nur direkte untergeordnete Elemente – child)

CSS-Selektor-Regel – parentLocator>childLocator

Für das folgende HTML-Beispiel.

<div id=“buttonDiv“ class=“small“>

<button id=“submitButton1″ type=“button“ class=“btn“>Absenden</button>

</div>

• CSS-Locator – div#buttonDiv>button
• Beschreibung – ‚div#buttonDiv>button‘ geht zuerst zum div-Element mit der id ‚buttonDiv‘ und wählt dann dessen Kindelement – ‚button‘ – aus.

Platzierung von Elementen innerhalb anderer Elemente (Child/Subchild)

CSS-Selektor-Regel – locator1 locator2

Für das folgende HTML-Beispiel.

<div id=“buttonDiv“ class=“small“>

<button id=“submitButton1″ type=“button“ class=“btn“>Absenden</button>

</div>

• CSS-Locator – Schaltfläche div#buttonDiv
• Beschreibung – ‚div#buttonDiv button‘ navigiert zunächst zu dem div-Element mit der id ‚buttonDiv‘ und wählt dann das ‚button‘-Element darin aus (das sein Kind oder ein Kind sein kann).

n-tes Kind

CSS-Selektor-Regel – :nth-child(n)

Für das folgende HTML-Beispiel.

<ul id=“testingTypes“>

<li>Automatisierungstests</li>

<li>Leistungstests</li>

<li>Manuelle Prüfung</li>

</ul>

• CSS Locator – #testingTypes li:nth-child(2)
• Beschreibung – ‚#testingTypes li:nth-child(2)‘ wählt das Element mit der ID ‚testingType‘ aus und findet dann 2. eines Nachkommens vom Typ li, t. j. Listenpunkt „Leistungstests“.

Suche nach Geschwistern

CSS-Selektor-Regel – locator1+locator2

Für das folgende HTML-Beispiel.

<ul id=“testingTypes“>

<li id=“automation“>Automatisierungstests</li>

<li>Leistungstests</li>

<li>Manuelle Prüfung</li>

</ul>

• CSS-Suchmaschine – li#automation + li
• Beschreibung – ‚li#automation + li‘ geht zuerst zum li-Element mit der id ‚automation‘ und wählt dann sein benachbartes li, t. j. Listenpunkt „Leistungstests“.

Für die Verarbeitung dynamischer Elemente, deren IDs und andere Locatoren dynamisch erzeugt werden (nicht im Voraus bekannt). Wir können die oben genannten Locatoren nutzen, indem wir verschiedene Eltern-Geschwister-Beziehungen von dynamischen Elementen verwenden. Darüber hinaus können wir auch einige spezielle CSS-Lokatoren verwenden, um partielle Attributwerte zuzuweisen.

^ – Beginnt bei

CSS-Selektor-Regel – [attribute^=attributeValue]

Für das folgende HTML-Beispiel.

<button id=“user1_btn_263″ type=“button“ class=“btn“>Senden an</button>

• CSS-Locator – id^=“user1″
• Beschreibung – ‚id^=“user1″‘ wählt das Element aus, dessen id mit „user1“ beginnt

$ – Endet in

CSS-Selektor-Regel – [attribute$=attributeValue]

Für das folgende HTML-Beispiel.

<button id=“user1_btn_263″ type=“button“ class=“btn“>Absenden</button>

• CSS-Suchmaschine – id$=“btn_263″
• Beschreibung – ‚id$=“btn_263″‘ wählt das Element aus, dessen id mit „btn_263“ endet

* – Enthält

CSS-Selektor-Regel – [attribute*=attributeValue]

Für das folgende HTML-Beispiel.

<button id=“user1_btn_263″ type=“button“ class=“btn“>Absenden</button>

• CSS-Locator – id*=“btn“
• Beschreibung – ‚id*=“btn“‚ wählt das Element aus, dessen id den Wert „btn“ enthält

Das ist alles, was wir in diesem Artikel vorbereitet haben. Das vollständige Selenium-Tutorial.