CSS-Selektor in Selenium

Was ist ein CSS-Selektor?

CSS-Selektoren in Selenium sind Zeichenfolgenmuster, die zur Identifizierung eines Elements basierend auf einer Kombination aus HTML-Tag, ID, Klasse und Attributen verwendet werden. Suchen nach CSS-Selektoren in Selenium ist komplizierter als die vorherigen Methoden, aber es ist die gebräuchlichste Lokalisierungsstrategie für Fortgeschrittene Selenium Benutzer, da es auch auf Elemente zugreifen kann, die keine ID oder keinen Namen haben.

CSS-Selektoren in Selenium Es gibt viele Formate, aber wir konzentrieren uns nur auf die gängigsten. Die verschiedenen Arten von CSS Locator in Selenium IDE

• Tag und ID
• Tag und Klasse
• Tag und Attribut
• Tag, Klasse und Attribut
• Innerer Text

Bei dieser Strategie stellen wir immer das Target Feld mit „css=“, wie in den folgenden Beispielen gezeigt wird.

Tag und ID – CSS-Selektor

Auch in diesem Beispiel verwenden wir das E-Mail-Textfeld von Facebook. Wie Sie sich erinnern, hat es die ID „E-Mail“ und wir haben bereits im Abschnitt „Lokalisierung nach ID“ darauf zugegriffen. Dieses Mal verwenden wir ein Selenium CSS-Selektor mit ID beim Zugriff auf genau dasselbe Element.

Syntax

css=tag#id

• tag = das HTML-Tag des Elements, auf das zugegriffen wird
• # = das Hash-Zeichen. Dies sollte bei der Verwendung von a immer vorhanden sein Selenium CSS-Selektor mit ID
• id = die ID des Elements, auf das zugegriffen wird

Beachten Sie, dass der ID immer ein Rautezeichen (#) vorangestellt ist.

Schritt 1) Navigieren www.facebook.com. Untersuchen Sie mit Firebug das Textfeld „E-Mail oder Telefonnummer“.

Beachten Sie an dieser Stelle, dass das HTML-Tag „input“ und seine ID „email“ ist. Unsere Syntax lautet also „css=input#email“.

Schritt 2) Geben Sie „css=input#email“ in das Target Kiste von Selenium IDE und klicken Sie auf die Schaltfläche „Suchen“. Selenium IDE sollte in der Lage sein, dieses Element hervorzuheben.

Tag und Klasse – CSS-Selektor

CSS-Selektor in Selenium Die Verwendung eines HTML-Tags und eines Klassennamens ähnelt der Verwendung eines Tags und einer ID, in diesem Fall wird jedoch ein Punkt (.) anstelle eines Rautezeichens verwendet.

Syntax

css=tag.class

• tag = das HTML-Tag des Elements, auf das zugegriffen wird
• . = das Punktzeichen. Dies sollte immer vorhanden sein, wenn ein CSS-Selektor mit Klasse verwendet wird
• class = die Klasse des Elements, auf das zugegriffen wird

Schritt 1) Gehen Sie zur Demoseite https://demo.guru99.com/test/facebook.html und verwenden Sie Firebug, um das Textfeld „E-Mail oder Telefon“ zu überprüfen. Beachten Sie, dass sein HTML-Tag „input“ und seine Klasse „inputtext“ ist.

Schritt 2) In Selenium IDE, geben Sie “css=input.inputtext” in das Target und klicken Sie auf Suchen. Selenium Die IDE sollte das Textfeld „E-Mail“ oder „Telefon“ erkennen können.

Beachten Sie, dass nur das erste Element im Quellcode erkannt wird, wenn mehrere Elemente dasselbe HTML-Tag und denselben Namen haben. Überprüfen Sie mit Firebug das Textfeld „Passwort“ in Facebook und beachten Sie, dass es den gleichen Namen hat wie das Textfeld „E-Mail“ oder „Telefon“.

Der Grund, warum in der vorherigen Abbildung nur das Textfeld „E-Mail“ oder „Telefon“ hervorgehoben wurde, besteht darin, dass es in der Seitenquelle von Facebook an erster Stelle steht.

Tag und Attribut – CSS-Selektor

Diese Strategie verwendet das HTML-Tag und ein bestimmtes Attribut des Elements, auf das zugegriffen werden soll.

Syntax

css=tag[attribute=value]

• tag = das HTML-Tag des Elements, auf das zugegriffen wird
• [ und ] = eckige Klammern, in die ein bestimmtes Attribut und der zugehörige Wert eingefügt werden
• attribute = das zu verwendende Attribut. Es empfiehlt sich, ein für das Element eindeutiges Attribut zu verwenden, beispielsweise einen Namen oder eine ID.
• Wert = der entsprechende Wert des gewählten Attributs.

Schritt 1) Navigieren Mercury Anmeldeseite für Touren https://demo.guru99.com/test/newtours/register.php und überprüfen Sie das Textfeld „Nachname“. Beachten Sie den HTML-Tag (in diesem Fall „input“) und den Namen („lastName“).

Schritt 2) In Selenium IDE, geben Sie “css=input[name=lastName]” in das Target und klicken Sie auf Suchen. Selenium Die IDE sollte erfolgreich auf das Feld „Nachname“ zugreifen können.

Wenn mehrere Elemente dasselbe HTML-Tag und Attribut haben, wird nur das erste erkannt. Dieses Verhalten ähnelt dem Auffinden von Elementen mithilfe von CSS-Selektoren mit demselben Tag und derselben Klasse.

Tag, Klasse und Attribut – CSS-Selektor

Syntax

css=tag.class[attribute=value]

• tag = das HTML-Tag des Elements, auf das zugegriffen wird
• . = das Punktzeichen. Dies sollte immer vorhanden sein, wenn ein CSS-Selektor mit Klasse verwendet wird
• class = die Klasse des Elements, auf das zugegriffen wird
• [ und ] = eckige Klammern, in die ein bestimmtes Attribut und der zugehörige Wert eingefügt werden
• attribute = das zu verwendende Attribut. Es empfiehlt sich, ein für das Element eindeutiges Attribut zu verwenden, beispielsweise einen Namen oder eine ID.
• Wert = der entsprechende Wert des gewählten Attributs.

Schritt 1) Gehen Sie zur Demoseite https://demo.guru99.com/test/facebook.html und verwenden Sie Firebug, um die Eingabefelder „E-Mail oder Telefon“ und „Passwort“ zu überprüfen. Beachten Sie deren HTML-Tag, Klasse und Attribute. Für dieses Beispiel wählen wir deren „tabindex“-Attribute aus.

Schritt 2) Wir werden zuerst auf das Textfeld „E-Mail oder Telefon“ zugreifen. Daher verwenden wir einen Tabindex-Wert von 1. Geben Sie „css=input.inputtext[tabindex=1]“ ein Selenium IDEs Target und klicken Sie auf „Suchen“. Das Eingabefeld „E-Mail oder Telefonnummer“ sollte hervorgehoben sein.

Schritt 3) Um auf das Passwort-Eingabefeld zuzugreifen, ersetzen Sie einfach den Wert des tabindex-Attributs. Geben Sie „css=input.inputtext[tabindex=2]“ in das Target und klicken Sie auf die Schaltfläche Suchen. Selenium Die IDE muss das Textfeld „Kennwort“ erfolgreich identifizieren können.

innerer Text – CSS-Selektor

Wie Sie vielleicht bemerkt haben, erhalten HTML-Labels selten ID-, Namens- oder Klassenattribute. Wie greifen wir also auf sie zu? Die Antwort liegt in der Verwendung ihrer inneren Texte. Innere Texte sind die tatsächlichen Zeichenfolgenmuster, die das HTML-Label auf der Seite anzeigt.

Syntax

css=tag:contains("inner text")

• tag = das HTML-Tag des Elements, auf das zugegriffen wird
• innerer Text = der innere Text des Elements

Schritt 1) Navigieren Mercury Homepage von Tours https://demo.guru99.com/test/newtours/ und verwenden Sie Firebug, um die Bezeichnung „Passwort“ zu untersuchen. Beachten Sie das HTML-Tag (in diesem Fall „font“) und beachten Sie, dass es keine Klassen-, ID- oder Namensattribute hat.

Schritt 2) Typ css=font:contains(“Passwort:”) in Selenium IDEs Target und klicken Sie auf Suchen. Selenium Die IDE sollte auf das Kennwortetikett zugreifen können, wie im Bild unten gezeigt.

Schritt 3) Ersetzen Sie diesmal den inneren Text durch „Boston“, damit Ihr Target wird nun zu „css=font:contains(„Boston“)“. Klicken Sie auf „Suchen“. Sie sollten bemerken, dass die Beschriftung „Boston nach San Francisco“ hervorgehoben wird. Dies zeigt Ihnen, dass Selenium Die IDE kann auf eine lange Beschriftung zugreifen, selbst wenn Sie nur das erste Wort des inneren Textes angegeben haben.

Zusammenfassung

Syntax für die Suche nach Verwendung des CSS-Selektors

Methodik	Target Syntax	Beispiel
Tag und ID	css=tag#id	css=Eingabe#E-Mail
Tag und Klasse	css=tag.class	css=input.inputtext
Tag und Attribut	css=tag[attribute=value]	css=input[name=lastName]
Tag, Klasse und Attribut	css=tag.klasse[attribut=wert]	css=input.inputtext[tabindex=1]