Automatisieren und Testen von WebView2-Apps mit dem Microsoft Edge WebDriver

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 alle Bibliotheken, Frameworks und Programmiersprachen verwenden, die WebDriver unterstützen. 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 den Microsoft Edge WebDriver verwenden. Microsoft Edge WebDriver ist Microsofts Implementierung des W3C-WebDriver-Protokolls . Das W3C-WebDriver-Protokoll ermöglicht es Programmen, das Verhalten von Webbrowsern zu steuern.

Testautoren schreiben Tests, die WebDriver-Befehle verwenden, um den Browser anzuweisen, 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 der Microsoft Edge-Browser- und WebView2-Apps.

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

Schritt 1: Herunterladen des WebView2API-Beispiels

Wenn Sie über kein WebView2-Projekt verfügen, klonen Sie das WebView2Samples-Repository, um die WebView2API-Beispiel-App herunterzuladen. Dieses spezielle Beispiel innerhalb des größeren Repositorys ist ein umfassendes Beispiel für das neueste 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. Sie 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 Auffinden der neuesten WebView2 SDK-Version finden Sie in den Versionshinweisen zu WebView2 SDKs.

  • 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 den Microsoft Edge-WebDriver installiert. Beginnen Sie als Nächstes wie folgt mit der Verwendung von Selenium.

  1. Beginnen Sie, indem Sie ein neues C# .NET Framework Projekt in Visual Studio erstellen. Wählen Sie in der unteren rechten Ecke "Weiter " aus, um fortzufahren.

    Erstellen eines neuen Projekts

  2. Geben Sie Ihrem Projekt einen Projektnamen, speichern Sie es an Ihrem bevorzugten Speicherort, und wählen Sie dann Erstellen aus.

    Neues Projekt konfigurieren

    Ein neues Projekt wird erstellt, wobei der gesamte Code in der Program.cs Datei platziert wird.

    Neues Projekt

  3. Fügen Sie als Nächstes Selenium zum Projekt hinzu. Installieren Sie Selenium mithilfe des NuGet-Pakets Selenium.WebDriver wie folgt. Um das NuGet-Paket Selenium.WebDriver herunterzuladen, wählen Sie in Visual StudioNuGet-Pakete> verwalten aus.

  4. Wählen Sie die Registerkarte "Durchsuchen " aus. Der folgende Bildschirm wird angezeigt.

    NuGet-Paket herunterladen

  5. Wählen Sie in der Dropdownliste Paketquelledie Option nuget.org aus.

  6. Aktivieren Sie das Kontrollkästchen Vorabversion einschließen .

  7. Geben Sie Selenium.WebDriver etwas in die Suchleiste ein, und wählen Sie dann Selenium.WebDriver aus den Ergebnissen aus.

  8. Stellen Sie im Detailfenster auf der rechten Seite sicher, dass die Versionauf 4.0.0 oder höher festgelegt ist, und wählen Sie dann Installieren aus. NuGet lädt Selenium auf Ihren Computer herunter.

    Verwalten von NuGet-Paketen

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

  9. 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 jetzt 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 "Launch"-Ansatz oder den "Attach"-Ansatz verwenden.

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

Entscheiden Sie, ob Selenium so konfiguriert werden soll, dass WebView2 gesteuert wird, indem Sie den Ansatz "Starten" oder "Anhängen" verwenden.

  • Der "Start"-Ansatz: In einigen Szenarien ist es angebracht, Microsoft Edge WebDriver das Starten Ihrer WebView2-App zu überlassen. Microsoft Edge WebDriver startet Ihre WebView2-App und fügt automatisch eine Anfügung an die erste verfügbare WebView2-Instance an, die Ihre App erstellt.

  • Der Ansatz "Anfügen": In anderen Szenarien ist es angemessen, Microsoft Edge WebDriver an eine ausgeführte WebView2-Instance anzuhängen. 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 "Anfügen" gilt für eine WebView2-App, die nicht mit dem Ansatz "Launch" kompatibel ist.

Ansatz 1: Microsoft Edge WebDriver können Ihre WebView2-App starten

Wenn Sie über eine einfache App verfügen, die eine einzelne WebView2-Instance erstellt und diese Instance sofort nach dem Start aktiv ist, können Sie den "Launch"-Ansatz verwenden; verwenden Sie Schritt 4a: Microsoft Edge WebDriver können Ihre WebView2-App starten.

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 in das obige "Start"-Szenario passt, sollten Sie Microsoft Edge WebDriver an eine ausgeführte WebView2-Instance anfügen (anstatt Microsoft Edge WebDriver den WebView2-Start 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 in das "Start"-Szenario passen, sind:

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

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

Unabhängig davon, ob Sie den Ansatz "Starten" oder "Anhängen" 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 "Start" und "Anhängen".

Sobald Sie diese ersten Schritte abgeschlossen haben, um entweder eine App zu starten oder an eine WebView2-Instance anzufügen, können Sie alle unterstützten WebDriver-Befehle verwenden, um mit dieser WebView2-Instance zu interagieren.

Schritt 4a: Starten der 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 diese 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 steuern Sie WebView2 mit Selenium und Microsoft Edge WebDriver:

  1. Erstelle ein EdgeOptions Objekt, indem du den folgenden Code kopierst und einfügst:

    static void Main(string[] args)
    {
       EdgeOptions eo = new EdgeOptions();
    

    Als Nächstes fügen wir Code hinzu, der Folgendes bewirkt:

    • Konfigurieren Sie die Instance für die Verwendung von EdgeOptions WebView2, indem Sie die UseWebView Option auf truefestlegen.
    • Auf den Dateipfad Ihrer WebView2-App-Binärdatei festlegen eo.BinaryLocation .
    • Erstellen Sie ein EdgeDriver Objekt mithilfe der EdgeOptions Instance.
  2. 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);
    
  3. Geben Sie im Code oben den korrekten Dateipfad Ihrer Projektlaufzeit und der Microsoft Edge WebDriver-Laufzeit auf Ihrem Computer an.

    EdgeDriver wurde nun so konfiguriert, dass WebView2 in Ihrem Projekt gesteuert wird. Wenn Sie beispielsweise das WebView2API-Beispiel verwenden, kann Ihr Code jetzt durch Ausführen des e.Url = @"https://www.microsoft.com"; Befehls aufgerufen https://microsoft.com werden, wie in der nächsten Codeauflistung gezeigt.

  4. Stellen Sie sicher, dass Selenium WebView2 steuern kann. Legen Sie dazu einen Haltepunkt auf der Linie 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();
    }
    

    Selenium mit WebView2

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

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

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

In diesem Abschnitt wird erläutert, wie Sie den 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 die Navigation durch eine native Benutzeroberfläche erfordert, 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 GUI ausführen müssen, um das WebView2-Steuerelement zu starten. Als Lösung müssen Sie in 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 navigieren müssen, starten Sie Ihre App mit einer anderen Methode als Microsoft Edge WebDriver, z. B. einem Befehlszeilenskript oder einem separaten Tool wie WinAppDriver. Nachdem der App-Prozess gestartet wurde, lösen Sie die WebView2-Instanziierung aus und fügen dann den Microsoft Edge WebDriver an die ausgeführte WebView2-Instance an.

Microsoft Edge WebDriver verarbeitet keine systemeigene Benutzeroberflächenautomatisierung, aber hier sind einige andere Ansätze, um durch die systemeigene Benutzeroberfläche zu navigieren und die WebView2-Instance anzuzeigen, die Sie automatisieren:

  • Windows Application Driver (WinAppDriver) ist ein Dienst zur Unterstützung der Selenium-ähnlichen UI-Testautomatisierung in Windows-Anwendungen. Dieser Dienst unterstützt das Testen von Apps mit Universeller Windows-Plattform (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF) und klassischen Windows (Win32) auf Windows 10-PCs.

  • Direktes Verwenden der nativen Benutzeroberflächenautomatisierung von Microsoft. Das Microsoft Benutzeroberflächenautomatisierung-Framework ermöglicht die Interaktion automatisierter Testskripts mit der Benutzeroberfläche. Microsoft Benutzeroberflächenautomatisierung ermöglicht Windows-Anwendungen das Bereitstellen und Nutzen programmgesteuerter Informationen über Benutzeroberflächen (UIs). Es bietet programmgesteuerten Zugriff auf die meisten Benutzeroberflächenelemente auf dem Desktop. Sie ermöglicht es Hilfstechnologieprodukten wie Sprachausgaben, Endbenutzern Informationen über die Benutzeroberfläche bereitzustellen und die Benutzeroberfläche mithilfe von Standardeingaben und anderen Mitteln als der Standardeingabe zu bearbeiten.

  • Verwenden Sie ein Flag wie einen Befehlszeilenparameter oder eine Umgebungsvariable, um Ihre App anzuweisen, direkt in der WebView2-Instance zu starten, damit die Navigation in der nativen Benutzeroberfläche nicht erforderlich ist. Je nach Ihrem Szenario kann es möglich sein, den Ansatz "Start" zu verwenden, der in Schritt 4a beschrieben wird: Zulassen, dass Microsoft Edge WebDriver Ihre WebView2-App startet.

Zusätzlich zur Aktivierung der WebView2-Instance müssen Sie ihren --remote-debugging-port Befehlszeilenparameter festlegen. Wir werden dies in den folgenden Schritten tun. Microsoft Edge WebDriver verwendet diesen Remotedebuggingport, um eine Verbindung mit Ihrer WebView2-instance herzustellen.

Starten der WebView2-App mit aktiviertem Remotedebugging

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

  1. Konfigurieren Sie Ihre WebView2-Instance mit dem --remote-debugging-port=<port> zusätzlichen Befehlszeilenparameter unter Verwendung eines der empfohlenen Ansätze in Globals, in WebView2 Win32 C++-Referenz. Wählen Sie eine verfügbare Portnummer für diesen Parameter aus.

  2. 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 den Microsoft Edge WebDriver an die gestartete WebView2-App an.

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

  1. Verwenden Sie die EdgeOptions.DebuggerAddress Eigenschaft, um Microsoft Edge WebDriver anzuweisen, eine Verbindung mit dem zuvor angegebenen Remotedebuggingport herzustellen, anstatt eine neue Anwendung zu starten:
EdgeOptions eo = new EdgeOptions();
eo.UseWebView = true;
eo.DebuggerAddress = "localhost:9222";
EdgeDriver e = new EdgeDriver(eo);

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

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

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

  1. 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 in Wechseln zu einem Vorschaukanal zum Testen anstehender APIs und Features.

    Einstellungen für UWP-App

  2. Nachdem Sie die UWP WebView2-App gestartet haben, wechseln Sie zu http://<Device Portal URL>/msedge. Der folgende Screenshot zeigt localhost:50080/msedgez. B.:

    Prozess-ID einer ausgeführten UWP-App

  3. Beachten Sie den Hinweis browserProcessId für den WebView2-Prozess, an den Sie den Microsoft Edge WebDriver anfügen möchten. Der obige Screenshot zeigt z. B. die browserProcessId Datei as 47860.

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

    • wdpAddress ist als Geräteportal-URL definiert.
    • wdpProcessId ist definiert als der Wert, den browserProcessId Sie 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 den Microsoft Edge WebDriver erfolgreich an eine ausgeführte WebView2-App angefügt.

UWP-Projekte und Debugging

Um die Debugeinstellungen beim Start zu konfigurieren, 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 aktiviert, solange diese Umgebungsvariable konfiguriert ist.

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

Siehe auch