Kommentare 0

PageObject: Ein Entwurfsmuster für die Testautomatisierung in wenigen Worten erklärt

Hallo!

Eine Anwendung hat Elemente, mit denen Benutzer interagieren.

Eine Klasse einer objektorientierten Sprache hat Attribute und Methoden.

Verwende Attribute in einer PageObject-Klasse, um als Testautomatisierer Selektoren zu definieren, um Elemente der Benutzeroberfläche zu lokalisieren, und verwende Methoden, um die Interaktion des Benutzers mit diesen Elementen zu beschreiben.

Beschreibe auf diese Weise alle Anwendungs-Templates. Beispiele für Anwendungs-Templates sind zum Beispiel die Startseite, Produktkategorieseite, Produktdetailseite, Warenkorbseite und Anmeldeseite eines Onlineshops. Aber auch auf jeder Seite wiederholte Templates können in PageObject-Klassen beschrieben werden, wie Kopf- oder Fußzeilen.

Sehen wir uns einmal eine Standard-Anmeldeseite an. Eine Anmeldeseite besteht aus dem Benutzer-ID-Eingabefeld, dem Kennwort-Eingabefeld, der Anmeldeschaltfläche und einem Container zum Anzeigen von Fehlermeldungen. Diese Elemente haben Selektoren, die in Attributen einer PageObject-Klasse angegeben werden und wie folgt aussehen könnten:

class LoginPage extends BasePageObject
{
    public static $userIdInputField = ['css' => '.input-userid'];
    public static $passwordInputField = ['css' => '.input-password'];
    public static $loginButton = ['css' => '.button-login'];
    public static $messageContainer = ['css' => '#container-login .message'];
[...]

Jetzt kann der Benutzer mit diesen Elementen mit Methoden interagieren: Gib eine Benutzer-ID ein, gib ein Passwort ein, drücke die Anmeldeschaltfläche und schaue, ob eine Fehlermeldung angezeigt wird:

[...]
    public function open(): LoginPage
    [...]

    public function enterUserId(string $userId): LoginPage
    {
        $this->tester->waitForElementVisible(static::$userIdInputField);
        $this->tester->fillField(static::$userIdInputField, $userId);
        return $this;
    }

    public function enterPassword(string $password): LoginPage
    [...]

    public function clickLoginButton(): LoginPage
    [...]

    public function seeMessage: string
    {
        return $this->tester->grabTextFrom(static::messageContainer);
    }
}

Ein Testfall für die Anmeldeseite kann nun ein Objekt der Klasse PageObject instanziieren und die Methoden verwenden, um die Schritte des Testfalls auszuführen und eine Behauptung aufzustellen:

public function
testThatAnIncorrectPasswordCausesAnErrorMessage(AcceptanceTester $I, LoginPage $loginPage)
{
    $loginPage->open()
        ->enterUserId('mira.bellenbaum')
        ->enterPassword('WrongPassword123!')
        ->clickLoginButton();
    $I->assertEquals(Translation::trans('The user ID or password has not been entered correctly.'), $loginPage->seeErrorMessage());
}

Was sind die Vorteile des PageObject-Entwurfsmusters?

  1. Wenn du die Methodennamen der PageObject-Klasse mit Bedacht gewählt hast, kannst du den Testfall in natürlicher Sprache lesen.
  2. Die technische Umsetzung ist im PageObject gekapselt, wie zum Beispiel das Warten darauf, dass ein Element sichtbar wird.
  3. Die Selektoren für die Elemente werden nur an einer Stelle definiert.

Angenommen, ein Selektor ändert sich später. Zum Beispiel wird der Login-Button, der früher ein Link war, nun zu einem Button. In diesem Fall musst du nur den Selektor im PageObject anpassen, und schon sind alle Testfälle angepasst, die diese Schaltfläche verwenden.

Habe ich dich davon überzeugt, das PageObject-Entwurfsmuster zu verwenden?

Viel Spaß beim Testen und Entwickeln!

Schreibe eine Antwort