Menü

Verwendung von CSS Selector zum Identifizieren von Webelementen für Selenium-Skripte - Selenium Tutorial # 6

  • Haupt
  • Automatisierungstests
  • Verwendung von CSS Selector zum Identifizieren von Webelementen für Selenium-Skripte - Selenium Tutorial # 6

how use css selector

Versuchen Sie Unser Instrument, Um Probleme Zu Beseitigen

In unserer vorheriges Selenium-Tutorial Wir haben verschiedene Arten von Ortungsgeräten gelernt. Wir haben auch gelernt, wie man: ID-, Klassennamen-, Namens-, Linktext- und XPath-Locators zum Identifizieren von Webelementen auf einer Webseite verwendet.

In Fortsetzung davon werden wir heute lernen Verwendung von CSS Selector als Locator . Dies ist unser 6. Tutorial in unserem kostenlose Selenium Training Serie .

Verwenden von CSS Selector als Locator:

CSS-Selektor ist die Kombination aus einem Element-Selektor und einem Selektorwert, der das Webelement innerhalb einer Webseite identifiziert. Die Zusammensetzung eines Elementwählers und eines Auswahlwerts wird als Auswahlmuster bezeichnet.

CSS Selector Selenium Locator

Das Auswahlmuster wird unter Verwendung von HTML-Tags, Attributen und deren Werten erstellt. Das zentrale Thema hinter dem Verfahren zum Erstellen von CSS Selector und Xpath ist sehr ähnlich, was dem einzigen Unterschied in ihrem Konstruktionsprotokoll zugrunde liegt.

Wie Xpath kann auch der CSS-Selektor Webelemente ohne ID, Klasse oder Namen suchen.

youtube to mp3 online converter Bewertungen

Lassen Sie uns nun die primitiven Typen von CSS-Selektoren diskutieren:

Verwenden von CSS Selector als Locator

Was du lernen wirst:

CSS-Auswahl: ID

In diesem Beispiel greifen wir auf das Textfeld 'E-Mail' zu, das im Anmeldeformular von Gmail.com vorhanden ist.

Das E-Mail-Textfeld verfügt über ein ID-Attribut, dessen Wert als 'E-Mail' definiert ist. Somit können das ID-Attribut und sein Wert verwendet werden, um einen CSS-Selektor für den Zugriff auf das E-Mail-Textfeld zu erstellen.

CSS-Selektor für Webelement erstellen

Schritt 1 : Suchen / überprüfen Sie das Webelement (in unserem Fall das Textfeld 'E-Mail') und stellen Sie fest, dass das HTML-Tag 'Eingabe' und der Wert des ID-Attributs 'E-Mail' ist und beide gemeinsam auf das 'E-Mail-Textfeld' verweisen. Daher würden die obigen Daten verwendet, um einen CSS-Selektor zu erstellen.

Verwenden von CSS Selector als Locator 2

Überprüfen Sie den Locator-Wert

Schritt 1 : Geben Sie 'css = input # Email' ein, d. H. Den Locator-Wert in das Zielfeld in der Selenium-IDE, und klicken Sie auf die Schaltfläche 'Suchen'. Beachten Sie, dass das E-Mail-Textfeld hervorgehoben wird.

Verwenden von CSS Selector als Locator 3

Syntax

css =

  • HTML-Tag - Es ist das Tag, mit dem das Webelement bezeichnet wird, auf das wir zugreifen möchten.
  • # - Das Hash-Zeichen wird verwendet, um das ID-Attribut zu symbolisieren. Es ist obligatorisch, ein Hash-Zeichen zu verwenden, wenn das ID-Attribut zum Erstellen des CSS-Selektors verwendet wird.
  • Wert des ID-Attributs - Dies ist der Wert eines ID-Attributs, auf das zugegriffen wird.
  • Vor dem Wert von ID steht immer ein Hash-Zeichen.

Hinweis: Gilt auch für andere Arten von CSS-Selektoren

  • Denken Sie bei der Angabe von CSS Selector im Zieltextfeld von Selenium IDE immer daran, ihm 'css =' voranzustellen.
  • Die Reihenfolge der obigen Artefakte ist unveränderlich.
  • Wenn zwei oder mehr Webelemente dasselbe HTML-Tag und denselben Attributwert haben, wird das erste in der Seitenquelle markierte Element identifiziert.

CSS-Auswahl: Klasse

In diesem Beispiel würden wir auf das Kontrollkästchen 'Angemeldet bleiben' unter dem Anmeldeformular bei gmail.com zugreifen.

Das Kontrollkästchen 'Angemeldet bleiben' verfügt über ein Klassenattribut, dessen Wert als 'Merken' definiert ist. Somit können das Klassenattribut und sein Wert verwendet werden, um einen CSS-Selektor für den Zugriff auf das angegebene Webelement zu erstellen.

Das Auffinden eines Elements mithilfe von Class als CSS-Selektor ist der Verwendung von ID sehr ähnlich. Der einzige Unterschied liegt in der Syntaxbildung.

Erstellen eines CSS-Selektors für ein Webelement

Schritt 1 : Suchen / überprüfen Sie das Webelement (in unserem Fall das Kontrollkästchen 'Angemeldet bleiben') und stellen Sie fest, dass das HTML-Tag 'Label' und der Wert des ID-Attributs 'Merken' lautet und beide gemeinsam auf das 'Angemeldet bleiben' verweisen im Kontrollkästchen “.

Überprüfen Sie den Locator-Wert

Schritt 1 : Geben Sie 'css = label.remember' ein, d. H. Den Locator-Wert in das Zielfeld in der Selenium-IDE, und klicken Sie auf die Schaltfläche 'Suchen'. Beachten Sie, dass das Kontrollkästchen 'Angemeldet bleiben' markiert ist.

Verwenden von CSS Selector als Locator 4

Syntax

css =

  • . - Das Punktzeichen wird verwendet, um das Klassenattribut zu symbolisieren. Es ist obligatorisch, ein Punktzeichen zu verwenden, wenn ein Klassenattribut zum Erstellen eines CSS-Selektors verwendet wird.
  • Vor dem Wert von Class steht immer ein Punktzeichen.

CSS-Auswahl: Attribut

In diesem Beispiel greifen wir auf die Schaltfläche 'Anmelden' unter dem Anmeldeformular bei gmail.com zu.

Die Schaltfläche 'Anmelden' verfügt über ein Typattribut, dessen Wert als 'Senden' definiert ist. Somit können das Typattribut und sein Wert verwendet werden, um einen CSS-Selektor für den Zugriff auf das angegebene Webelement zu erstellen.

Erstellen eines CSS-Selektors für ein Webelement

Schritt 1 : Suchen / überprüfen Sie das Webelement (in unserem Fall die Schaltfläche 'Anmelden') und stellen Sie fest, dass das HTML-Tag 'Eingabe' ist, das Attribut Typ ist und der Wert des Typattributs 'Senden' ist und alle zusammen einen Verweis auf die Schaltfläche 'Anmelden'.

Überprüfen Sie den Locator-Wert

Schritt 1 : Geben Sie 'css = input (type = 'submit')' ein, d. H. Den Locator-Wert in das Zielfeld in der Selenium-IDE, und klicken Sie auf die Schaltfläche 'Suchen'. Beachten Sie, dass die Schaltfläche 'Anmelden' hervorgehoben wird.

Verwenden von CSS Selector als Locator 5

Syntax

css =

  • Attribut - Mit diesem Attribut möchten wir den CSS-Selektor erstellen. Es kann Wert, Typ, Name usw. sein. Es wird empfohlen, ein Attribut auszuwählen, dessen Wert das Webelement eindeutig identifiziert.
  • Wert des Attributs - Dies ist der Wert eines Attributs, auf das zugegriffen wird.

CSS-Auswahl: ID / Klasse und Attribut

In diesem Beispiel greifen wir auf das Textfeld 'Passwort' zu, das im Anmeldeformular von gmail.com enthalten ist.

Das Textfeld 'Passwort' enthält ein ID-Attribut, dessen Wert als 'Passwd' definiert ist, ein Typattribut, dessen Wert als 'Passwort' definiert ist. Somit können ID-Attribut, Typattribut und ihre Werte verwendet werden, um einen CSS-Selektor für den Zugriff auf das angegebene Webelement zu erstellen.

bester Task-Manager für Windows 10

Erstellen eines CSS-Selektors für ein Webelement

Schritt 1 : Suchen / überprüfen Sie das Webelement (in unserem Fall das Textfeld 'Kennwort') und stellen Sie fest, dass das HTML-Tag 'Eingabe' ist, die Attribute ID und Typ sind und die entsprechenden Werte 'Kennwort' und 'Kennwort' sind und alle zusammen Verweisen Sie auf das Textfeld „Passwort“.

Überprüfen Sie den Locator-Wert

Schritt 1 : Geben Sie 'css = input # Passwd (name =’ Passwd ’)' ein, d. H. Den Locator-Wert in das Zielfeld in der Selenium-IDE, und klicken Sie auf die Schaltfläche 'Suchen'. Beachten Sie, dass das Textfeld „Passwort“ hervorgehoben wird.

Verwenden von CSS Selector als Locator 5

Syntax

css =

In der Syntax können auch zwei oder mehr Attribute angegeben werden.Zum Beispiel, 'CSS = Eingabe # Passwd (Typ =' Passwort ') (Name =' Passwd ')'.

CSS-Auswahl: Teilzeichenfolge

CSS in Selen ermöglicht das Abgleichen einer Teilzeichenfolge und damit das Ableiten einer sehr interessanten Funktion zum Erstellen von CSS-Selektoren mithilfe von Teilzeichenfolgen. Es gibt drei Möglichkeiten, wie CSS-Selektoren basierend auf dem Mechanismus erstellt werden können, der zum Anpassen der Teilzeichenfolge verwendet wird.

Arten von Mechanismen

Alle darunter liegenden Mechanismen haben symbolische Bedeutung.

  • Passen Sie ein Präfix an
  • Passen Sie ein Suffix an
  • Passen Sie einen Teilstring an

Lassen Sie uns sie im Detail besprechen.

Passen Sie ein Präfix an

Es wird verwendet, um der Zeichenfolge mit Hilfe eines passenden Präfixes zu entsprechen.

Syntax

css =

  • ^ - Symbolische Notation zur Übereinstimmung mit einer Zeichenfolge mit Präfix.
  • Präfix - Dies ist die Zeichenfolge, auf deren Grundlage die Übereinstimmungsoperation ausgeführt wird. Es wird erwartet, dass die wahrscheinliche Zeichenfolge mit der angegebenen Zeichenfolge beginnt.

Zum Beispiel: Betrachten wir das Textfeld 'Passwort', sodass der entsprechende CSS-Selektor wie folgt lautet:

css = Eingabe # Passwd (Name ^ = ’Pass’)

Passen Sie ein Suffix an

Es wird verwendet, um der Zeichenfolge mit Hilfe eines passenden Suffixes zu entsprechen.

Syntax

css =

  • # - Symbolische Notation zum Abgleichen einer Zeichenfolge mit Suffix.
  • Das Suffix - Dies ist die Zeichenfolge, auf deren Grundlage die Übereinstimmungsoperation ausgeführt wird. Es wird erwartet, dass die wahrscheinliche Zeichenfolge mit der angegebenen Zeichenfolge endet.

Zum Beispiel,Betrachten wir noch einmal das Textfeld 'Passwort'. Der entsprechende CSS-Selektor wäre also:

css = input # Passwd (name $ = ’wd’)

Passen Sie einen Teilstring an

Es wird verwendet, um mit Hilfe eines passenden Teilstrings dem String zu entsprechen.

Syntax

css =

  • * * - Symbolische Notation zum Abgleichen einer Zeichenfolge mit einer Unterzeichenfolge.
  • Unterzeichenfolge - Dies ist die Zeichenfolge, auf deren Grundlage die Übereinstimmungsoperation ausgeführt wird. Es wird erwartet, dass die wahrscheinliche Zeichenfolge das angegebene Zeichenfolgenmuster aufweist.

Zum Beispiel,Betrachten wir noch einmal das Textfeld 'Passwort'. Der entsprechende CSS-Selektor wäre also:

css = input # Passwd (name $ = ’wd’)

CSS-Auswahl: Innerer Text

Der innere Text hilft uns, CSS Selector anhand eines Zeichenfolgenmusters zu identifizieren und zu erstellen, das das HTML-Tag auf der Webseite anzeigt.

Überlegen Sie: 'Benötigen Sie Hilfe?' Hyperlink unter dem Anmeldeformular bei gmail.com.

Das Ankertag, das den Hyperlink darstellt, enthält einen Text. Somit kann dieser Text verwendet werden, um einen CSS-Selektor für den Zugriff auf das angegebene Webelement zu erstellen.

Syntax:

css =

  • :: - Das Punktzeichen wird verwendet, um die enthaltene Methode zu symbolisieren
  • Enthält - Dies ist der Wert eines Klassenattributs, auf das zugegriffen wird.
  • Text - Der Text, der unabhängig von seiner Position an einer beliebigen Stelle auf der Webseite angezeigt wird.

Dies ist aufgrund seiner vereinfachten Syntax eine der am häufigsten verwendeten Strategien zum Auffinden von Webelementen.

Aufgrund der Tatsache, dass das Erstellen von CSS Selector und Xpath viel Aufwand und Übung erfordert, wird der Prozess nur von anspruchsvolleren und geschulten Benutzern ausgeführt.

Nächstes Tutorial Nr. 7 : Wenn Sie mit unserem nächsten Tutorial fortfahren, möchten wir Ihnen die Gelegenheit nutzen, Ihnen eine Erweiterung der Ortungsstrategien vorzustellen. Daher würden wir im nächsten Tutorial das studieren Mechanismus zum Auffinden von Webelementen in Google Chrome und Internet Explorer.

beste kostenlose Datenbanksoftware für Windows

Wir behandeln Selenium Locators ausführlicher, da dies ein wichtiger Bestandteil der Selenium Script-Erstellung ist.

Teilen Sie uns Ihre Fragen / Kommentare unten mit.

Literatur-Empfehlungen

^