Schreiben benutzerdefinierter Webelementaktionen mit TestProject

Java

Wir können doppelten Code aus unserer TestProject-Testsuite mithilfe von Webaktionen entfernen. Obwohl Webaktionen uns das Leben erleichtern, haben sie Zugriff auf das gesamte DOM, und dies kann unseren Testcode komplizierter machen, als er sein könnte. Dieser Blogbeitrag beschreibt, wie wir dieses Problem mithilfe von Web-Element-Aktionen lösen können.

Nachdem wir diesen Blogbeitrag fertiggestellt haben, werden wir:

Wissen Sie, was eine Web-Element-Aktion ist.
Verstehen Sie, wann wir Webelement-Aktionen verwenden sollten.
Kann mit TestProject eine benutzerdefinierte Webelement-Aktion schreiben.
Wissen, wie wir unsere Webelement-Aktionen in einer lokalen Entwicklungsumgebung ausführen können.
Kann das Root-Element unserer Web-Element-Aktion konfigurieren, wenn wir unser Add-On auf die Website app.testproject.io hochladen.

Fangen wir an.

Was ist eine Web-Element-Aktion?

Eine Webelementaktion ist eine Aktion, deren Gültigkeitsbereich auf die untergeordneten Elemente des angegebenen Stammelements beschränkt ist. Mit anderen Worten, eine Webelementaktion sollte nur die untergeordneten Elemente des konfigurierten Stammelements verarbeiten.

Nehmen wir beispielsweise an, dass wir eine Webelement-Aktion erstellen möchten, die das Kendo-UI-Raster unterstützt. Wenn wir diese Webelement-Aktion erstellen, müssen wir:

Identifizieren Sie das Stammelement des Kendo-UI-Rasters.
Implementieren Sie unsere Webelement-Aktion.
Konfigurieren Sie den Elementtyp, der es dem TestProject-Framework ermöglicht, das Stammelement des Kendo-UI-Rasters zu finden. Ein Elementtyp identifiziert das Stammelement mithilfe eines XPath-Ausdrucks, und mehrere Webelementaktionen können denselben Elementtyp gemeinsam nutzen. Das bedeutet:
- Wenn wir mehrere Webelement-Aktionen schreiben möchten, die das Kendo-UI-Raster (oder eine andere Komponente) unterstützen, haben unsere Webelement-Aktionen weniger Code, da wir keinen Code schreiben müssen, der das Root-Element des Ziels lokalisiert Komponente.
- Wir können unsere Tests viel einfacher gestalten, indem wir die Webelement-Aktionen aus dem TestProject-Addon-Store nutzen. Diese Addons sparen uns viel Zeit, wenn wir uns mit komplexen UIs beschäftigen, da das TestProject-Framework die erforderlichen Komponenten für uns findet und die Web-Element-Aktionen es uns ermöglichen, mit den gefundenen Komponenten zu interagieren. Mit anderen Worten, wir können unsere Tests schreiben (oder aufzeichnen), ohne uns in das komplexe DOM einzuarbeiten.

Wenn wir unsere Webelement-Aktion ausführen, lokalisiert das TestProject-Framework das Root-Element des Kendo-UI-Rasters und definiert den Umfang der aufgerufenen Webelement-Aktion, indem es das Root-Element an die Aktion übergibt.

Die folgende Abbildung veranschaulicht den Umfang unserer Webelement-Aktion:

Der Vorteil dieser Technik ist, dass unsere Webelement-Aktion nichts über die Struktur des angezeigten HTML-Dokuments wissen muss. Das bedeutet, dass wir einfache Webelement-Aktionen schreiben können, die nur einen Zweck haben:eine Operation X an der Komponente Y ausführen oder Informationen aus der Komponente Y extrahieren. Diese Aktionen sind einfach zu lesen, zu schreiben und zu warten.

Als nächstes werden wir herausfinden, wie wir eine Reporter-Hilfsklasse implementieren können.

Implementieren einer Reporter-Hilfsklasse

Wie wir uns erinnern, sollten wir das Ergebnis unserer Aktion immer mit dem ActionReporter melden Klasse. Wenn wir das Ergebnis unserer Aktion melden wollen, müssen wir den result() aufrufen Methode des ActionReporter Klasse. Diese Methode benötigt einen String Objekt als Methodenparameter.

Mit anderen Worten, wenn wir dynamische Ergebnismeldungen verwenden möchten, müssen wir diese Meldungen in unserer Aktionsklasse konstruieren, bevor wir das Ergebnis unserer Aktion melden. Dies fügt unseren Aktionsklassen unnötige Unordnung hinzu.

Aus diesem Grund müssen wir eine Hilfsklasse schreiben, die es uns ermöglicht, dynamische Ergebnismeldungen zu verwenden, wenn wir das Ergebnis unserer Aktion melden. Wir können diese Klasse schreiben, indem wir diesen Schritten folgen:

Zuerst , müssen wir einen neuen ActionReportHelper erstellen Klasse. Nachdem wir diese Klasse erstellt haben, sieht ihr Quellcode wie folgt aus:

public class ActionReportHelper {

}

Zweiter , müssen wir eine private hinzufügen und final ActionReporter Feld auf ActionReportHelper Klasse und stellen Sie sicher, dass der Wert dieses Felds mithilfe der Konstruktorinjektion bereitgestellt wird. Nachdem wir dieses Feld zum ActionReportHelper hinzugefügt haben Klasse sieht der Quellcode wie folgt aus:

import io.testproject.java.sdk.v2.reporters.ActionReporter;

public class ActionReportHelper {

 private final ActionReporter reporter;

 public ActionReportHelper(ActionReporter reporter) {
 this.reporter = reporter;
 }
}

Dritter , müssen wir eine Methode schreiben, die es uns ermöglicht, Ergebnismeldungen an das TestProject-Framework zu melden, indem wir das Format verwenden, das von String.format() unterstützt wird Methode. Nachdem wir diese Methode geschrieben haben, wird der Quellcode der ActionReportHelper Klasse sieht wie folgt aus:

import io.testproject.java.sdk.v2.reporters.ActionReporter;

public class ActionReportHelper {

 private final ActionReporter reporter;

 public ActionReportHelper(ActionReporter reporter) {
 this.reporter = reporter;
 }
 
 public void reportResult(String resultTemplate, Object... params) {
 reporter.result(String.format(resultTemplate, params));
 }
}

Wir können jetzt dynamische Ergebnismeldungen an das TestProject-Framework senden, ohne unseren Aktionsklassen Unordnung hinzuzufügen. Fahren wir fort und implementieren eine benutzerdefinierte Webelement-Aktion.

Implementieren einer benutzerdefinierten Webelement-Aktion

Lassen Sie uns eine benutzerdefinierte Webelement-Aktion schreiben, die die Gesamtzahl der Elemente extrahiert, die in einem Kendo-UI-Raster angezeigt werden. Die folgende Abbildung identifiziert die extrahierten Informationen:

Wir können unsere Web-Element-Aktion schreiben, indem wir diesen Schritten folgen:

Zuerst , müssen wir eine neue Aktionsklasse erstellen, die den WebElementAction implementiert Schnittstelle. Nachdem wir eine neue Aktionsklasse erstellt haben, sieht ihr Quellcode wie folgt aus:

import io.testproject.java.annotations.v2.Action;
import io.testproject.java.sdk.v2.addons.WebElementAction;

@Action(name = "Extracts the total item count of a Kendo UI grid")
public class KendoUIGridTotalItemCountAction implements WebElementAction {
 
}

Zweiter , müssen wir einen Ausgabeparameter namens:totalItemCount hinzufügen zu unserer Aktionsklasse. Dieser Parameter enthält die Gesamtzahl der Elemente, die im Raster der Kendo-Benutzeroberfläche angezeigt werden. Nachdem wir unserer Aktionsklasse einen neuen Ausgabeparameter hinzugefügt haben, sieht der Quellcode unserer Aktionsklasse wie folgt aus:

import io.testproject.java.annotations.v2.Action;
import io.testproject.java.annotations.v2.Parameter;
import io.testproject.java.enums.ParameterDirection;
import io.testproject.java.sdk.v2.addons.WebElementAction;

@Action(name = "Extracts the total item count of a Kendo UI grid")
public class KendoUIGridTotalItemCountAction implements WebElementAction {

 @Parameter(description = "Contains the total item count of a Kendo UI grid",
 direction = ParameterDirection.OUTPUT
 )
 private int totalItemCount;
}

Dritter , müssen wir den execute() überschreiben Methode des WebElementAction Schnittstelle. Diese Methode gibt ein ExecutionResult zurück enum und hat zwei Methodenparameter:

Der WebAddonHelper -Objekt ermöglicht uns den Zugriff auf die TestProject-API, wenn wir execute() implementieren Methode.
Die WebElement Objekt ist das Wurzelelement unserer Web-Element-Aktion. In unserem Fall ist dieses Objekt das Wurzelelement des Kendo-UI-Rasters.

Nachdem wir den execute() hinzugefügt haben -Methode zu unserer Aktionsklasse, sieht der Quellcode unserer Aktionsklasse wie folgt aus:

import io.testproject.java.annotations.v2.Action;
import io.testproject.java.annotations.v2.Parameter;
import io.testproject.java.enums.ParameterDirection;
import io.testproject.java.sdk.v2.addons.WebElementAction;
import io.testproject.java.sdk.v2.addons.helpers.WebAddonHelper;
import io.testproject.java.sdk.v2.enums.ExecutionResult;
import io.testproject.java.sdk.v2.exceptions.FailureException;
import org.openqa.selenium.WebElement;

@Action(name = "Extracts the total item count of a Kendo UI grid")
public class KendoUIGridTotalItemCountAction implements WebElementAction {

 @Parameter(description = "Contains the total item count of a Kendo UI grid",
 direction = ParameterDirection.OUTPUT
 )
 private int totalItemCount;

 @Override
 public ExecutionResult execute(WebAddonHelper webAddonHelper,
 WebElement webElement) throws FailureException {
 }
}

Vierter , müssen wir einen private schreiben Methode, die die Gesamtzahl der angezeigten Elemente aus String parst Objekt, das als Methodenparameter angegeben wird, und gibt einen Optional zurück Objekt, das die Gesamtzahl der angezeigten Elemente enthält. Wenn die Gesamtzahl der angezeigten Elemente nicht geparst werden kann, gibt diese Methode ein leeres Optional zurück Objekt. Außerdem erwartet diese Methode, dass der String Das als Methodenparameter angegebene Objekt verwendet das Format:'1 - 20 von 91 Elementen'.

Wir können diese Methode schreiben, indem wir diesen Schritten folgen:

Teilen Sie den Methodenparameter in zwei Teile auf, indem Sie die Zeichenfolge „of“ als begrenzenden regulären Ausdruck verwenden, und speichern Sie den zurückgegebenen String -Array im labelParts variabel.
Wenn der labelParts Array mehr als zwei Elemente hat, geben Sie ein leeres Optional zurück Objekt.
Parsen Sie die Gesamtzahl der angezeigten Elemente aus der Zeichenfolge:'91 Elemente' und geben Sie einen Optional zurück Objekt, das die Gesamtzahl der angezeigten Elemente enthält.

Nachdem Sie den parseTotalItemCount() geschrieben haben -Methode sieht der Quellcode unserer Aktionsklasse wie folgt aus:

import io.testproject.java.annotations.v2.Action;
import io.testproject.java.annotations.v2.Parameter;
import io.testproject.java.enums.ParameterDirection;
import io.testproject.java.sdk.v2.addons.WebElementAction;
import io.testproject.java.sdk.v2.addons.helpers.WebAddonHelper;
import io.testproject.java.sdk.v2.enums.ExecutionResult;
import io.testproject.java.sdk.v2.exceptions.FailureException;
import org.openqa.selenium.WebElement;

import java.util.Optional;

@Action(name = "Extracts the total item count of a Kendo UI grid")
public class KendoUIGridTotalItemCountAction implements WebElementAction {

 @Parameter(description = "Contains the total item count of a Kendo UI grid",
 direction = ParameterDirection.OUTPUT
 )
 private int totalItemCount;
 
 @Override
 public ExecutionResult execute(WebAddonHelper webAddonHelper, 
 WebElement webElement) throws FailureException {
 }

 private Optional<Integer> parseTotalItemCount(String totalItemCountLabel) {
 String[] labelParts = totalItemCountLabel.split("of");

 if (labelParts.length != 2) {
 return Optional.empty();
 }

 String totalItemCount = labelParts[1].replace("items", "").trim();
 return Optional.of(Integer.valueOf(totalItemCount));
 }
}

Fünfter , müssen wir den execute() implementieren Methode des WebElementAction Benutzeroberfläche, indem Sie diesen Schritten folgen:

Erstellen Sie einen neuen ActionReportHelper Objekt. Wir werden dieses Objekt verwenden, um das Ergebnis unseres WebElementAction zu melden .
Suchen Sie das HTML-Element, das die Bezeichnung für die Gesamtzahl der Elemente enthält. Wir können dieses HTML-Element finden, indem wir die HTML-Klasse verwenden:k-pager-info .
Wenn das Label für die Gesamtzahl der Artikel nicht gefunden wurde, melden Sie diesen Fehler mit dem ActionReportHelper Objekt und geben ExecutionResult.FAILED zurück .
Parsen Sie die Gesamtzahl der Elemente, die vom Raster der Kendo-Benutzeroberfläche angezeigt werden.
Wenn die Gesamtzahl der angezeigten Elemente nicht geparst werden kann, melden Sie diesen Fehler mit dem ActionReportHelper Objekt und geben ExecutionResult.FAILED zurück .
Speichern Sie die Gesamtzahl der angezeigten Artikel im totalItemCount Feld.
Geben Sie die Gesamtzahl der angezeigten Artikel mit dem ActionReportHelper an Objekt und geben ExecutionResult.PASSED zurück .

Danach müssen wir den execute() implementieren Methode des WebElementAction Schnittstelle sieht der Quellcode unserer Aktionsklasse wie folgt aus:

import io.testproject.java.annotations.v2.Action;
import io.testproject.java.annotations.v2.Parameter;
import io.testproject.java.enums.ParameterDirection;
import io.testproject.java.sdk.v2.addons.WebElementAction;
import io.testproject.java.sdk.v2.addons.helpers.WebAddonHelper;
import io.testproject.java.sdk.v2.enums.ExecutionResult;
import io.testproject.java.sdk.v2.exceptions.FailureException;
import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;

import java.util.Optional;

@Action(name = "Extracts the total item count of a Kendo UI grid")
public class KendoUIGridTotalItemCountAction implements WebElementAction {

 @Parameter(description = "Contains the total item count of a Kendo UI grid",
 direction = ParameterDirection.OUTPUT
 )
 private int totalItemCount;

 @Override
 public ExecutionResult execute(WebAddonHelper webAddonHelper,
 WebElement webElement) throws FailureException {
 ActionReportHelper reporter = new ActionReportHelper(
 webAddonHelper.getReporter()
 );

 WebElement totalItemCountLabel = webElement
 .findElement(By.className("k-pager-info"));
 if (totalItemCountLabel == null) {
 reporter.reportResult("The total item count label wasn't found");
 return ExecutionResult.FAILED;
 }

 Optional<Integer> totalItemCount = parseTotalItemCount(
 totalItemCountLabel.getText()
 );
 if (!totalItemCount.isPresent()) {
 reporter.reportResult(
 "Couldn't parse the total item count from the text: %s",
 totalItemCountLabel.getText()
 );
 return ExecutionResult.FAILED;
 }

 this.totalItemCount = totalItemCount.get();
 reporter.reportResult("The total item count is: %d", this.totalItemCount);

 return ExecutionResult.PASSED;
 }

 private Optional<Integer> parseTotalItemCount(String totalItemCountLabel) {
 String[] labelParts = totalItemCountLabel.split("of");

 if (labelParts.length != 2) {
 return Optional.empty();
 }

 String totalItemCount = labelParts[1].replace("items", "").trim();
 return Optional.of(Integer.valueOf(totalItemCount));
 }
}

Wir haben jetzt eine benutzerdefinierte Webelement-Aktion geschrieben, die die Gesamtzahl der Elemente extrahiert, die in einem Kendo-UI-Raster angezeigt werden. Als nächstes werden wir herausfinden, wie wir Webelement-Aktionen in unserer Entwicklungsumgebung debuggen können.

Debuggen von Webelement-Aktionen in der Entwicklungsumgebung

Wenn wir eine Webelement-Aktion in unserer lokalen Entwicklungsumgebung debuggen wollen, müssen wir eine sogenannte Runner-Klasse schreiben, die unsere Webelement-Aktion ausführt. Wir können diese Klasse schreiben, indem wir diesen Schritten folgen:

Zuerst , müssen wir eine neue Klasse erstellen. Nachdem wir unsere Runner-Klasse erstellt haben, sieht ihr Quellcode wie folgt aus:

public class KendoUIGridAddonRunner {

}

Zweiter , müssen wir unserer Runner-Klasse zwei Konstanten hinzufügen:

Der BROWSER Konstante konfiguriert den Browser, der unsere Webelement-Aktion ausführt. Da wir unsere Webelement-Aktion mit dem Chrome-Webbrowser ausführen möchten, müssen wir den Wert dieser Konstante auf AutomatedBrowserType.Chrome setzen .
Der DEVELOPER_KEY Konstante konfiguriert unseren Entwicklerschlüssel.

Nachdem wir diese Konstanten zu unserer Runner-Klasse hinzugefügt haben, sieht ihr Quellcode wie folgt aus:

import io.testproject.java.enums.AutomatedBrowserType;

public class KendoUIGridAddonRunner {

 private static final AutomatedBrowserType BROWSER = AutomatedBrowserType.Chrome;
 private static final String DEVELOPER_KEY = "PUT_YOUR_DEVELOPER_KEY_HERE";
}

Dritter , müssen wir einen public hinzufügen und static main() Methode zu unserer Läuferklasse. Diese Methode nimmt einen String array als Methodenparameter und gibt nichts zurück. Außerdem kann diese Methode einen Exception auslösen .

Nachdem wir diese Methode zu unserer Runner-Klasse hinzugefügt haben, sieht der Quellcode unserer Runner-Klasse wie folgt aus:

import io.testproject.java.enums.AutomatedBrowserType;

public class KendoUIGridAddonRunner {

 private static final AutomatedBrowserType BROWSER = AutomatedBrowserType.Chrome;
 private static final String DEVELOPER_KEY = "PUT_YOUR_DEVELOPER_KEY_HERE";

 public static void main(String[] args) throws Exception {

 }
}

Vierter , müssen wir den main() implementieren Methode, indem Sie diesen Schritten folgen:

Erstellen Sie einen neuen Runner Objekt. Wir werden dieses Objekt verwenden, um unsere Webelement-Aktion auszuführen.
Erstellen Sie einen neuen KendoUIGridTotalItemCountAction Objekt.
Erhalten Sie einen Verweis auf einen WebDriver -Objekt und öffnen Sie die HTML-Seite, die das Raster der Kendo-Benutzeroberfläche anzeigt.
Führen Sie unsere Web-Element-Aktion durch Aufrufen von run() aus Methode des Runner Klasse. Wenn wir diese Methode aufrufen, müssen wir die folgenden Objekte als Methodenparameter übergeben:
- Die aufgerufene Web-Element-Aktion.
- Das Root-Element der Web-Element-Aktion. In unserem Fall ist dieser Methodenparameter das Wurzelelement des Kendo-UI-Rasters. Wir können dieses HTML-Element finden, indem wir die HTML-ID verwenden:grid .

Nachdem wir den main() geschrieben haben Methode, der Quellcode von KendoUIGridAddonRunner Klasse sieht wie folgt aus:

import io.testproject.java.enums.AutomatedBrowserType;
import io.testproject.java.sdk.v2.Runner;
import io.testproject.java.sdk.v2.drivers.WebDriver;
import org.openqa.selenium.By;

public class KendoUIGridAddonRunner {

 private static final AutomatedBrowserType BROWSER = AutomatedBrowserType.Chrome;
 private static final String DEVELOPER_KEY = "PUT_YOUR_DEVELOPER_KEY_HERE";

 public static void main(String[] args) throws Exception {
 Runner runner = Runner.createWeb(DEVELOPER_KEY, BROWSER);

 KendoUIGridTotalItemCountAction totalItemCount = 
 new KendoUIGridTotalItemCountAction();

 WebDriver driver = runner.getDriver();
 driver.get("https://demos.telerik.com/kendo-ui/grid/index");

 runner.run(totalItemCount, By.id("grid"));
 }
}

Wir können jetzt unsere Web-Element-Aktion ausführen, indem wir main() ausführen Methode unserer Läuferklasse. Wenn wir unsere Webelement-Aktion debuggen möchten, können wir den bevorzugten Zeilen einfach Haltepunkte hinzufügen. Lassen Sie uns weitermachen und herausfinden, wie wir unser Add-On auf die Website app.testproject.io hochladen können.

Hochladen unseres Add-ons auf die TestProject-Website

Bevor wir unsere Webelement-Aktion in unseren Testklassen oder in unseren aufgezeichneten Tests verwenden können, müssen wir unsere Aktionen in eine JAR-Datei packen und diese Datei auf die Website app.testproject.io hochladen.

Wenn die hochgeladene JAR-Datei Webelement-Aktionen enthält (Klassen, die die WebElementAction Schnittstelle), müssen wir den Elementtyp jeder Webelementaktion konfigurieren, wenn wir die Aktionen überprüfen, die in der hochgeladenen JAR-Datei (unser Addon) gefunden wurden. Wir können den Elementtyp einer Webelementaktion konfigurieren, indem wir in der Spalte „Elementtypen“ auf den Link „Auswählen“ klicken.

Die folgende Abbildung veranschaulicht das Layout des modalen Dialogfelds „Aktionen überprüfen“:

Wenn wir auf den Link „Auswählen“ klicken, öffnet die Website app.testproject.io den modalen Dialog „Elementtypen auswählen“. Wir können jetzt entweder den richtigen Elementtyp auswählen, indem wir das Kombinationsfeld „Elementtypen“ verwenden, oder wir können ein neues Element nach Typ erstellen, indem wir auf den Link „Elementtyp erstellen“ klicken. Nehmen wir an, wir müssen einen neuen Elementtyp für unsere Webelement-Aktion erstellen.