Web- und Mobiltests: So finden Sie Elemente

Zuletzt aktualisiert am 15 — Continuous Testing Experten

 

Wenn es um die Automatisierung von Web- und mobile Tests Die Hauptidee besteht darin, reale Benutzeraktionen zu simulieren, um alle möglichen Anwendungsfälle abzudecken. Dies wird hauptsächlich für Regressionstestzwecke verwendet. Auf diese Weise schaffen Sie Vertrauen in den Prozess der Einführung neuer Funktionen oder Fehlerbehebungen. Das Hauptziel besteht darin, nichts kaputt zu machen, was bereits funktioniert. Zweitens und nicht weniger wichtig ist, dass das Endbenutzererlebnis reibungslos und problemlos bleibt.

Die beliebtesten Tools der Branche für browserübergreifend und plattformübergreifende Web- und mobile Automatisierung sind Selen und Appium entsprechend. In diesem Artikel werden die wichtigsten Strategien zum Auffinden von Anwendungssteuerelementen (Schaltflächen, Links, Bilder, Text usw.) behandelt, sodass Sie die richtige Methode zum Identifizieren der Elemente finden können, mit denen Sie interagieren möchten.

Was ist ein Element? In der Welt der UI-Testautomatisierung handelt es sich um die kleinste Einheit einer Web- oder mobilen Anwendung, mit der interagiert werden kann (geklickt, mit der Maus bewegt, Tastatur- oder Maus- oder Tippereignisse empfangen). Bei Bildern und Textfeldern möchten Sie möglicherweise das Vorhandensein/Fehlen des Elements oder überprüfen Testen Sie das Anwendungslayout. Das Element ist also grundsätzlich ein HTML- oder XML-Element, normalerweise ist es ein HTML- oder XML-Element Etikett.

Geben Sie also den folgenden Codeausschnitt an: <a id ="foo" href =„https://experitest.com“>Experimentieren</a>

Sehen wir uns nun an, wie wir diesen Link „finden“ können, um damit arbeiten zu können (klicken Sie auf seine Attribute oder Textwerte oder überprüfen Sie sie).

Wenn Sie sich oorg.openqa.selenium.By Klasse JavaDoc werden Sie sehen, dass es mehrere Strategien zum Auffinden der Elemente in der zu testenden Anwendung gibt. Hier sind die wichtigsten 3:

  1. Id
  2. CSSSelector
  3. XPath

Die anderen verbleibenden Strategien sind:

  • Name
  • Klassenname
  • Link Text
  • PartialLinkText
  • Verlinke den Namen

Diese sind selbsterklärend und bedürfen daher keiner weiteren Beschreibung des Produkts.

Welche von diesen 3: Id, CSS und XPath, welche soll man wählen? Die Reihenfolge, in der die Strategien aufgeführt sind, wurde bewusst gewählt, weil:

  1. Id – ist die schnellste Möglichkeit, das Element zu lokalisieren und sein Ressourcenbedarf ist minimal
  2. CSS – langsamere und ressourcenintensivere Option zum Auffinden des Elements, bietet aber mehr Flexibilität
  3. XPath – die langsamste und „teuerste“ davon, jedoch die leistungsstärkste Option, da XPath fast eine Programmiersprache ist

Abrufen von Elementdetails von einer Webseite oder einer mobilen Anwendung

Blick in die Seitenquelle

Sowohl Selenium- als auch Appium-WebDriver-Implementierungen die getPageSource()-Funktion Dadurch wird das zugrunde liegende HTML- oder XML-Layout der aktuellen Web- oder Anwendungsseite zurückgegeben. Sie können die Ausgabe dieser Funktion in einer Datei speichern und die Datei dann mit Ihrem bevorzugten Browser öffnen und verwenden Entwickler-Tools um die Elemente zu untersuchen und „interessante“ Attribute zu identifizieren.

Abrufen von Elementdetails von einer Webseite oder einer mobilen Anwendung

Verwendung von Browser-Entwicklertools auf der Webseite

Die meisten modernen Browser verfügen über Entwicklertools, die zum Abrufen erweiterter Informationen zur Seitenquelle, zur Suche nach bestimmten Elementen, zur Auswahl von Web- und Mobiltests, zum Debuggen von Skripts usw. verwendet werden können. Normalerweise können Entwicklertools über die F12-Taste geöffnet werden. Wenn dies nicht möglich ist, lesen Sie in der Dokumentation Ihres Browsers nach.

Verwendung von Browser-Entwicklertools auf der Webseite

Verwenden der Appium Inspector-Sitzung

Wenn Sie die Appium Desktop-Anwendung ausführen, können Sie eine Inspektorsitzung starten, in der Sie die Seitenquelle und die Elementeigenschaften sehen können.

Verwenden der Appium Inspector-Sitzung

So sieht es für iOS aus:

iOS – Web- und Mobiltests

Und hier ist das Android-Äquivalent:

Android – Web- und Mobiltests

Suchen von Web- und Mobile-Testelementen anhand der ID

Da das Element, mit dem Sie arbeiten müssen, über ein eindeutiges ID-Attribut verfügt, können Sie es am einfachsten finden, indem Sie sich an diese ID halten. Stellen Sie einfach sicher, dass:

  • Es gibt keine anderen Elemente mit dieser ID, denn wenn dies der Fall wäre, arbeiten Selenium und/oder Appium mit dem ersten Element, das sie finden, und es wird nicht unbedingt das sein, nach dem Sie suchen. Die ID sieht mehr oder weniger für Menschen lesbar aus . Zum Beispiel <Varianten des Eingangssignals: id ="Passwort"/> scheint eine Kennung zu sein, die wahrscheinlich nicht geändert wird, und dies auch der Fall ist <Varianten des Eingangssignals: id =„id_j116“/>. Verdächtig, da es automatisch generiert werden könnte und sich beim nächsten Erstellen/Bereitstellen der Anwendung oder sogar beim Neuladen der Seite ändern könnte

ID-basierte Selektoren sind beispielsweise sehr einfach zu entwickeln

  1. Webanwendungen – die id Attribut des relevanten HTML-Elements
  2. Android-Anwendungen – a Ressourcen-ID Attribut des relevanten XML-Elements
  3. iOS-Anwendungen – ein benanntes Attribut des relevanten XML-Elements

Wenn Ihre Anwendungselemente keine IDs haben, sprechen Sie am besten mit Ihren Anwendungsentwicklern und bitten Sie sie, nach Möglichkeit eindeutige Kennungen für jedes Element einzuführen. Es kann auch für Analysen erforderlich sein. Zum Beispiel die Verfolgung der Benutzeraktivität, sodass sie höchstwahrscheinlich zustimmen werden.

CSS-Selektoren

In einem Fall, in dem Element-IDs nicht verwendet werden können, können Sie das Element trotzdem mithilfe von finden CSS-Selektoren. Es ist langsamer als ID und verbraucht mehr Ressourcen in Bezug auf CPU und RAM. Sie haben jedoch viel mehr Optionen, um das gesuchte Element zu finden.

So befasst sich beispielsweise die KOSTENLOSE PROBE Taste bei https://experitest.com/ Seite sieht aus wie:

KOSTENLOSE PROBE

Wie Sie sehen, gibt es kein ID-Attribut, Sie können jedoch das verwenden href Attributwert zum Auffinden des Elements, der relevante CSS-Selektor wäre:

a[href=“/free-trial“]

href – Web- und Mobiltests

Sie können sogar eine Teilübereinstimmung durchführen a[href*=“trial“] und trotzdem das Element finden.

XPath-Selektoren

In einer Situation, in der Sie weder über eine eindeutige ID verfügen noch einen CSS-Selektor verwenden können, müssen Sie XPath in Betracht ziehen. Obwohl es die langsamste und ressourcenintensivste Option ist, ist sie auch die leistungsstärkste. Es hat vollen Zugriff auf das DOM, das Sie nutzen können XPath-Achsen Für den Zugriff auf Elemente Eltern, Kinder, Geschwister usw. kombinieren Sie mehrere Ausdrücke und verwenden Sie vorhandene XPath-Operatoren und -Funktionen für eine exakte Übereinstimmung und erstellen Sie sogar neue, wenn die vorhandenen nicht für Ihr Szenario verwendet werden können.

Für einfache Anfragen wie die oben genannten KOSTENLOSE PROBE Die Link-Syntax ähnelt weitgehend der von CSS und verwendet den gleichen Element-Locator, der mit dem übereinstimmt href Das Attribut in der XPath-Sprache lautet:

//a[@href='/free-trial']

x-Pfadselektoren testen

Einige weitere XPath-Selektoren, die demselben Element entsprechen:

  • Finden Sie einen Link mit KOSTENLOSE PROBE Text: //a[text()='KOSTENLOSE TESTVERSION']
  • Suchen Sie einen Link, der enthält KOSTENLOS Text: //a[enthält(text(), 'FREE')]
  • Suchen Sie einen Link, der mit beginnt KOSTENLOS Text: //a[starts-with(text(),'FREE')]
  • Und ein Bonus. Es gibt kein endet mit() Funktion in XPath 1.0, Sie können jedoch mithilfe vorhandener Funktionen ein Äquivalent finden. Suchen Sie einen Link, der mit endet TRIAL Text: //a[substring(text(), string-length(text()) – string-length('TRIAL')+ 1, string-length(text()))= 'TRIAL']

Wenn Sie Schwierigkeiten haben, einen XPath-Ausdruck zu erstellen, vergessen Sie dies nicht Appium Studio. Es bietet eine einfache und einfache visuelle Möglichkeit, Geräte/Emulatoren zu verwalten, Profile bereitzustellen, Codegenerierung durch Aufzeichnung zu testen und Object Spy zu nutzen Generieren Sie einen eindeutigen XPath Ausdruck für ein Element auf der Seite, sodass Sie mit einem Klick einen Locator erstellen können.

Objektspion – Web- und Mobiltests

Jetzt sollten Sie ein klares Verständnis darüber haben, welche Elementselektoren Sie verwenden sollten und welche Vor- und Nachteile, Fähigkeiten und Einschränkungen die einzelnen Elemente haben. Wir hoffen, dass diese Informationen Ihnen das Leben erleichtern und Ihre Web- und Mobiltests robuster und zuverlässiger machen.

Auch interessant