Automatisieren und Testen von WebView2-Apps mit Microsoft Edge WebDriver

Artikel
05/27/2023

In diesem Artikel wird erläutert, wie Sie Ihre WebView2-App mit Microsoft Edge WebDriver automatisieren und testen, indem Sie das Selenium-Framework für die Browsertestautomatisierung verwenden.

Dieser Artikel enthält Anweisungen zur Verwendung des Selenium-Frameworks und von C#. Sie können jedoch jede Bibliothek, jedes Framework und jede Programmiersprache verwenden, die WebDriver unterstützt. Um die gleichen Aufgaben mit einem anderen WebDriver-Testframework als Selenium auszuführen, lesen Sie die offizielle Dokumentation für das Framework Ihrer Wahl.

Um automatisierte Tests zu erstellen, die Benutzerinteraktionen für Ihre WebView2-App simulieren, können Sie Microsoft Edge WebDriver verwenden. Microsoft Edge WebDriver ist die Implementierung des W3C WebDriver-Protokolls von Microsoft. Mit dem W3C WebDriver-Protokoll können Programme das Verhalten von Webbrowsern steuern.

Testautoren schreiben Tests, die WebDriver-Befehle verwenden, um den Browser anweisen, bestimmte Aktionen auszuführen. Microsoft Edge WebDriver empfängt diese Befehle und fordert dann den Browser auf, die angeforderte Aktion auszuführen. Microsoft Edge WebDriver unterstützt die Automatisierung sowohl des Microsoft Edge-Browsers als auch der WebView2-Apps.

Informationen zur Beziehung zwischen dem WebDriver-Protokoll, Microsoft Edge WebDriver als Implementierung dieses Protokolls und dem Selenium-Testframework finden Sie unter Übersicht über WebDriver.

Schritt 1: Herunterladen des WebView2API-Beispiels

Wenn Sie noch kein WebView2-Projekt haben, klonen Sie das WebView2Samples-Repository, um die WebView2API-Beispiel-App herunterzuladen. Dieses spezielle Beispiel innerhalb des größeren Repositorys ist ein umfassendes Beispiel des neuesten WebView2 SDK. Stellen Sie sicher, dass Sie die Voraussetzungen für die WebView2API-Beispiel-App erfüllt haben.

Nachdem Sie das Repository geklont haben, erstellen Sie das Projekt in Visual Studio. Es sollte wie in der folgenden Abbildung aussehen.

WebView2API-Beispiel-App

Schritt 2: Installieren von Microsoft Edge WebDriver

Befolgen Sie die Anweisungen zum Installieren von Microsoft Edge WebDriver. Microsoft Edge WebDriver ist der browserspezifische Treiber, der von Selenium zum Automatisieren und Testen von WebView2 benötigt wird.

Stellen Sie sicher, dass die Version von Microsoft Edge WebDriver mit der Version der WebView2-Runtime übereinstimmt, die Ihre App verwendet. Damit das WebView2API-Beispiel funktioniert, stellen Sie sicher, dass Ihre Version der WebView2-Runtime größer oder gleich der unterstützten Version der neuesten WebView2 SDK-Version ist.

Informationen zum aktuellen WebView2 SDK-Release finden Sie in den Versionshinweisen für das WebView2 SDK.
Um herauszufinden, über welche Version der WebView2-Runtime Sie derzeit verfügen, wechseln Sie zu edge://settings/help.

Schritt 3: Hinzufügen von Selenium zum WebView2API-Beispiel

Zu diesem Zeitpunkt haben Sie die WebView2-Runtime installiert, ein WebView2-Projekt erstellt und Microsoft Edge WebDriver installiert. Beginnen Sie als Nächstes mit der Verwendung von Selenium wie folgt.

Erstellen Sie zunächst ein neues C#-.NET Framework-Projekt in Visual Studio. Wählen Sie in der unteren rechten Ecke Weiter aus, um den Vorgang fortzusetzen.
Geben Sie Ihrem Projekt einen Projektnamen, speichern Sie es an Ihrem bevorzugten Speicherort, und wählen Sie dann Create aus.

Ein neues Projekt wird erstellt, wobei der gesamte Code in der Program.cs Datei platziert wird.
Fügen Sie selenium als Nächstes dem Projekt hinzu. Installieren Sie Selenium mithilfe des Selenium.WebDriver NuGet-Pakets wie folgt. Klicken Sie in Visual Studio auf Projekt>NuGet-Pakete verwalten, um das NuGet-Paket Selenium.WebDriver herunterzuladen.
Wählen Sie die Registerkarte Durchsuchen aus. Der folgende Bildschirm wird angezeigt.
Wählen Sie in der Dropdownliste Paketquelledie Option nuget.org aus.
Aktivieren Sie das Kontrollkästchen Vorabversion einschließen .
Geben Sie Selenium.WebDriver in die Search leiste ein, und wählen Sie dann Selenium.WebDriver aus den Ergebnissen aus.
Stellen Sie im Detailfenster auf der rechten Seite sicher, dass die Version auf 4.0.0 oder höher festgelegt ist, und wählen Sie dann Installieren aus. NuGet lädt Selenium auf Ihren Computer herunter.

Weitere Informationen zum Selenium.WebDriver-NuGet-Paket finden Sie unter Selenium.WebDriver.

Verwenden Sie OpenQA.Selenium.Edge , indem Sie die -Anweisung using OpenQA.Selenium.Edge; am Anfang der Datei Program.cshinzufügen:

using OpenQA.Selenium.Edge;

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

Sie haben nun ein leeres Visual Studio-Projekt eingerichtet, das für Selenium-Tests geeignet ist. Konfigurieren Sie als Nächstes Selenium, um WebView2 zu steuern, indem Sie entweder den Ansatz "launch" oder den Ansatz "attach" verwenden.

Schritt 4: Auswählen, ob Microsoft Edge WebDriver Ihre App starten oder an sie anfügen soll

Entscheiden Sie, ob Selenium so konfiguriert werden soll, dass WebView2 mithilfe des "Launch"- oder "Attach"-Ansatzes betrieben wird.

Der "Start"-Ansatz: In einigen Szenarien empfiehlt es sich, Microsoft Edge WebDriver das Starten Ihrer WebView2-App zu überlassen. Microsoft Edge WebDriver startet Ihre WebView2-App und fügt automatisch an die erste verfügbare WebView2-instance an, die Ihre App erstellt.
Der Ansatz "anfügen": In anderen Szenarien empfiehlt es sich, Microsoft Edge WebDriver an eine ausgeführte WebView2-instance anzufügen. Sie starten Ihre App außerhalb von Microsoft Edge WebDriver und fügen dann Microsoft Edge WebDriver an eine ausgeführte WebView2-instance an. Dieser Ansatz zum Anfügen gilt für eine WebView2-App, die nicht mit dem Startansatz kompatibel ist.

Ansatz 1: Starten Ihrer WebView2-App durch Microsoft Edge WebDriver

Wenn Sie über eine einfache App verfügen, die eine einzelne WebView2-instance erstellt und instance sofort nach dem Start aktiv ist, können Sie den Startansatz verwenden. Verwenden Sie Schritt 4a: Zulassen, dass Microsoft Edge WebDriver Ihre WebView2-App starten kann.

In diesem Szenario gibt es eine WebView2-instance, die beim Start verfügbar ist, ohne durch eine native Benutzeroberfläche navigieren zu müssen.

Ansatz 2: Anfügen von Microsoft Edge WebDriver an eine ausgeführte WebView2-App

Wenn Sie eine Situation haben, die nicht zum oben genannten "Start"-Szenario passt, sollten Sie Microsoft Edge WebDriver an eine ausgeführte WebView2-instance anfügen (anstatt Microsoft Edge WebDriver das Starten von WebView2 verarbeiten zu lassen). Verwenden Sie Schritt 4b: Anfügen von Microsoft Edge WebDriver an eine ausgeführte WebView2-App.

Einige Beispiele für Szenarien, die nicht zum "Start"-Szenario passen, sind:

Sie müssen durch eine native Benutzeroberfläche navigieren, bevor die WebView2-instance erstellt wird.
Ihre App erstellt mehrere WebView2-Instanzen, und Sie möchten an eine bestimmte instance anfügen.

In solchen Szenarien wird empfohlen, eine bestimmte instance von WebView2 anzufügen, da das Starten Ihrer WebView2-App durch Microsoft Edge WebDriver nur für relativ einfache Szenarien geeignet ist. Wenn Microsoft Edge WebDriver Ihre App startet, wird sie automatisch an die erste erstellte WebView2-instance angefügt und schlägt fehl, wenn kein WebView2-instance gefunden wird.

Unabhängig davon, ob Sie den Ansatz "Starten" oder "Anfügen" verwenden, müssen Sie Microsoft Edge WebDriver herunterladen und sicherstellen, dass die Version mit der Version der WebView2-Runtime übereinstimmt, die Ihre App verwendet. Die ersten Schritte zum Konfigurieren Ihres WebDriver-Frameworks (z. B. Selenium) unterscheiden sich zwischen den Ansätzen "launch" und "attach".

Nachdem Sie diese ersten Schritte zum Starten einer App oder zum Anfügen an eine WebView2-instance abgeschlossen haben, können Sie alle unterstützten WebDriver-Befehle verwenden, um mit diesem WebView2-instance zu interagieren.

Schritt 4a: Starten Ihrer WebView2-App durch Microsoft Edge WebDriver

Verwenden Sie diesen "Start"-Ansatz, wenn Sie über eine einfache App verfügen, die eine einzelne WebView2-instance erstellt und instance sofort nach dem Start aktiv ist. In diesem Szenario gibt es eine WebView2-instance, die beim Start verfügbar ist, ohne durch eine native Benutzeroberfläche navigieren zu müssen.

So fahren Sie WebView2 mit Selenium und Microsoft Edge WebDriver:

Create ein EdgeOptions Objekt, indem Sie den folgenden Code kopieren und einfügen:
```
static void Main(string[] args)
{
   EdgeOptions eo = new EdgeOptions();
```
Als Nächstes fügen wir Code hinzu, der Folgendes ausführt:
- Konfigurieren Sie die EdgeOptions instance für die Verwendung von WebView2, indem Sie die UseWebView Option auf truefestlegen.
- Legen Sie auf den Dateipfad Ihrer WebView2-App-Binärdatei fest eo.BinaryLocation .
- Create ein EdgeDriver Objekt mithilfe des EdgeOptions instance.

Kopieren Sie den folgenden Code, und fügen Sie ihn unterhalb der eo Deklarationszeile ein:

//Set the EdgeOptions instance to use WebView2
eo.UseWebView = true;

//Set the BinaryLocation to the filepath of the WebView2API Sample runtime
eo.BinaryLocation = @"C:\path\to\your\webview2\project.exe";
EdgeDriver e = new EdgeDriver(eo);

Geben Sie im obigen Code den richtigen Dateipfad ihrer Projektlaufzeit und der Microsoft Edge WebDriver-Runtime auf Ihrem Computer an.

EdgeDriver wurde nun so konfiguriert, dass webView2 in Ihrem Projekt angetrieben wird. Wenn Sie beispielsweise das WebView2API-Beispiel verwenden, kann Ihr Code nun zu https://microsoft.com wechseln, indem Sie den e.Url = @"https://www.microsoft.com"; Befehl ausführen, wie im nächsten Codeeintrag gezeigt.
Vergewissern Sie sich, dass Selenium WebView2 steuern kann. Legen Sie dazu einen Haltepunkt in der Zeile e.Url = @"https://www.microsoft.com";fest, und führen Sie dann das Projekt aus.
```
   //Navigate the WebView2API Sample from bing.com to microsoft.com
   e.Url = @"https://www.microsoft.com";

   //Exit Microsoft Edge WebDriver
   e.Quit();
}
```

Herzlichen Glückwunsch! Sie haben erfolgreich ein WebView2-Projekt automatisiert und WebView2 mithilfe von Selenium und Microsoft Edge WebDriver gemäß dem Startansatz gesteuert.

Dies ist das Ende des Artikels, wenn Sie den Ansatz "launch" verwenden.

Schritt 4b: Anfügen von Microsoft Edge WebDriver an eine ausgeführte WebView2-App

In diesem Abschnitt wird erläutert, wie Sie Microsoft Edge WebDriver an eine bereits ausgeführte WebView2-instance anfügen. Wenn Sie nicht nur über eine einzelne WebView2-instance verfügen oder Ihre WebView2-instance durch eine native Benutzeroberfläche navigieren muss, verwenden Sie diesen Abschnitt und Ansatz.

Ein Problem besteht darin, dass Sie zum Automatisieren einer WebView2-basierten App manchmal zuerst einige Aktionen in der nativen GRAFISCHEn Benutzeroberfläche ausführen müssen, um das WebView2-Steuerelement zu starten. Als Lösung müssen Sie auf der nativen Benutzeroberfläche außerhalb von Microsoft Edge WebDriver navigieren und irgendwie sicherstellen, dass die WebView2-instance wie folgt angezeigt wird.

In diesem Szenario, in dem Sie über eine native Benutzeroberfläche zum Navigieren verfügen, starten Sie Ihre App mit einer anderen Methode als Microsoft Edge WebDriver, z. B. einem Befehlszeilenskript oder einem separaten Tool wie WinAppDriver. Nachdem Ihr App-Prozess gestartet wurde, lösen Sie die WebView2-Instanziierung aus und fügen Microsoft Edge WebDriver an die ausgeführte WebView2-instance an.

Microsoft Edge WebDriver behandelt keine native Benutzeroberflächenautomatisierung, aber hier sind einige andere Ansätze, um in der nativen Benutzeroberfläche zu navigieren und die WebView2-instance anzuzeigen, die Sie automatisieren:

Der Windows-Anwendungstreiber (WinAppDriver) ist ein Dienst zur Unterstützung der Selenium-ähnlichen Benutzeroberflächentestautomatisierung in Windows-Anwendungen. Dieser Dienst unterstützt das Testen von Universelle Windows-Plattform (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF) und klassischen Windows-Apps (Win32) auf Windows 10 PCs.
Direkte Verwendung der nativen Benutzeroberflächenautomatisierung von Microsoft. Das Microsoft Benutzeroberflächenautomatisierung Framework ermöglicht automatisierte Testskripts die Interaktion mit der Benutzeroberfläche. Mit Microsoft Benutzeroberflächenautomatisierung können Windows-Anwendungen programmgesteuerte Informationen zu Benutzeroberflächen bereitstellen und nutzen. Sie bietet programmgesteuerten Zugriff auf die meisten Benutzeroberflächenelemente auf dem Desktop. Es ermöglicht Hilfstechnologieprodukten, z. B. Sprachausgaben, Endbenutzern Informationen über die Benutzeroberfläche bereitzustellen und die Benutzeroberfläche durch Standardeingaben und mit anderen Mitteln als standardeingaben zu bearbeiten.
Verwenden Sie ein Flag, z. B. einen Befehlszeilenparameter oder eine Umgebungsvariable, um Ihre App anzuweisen, direkt mit dem WebView2-instance zu starten, um zu vermeiden, dass die native Benutzeroberfläche navigiert werden muss. Abhängig von Ihrem Szenario kann dies die Verwendung des in Schritt 4a: Zulassen des Startens Ihrer WebView2-App durch Microsoft Edge WebDriver beschriebenen Ansatz ermöglichen.

Zusätzlich zur Aktivierung der WebView2-instance müssen Sie den Befehlszeilenparameter --remote-debugging-port festlegen. Dies wird in den folgenden Schritten ausgeführt. Microsoft Edge WebDriver verwendet diesen Remotedebugport, um eine Verbindung mit Ihrem WebView2-instance herzustellen.

Starten der WebView2-App mit aktiviertem Remotedebuggen

Der nächste Schritt erfolgt, wenn Sie Ihre App codieren. Sie müssen diesen zusätzlichen Befehlszeilenparameter angeben, wenn Sie Ihr WebView2-Steuerelement instanziieren. Aktivieren Sie das Remotedebuggen wie folgt.

Konfigurieren Sie Ihre WebView2-instance mit dem --remote-debugging-port=<port> zusätzlichen Befehlszeilenparameter, indem Sie einen der empfohlenen Ansätze in Globals in WebView2 Win32 C++-Referenz verwenden. Wählen Sie eine verfügbare Portnummer für diesen Parameter aus.
Starten Sie Ihre App. Wie Sie Ihre App starten, hängt davon ab, welche anderen nativen UI-Testtools Sie verwenden.

An diesem Punkt wird Ihre App ausgeführt, und ihr --remote-debugging-port Befehlszeilenparameter wurde festgelegt. Als Nächstes fügen wir Microsoft Edge WebDriver an die gestartete WebView2-App an.

Anfügen von Microsoft Edge WebDriver an die gestartete WebView2-App

Verwenden Sie die EdgeOptions.DebuggerAddress -Eigenschaft, um Microsoft Edge WebDriver anweisen, eine Verbindung mit dem zuvor angegebenen Remotedebugport herzustellen, anstatt eine neue Anwendung zu starten:

EdgeOptions eo = new EdgeOptions();
eo.UseWebView = true;
eo.DebuggerAddress = "localhost:9222";
EdgeDriver e = new EdgeDriver(eo);

Oben localhost:9222 sollte die in dieser Zeile angegebene Portnummer mit der Portnummer übereinstimmen, die Sie bei der Einstellung --remote-debugging-port oben ausgewählt haben.

Weitere Informationen zur DebuggerAddress -Eigenschaft des EdgeOptions -Objekts finden Sie unter EdgeOptions-Objekt.

Fügen Sie für UWP-Apps Microsoft Edge WebDriver mit Remotetools an WebView2 an.

Führen Sie die Schritte unter Remotedebuggen von UWP-Apps mit Remotetools für Microsoft Edge aus.

Dieses WebView2-Feature wird derzeit nur im Canary-Vorschaukanal von Microsoft Edge unterstützt. Legen Sie die Umgebungsvariable WEBVIEW2_RELEASE_CHANNEL_PREFERENCE=1fest, um sicherzustellen, dass die WebView2-Version Canary ist. Weitere Informationen finden Sie unter Festlegen einer Umgebungsvariablen unter Testen anstehender APIs und Features.
Nachdem Sie die UWP WebView2-App gestartet haben, wechseln Sie zu http://<Device Portal URL>/msedge. Der folgende Screenshot zeigt localhost:50080/msedgez. B. :
Notieren Sie sich die browserProcessId für den WebView2-Prozess, an den Sie Microsoft Edge WebDriver anfügen möchten. Der obige Screenshot zeigt z. B. als browserProcessId47860an.

Verwenden Sie in Ihrem Code die wdpAddress Eigenschaften und wdpProcessId , um Microsoft Edge WebDriver anweisen, eine Verbindung mit den Remotetools für Microsoft Edge und dem spezifischen WebView2-Prozess herzustellen.

wdpAddress ist als Geräteportal-URL definiert.
wdpProcessId ist als der Wert definiert, den browserProcessId Sie sich im vorherigen Schritt notiert haben:

EdgeOptions eo = new EdgeOptions();
eo.AddAdditionalEdgeOption("wdpAddress", "localhost:50080");
eo.AddAdditionalEdgeOption("wdpProcessId", 47860);
// Optional user name and password to use when connecting to a Windows Device Portal
// server.  Required if the server has authentication enabled.
// eo.AddAdditionalEdgeOption("wdpUsername", "username");
// eo.AddAdditionalEdgeOption("wdpPassword", "password");
EdgeDriver e = new EdgeDriver(eo);

Weitere Informationen zum Starten einer WebView2-UWP-App mit Remotetools finden Sie unter Remotedebuggen von UWP-Apps mit Remotetools für Microsoft Edge.

Herzlichen Glückwunsch! Sie haben Microsoft Edge WebDriver erfolgreich an eine ausgeführte WebView2-App angefügt.

UWP-Projekte und Debuggen

Zum Konfigurieren der Debugeinstellungen beim Start müssen Sie die Registrierung verwenden, um das Debuggen für alle WebView2-Prozesse beim Start zu aktivieren. Aufgrund der Art und Weise, wie UWP-Projekte gestartet werden, kann das WebDriver2-Steuerelement die Debugeinstellungen beim Start nicht automatisch konfigurieren. Beachten Sie, dass das Festlegen dieses Registrierungsschlüssels die Debugunterstützung für alle gestarteten WebView2-Prozesse ermöglicht, während diese Umgebungsvariable konfiguriert ist.

Sie können Parameter durch Werte überschreiben, die im WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS Registrierungsschlüssel angegeben sind. Informationen zum WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS Registrierungsschlüssels (und der entsprechenden Umgebungsvariablen) finden Sie unter CreateCoreWebView2EnvironmentWithOptions in Globals. Mit dem WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS Registrierungsschlüssels (der auch ein Umgebungsvariablenname ist) können Sie den Befehlszeilenargumenten hinzufügen, die beim Starten an den WebView2 Runtime-Browserprozess übergeben werden.

Siehe auch

Dokumentation zu WebDriver in Selenium : Wie die APIs von Selenium WebView2 oder Microsoft Edge steuert.
Einführung in Microsoft Edge WebView2 : Verwenden des WebView2-Steuerelements zum Einbetten von Webinhalten in Ihre native App.
Verwenden Sie WebDriver für die Testautomatisierung – Automatisieren von Microsoft Edge.