Partilhar via

Automatizar e testar aplicações WebView2 com o Microsoft Edge WebDriver

  • Artigo

Este artigo explica como automatizar e testar a sua aplicação WebView2 com o Microsoft Edge WebDriver através da arquitetura Selenium para automatização de testes do browser.

Este artigo fornece instruções para utilizar a arquitetura Selenium e C#, mas pode utilizar qualquer biblioteca, arquitetura e linguagem de programação que suporte o WebDriver. Para realizar as mesmas tarefas com uma arquitetura de teste do WebDriver que não o Selenium, consulte a documentação oficial da sua estrutura de eleição.

Para criar testes automatizados que simulam interações do utilizador para a sua aplicação WebView2, pode utilizar o Microsoft Edge WebDriver. O Microsoft Edge WebDriver é a implementação do protocolo W3C WebDriver pela Microsoft. O protocolo W3C WebDriver permite que os programas controlem o comportamento dos browsers.

Os autores de testes escrevem testes que utilizam comandos do WebDriver para indicar ao browser para executar ações específicas. O Microsoft Edge WebDriver recebe estes comandos e, em seguida, pede ao browser para executar a ação pedida. O Microsoft Edge WebDriver suporta a automatização do Browser Microsoft Edge e das aplicações WebView2.

Para a relação entre o protocolo WebDriver, o Microsoft Edge WebDriver como uma implementação desse protocolo e a arquitetura de teste selenium, consulte Descrição geral do WebDriver.

Passo 1: Transferir o Exemplo WebView2API

Se não tiver um projeto WebView2 existente, clone o repositório WebView2Samples para transferir a aplicação De exemplo WebView2API. Esse exemplo específico no repositório maior é um exemplo abrangente do SDK WebView2 mais recente. Certifique-se de que cumpriu os pré-requisitos da aplicação De exemplo WebView2API.

Depois de clonar o repositório, crie o projeto no Visual Studio. Deverá ter o seguinte aspeto.

WebView2API Sample app (Aplicação de exemplo WebView2API)

Passo 2: Instalar o Microsoft Edge WebDriver

Siga as instruções para instalar o Microsoft Edge WebDriver. O Microsoft Edge WebDriver é o controlador específico do browser exigido pela Selenium para automatizar e testar o WebView2.

Certifique-se de que a versão do Microsoft Edge WebDriver corresponde à versão do WebView2 Runtime que a sua aplicação utiliza. Para que o Exemplo WebView2API funcione, certifique-se de que a sua versão do WebView2 Runtime é maior ou igual à versão suportada da versão mais recente do SDK WebView2.

  • Para localizar a versão mais recente do SDK WebView2, veja Notas de Versão do SDK WebView2.

  • Para saber que versão do WebView2 Runtime tem atualmente, aceda a edge://settings/help.

Passo 3: Adicionar Selenium ao Exemplo WebView2API

Por esta altura, instalou o WebView2 Runtime, criou um projeto WebView2 e instalou o Microsoft Edge WebDriver. Em seguida, comece a utilizar o Selenium, da seguinte forma.

  1. Comece por criar um novo projeto C# .NET Framework no Visual Studio. Selecione Seguinte no canto inferior direito para continuar.

    Criar um novo projeto

  2. Atribua um Nome de projeto ao projeto, guarde-o na sua Localização preferida e, em seguida, selecione Criar.

    Configurar o novo projeto

    É criado um novo projeto, com todo o código colocado no Program.cs ficheiro.

    Novo projeto

  3. Em seguida, adicione Selenium ao projeto; instale o Selenium com o pacote NuGet Selenium.WebDriver da seguinte forma. Para transferir o pacote NuGet Selenium.WebDriver, no Visual Studio, selecioneGerir Pacotes NuGetdo Project>.

  4. Selecione o separador Procurar. É apresentado o ecrã seguinte.

    Transferir o pacote NuGet

  5. Na lista pendente Origem do pacote, selecione nuget.org.

  6. Selecione a caixa de verificação Incluir pré-lançamento .

  7. Escreva Selenium.WebDriver na Barra de pesquisa e, em seguida, selecione Selenium.WebDriver nos resultados.

  8. Na janela de detalhes à direita, certifique-se de que a Versão está definida como 4.0.0 ou posterior e, em seguida, selecione Instalar. O NuGet transfere o Selenium para o seu computador.

    Gerenciar Pacotes do NuGet

    Para saber mais sobre o pacote NuGet Selenium.WebDriver, consulte Selenium.WebDriver.

  9. Utilize OpenQA.Selenium.Edge ao adicionar a instrução using OpenQA.Selenium.Edge; no início do ficheiro Program.cs:

    using OpenQA.Selenium.Edge;

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

Configurou agora um projeto vazio do Visual Studio adequado para testes selenium. Em seguida, configure o Selenium para conduzir o WebView2 através da abordagem "iniciar" ou da abordagem "anexar".

Passo 4: escolher se o Microsoft Edge WebDriver deve iniciar a sua aplicação ou anexar à mesma

Decida se pretende configurar o Selenium para conduzir o WebView2 com a abordagem "iniciar" ou "anexar".

  • A abordagem "iniciar": em alguns cenários, é apropriado permitir que o Microsoft Edge WebDriver processe o lançamento da sua aplicação WebView2. O Microsoft Edge WebDriver inicia a sua aplicação WebView2 e anexa automaticamente à primeira instância webView2 disponível que a sua aplicação cria.

  • A abordagem "anexar": noutros cenários, é adequado anexar o Microsoft Edge WebDriver a uma instância webView2 em execução. Inicie a sua aplicação fora do Microsoft Edge WebDriver e, em seguida, anexe o Microsoft Edge WebDriver a uma instância WebView2 em execução. Esta abordagem de "anexar" destina-se a uma aplicação WebView2 que não é compatível com a abordagem "iniciar".

Abordagem 1: Permitir que o Microsoft Edge WebDriver inicie a sua aplicação WebView2

Se tiver uma aplicação simples que cria uma única instância webView2 e essa instância estiver ativa imediatamente após o lançamento, pode utilizar a abordagem "iniciar"; utilize o Passo 4a: Permitir que o Microsoft Edge WebDriver inicie a sua aplicação WebView2.

Neste cenário, existe uma instância do WebView2 e está disponível após o lançamento, sem ter de navegar por qualquer IU nativa.

Abordagem 2: Anexar o Microsoft Edge WebDriver a uma aplicação WebView2 em execução

Se tiver alguma situação que não se ajuste ao cenário de "iniciação" acima, deve anexar o Microsoft Edge WebDriver a uma instância WebView2 em execução (em vez de permitir que o Microsoft Edge WebDriver processe a iniciação do WebView2); utilize o Passo 4b: Anexar o Microsoft Edge WebDriver a uma aplicação WebView2 em execução.

Alguns exemplos de cenários que não se enquadram no cenário de "iniciação" são:

  • Tem de navegar por alguma IU nativa antes de a instância WebView2 ser criada.
  • A sua aplicação cria várias instâncias webView2 e pretende anexar a uma instância específica.

Nestes cenários, recomendamos anexar a uma instância específica do WebView2, uma vez que fazer com que o WebDriver do Microsoft Edge inicie a sua aplicação WebView2 é apenas para cenários relativamente simples. Quando o WebDriver do Microsoft Edge inicia a sua aplicação, esta é automaticamente anexada à primeira instância webView2 que é criada e falhará se não for encontrada nenhuma instância do WebView2.

Independentemente de utilizar a abordagem "iniciar" ou "anexar", tem de transferir o Microsoft Edge WebDriver e certificar-se de que a versão corresponde à versão do runtime webView2 que a sua aplicação utiliza. Os passos iniciais para configurar a arquitetura do WebDriver (como o Selenium) serão diferentes entre as abordagens "iniciar" e "anexar".

Depois de concluir estes passos iniciais para iniciar uma aplicação ou anexar a uma instância do WebView2, poderá utilizar quaisquer comandos do WebDriver suportados para interagir com essa instância do WebView2.

Passo 4a: Permitir que o Microsoft Edge WebDriver inicie a sua aplicação WebView2

Utilize esta abordagem de "iniciar" se tiver uma aplicação simples que cria uma única instância webView2 e essa instância estiver ativa imediatamente após o lançamento. Neste cenário, existe uma instância do WebView2 e está disponível após o lançamento, sem ter de navegar por qualquer IU nativa.

Para conduzir o WebView2 com o Selenium e o Microsoft Edge WebDriver:

  1. Crie um EdgeOptions objeto ao copiar e colar o seguinte código:

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

    Em seguida, vamos adicionar código que faz o seguinte:

    • Configure a instância para utilizar o EdgeOptions WebView2 ao definir a opção UseWebView como true.
    • Defina eo.BinaryLocation para o caminho de ficheiro do binário da aplicação WebView2.
    • Crie um EdgeDriver objeto com a EdgeOptions instância.

  2. Copie o seguinte código e cole-o abaixo da linha de eo declaração:

    //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. No código acima, especifique o caminho de ficheiro correto do runtime do projeto e o runtime do Microsoft Edge WebDriver no seu computador.

    EdgeDriver foi agora configurado para conduzir o WebView2 no seu projeto. Por exemplo, se estiver a utilizar o Exemplo WebView2API, o código pode agora ir para https://microsoft.com ao executar o e.Url = @"https://www.microsoft.com"; comando, conforme mostrado na listagem de código seguinte.

  4. Verifique se o Selenium pode conduzir o WebView2. Para tal, defina um ponto de interrupção na linha e.Url = @"https://www.microsoft.com";e, em seguida, execute o projeto.

       //Navigate the WebView2API Sample from bing.com to microsoft.com
   e.Url = @"https://www.microsoft.com";

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

    Selenium a executar o WebView2

Parabéns! Automatizou com êxito um projeto WebView2 e impulsionou o WebView2 com o Selenium e o Microsoft Edge WebDriver, de acordo com a abordagem de "iniciar".

Este é o fim do artigo, se estiver a utilizar a abordagem "iniciar".

Passo 4b: Anexar o Microsoft Edge WebDriver a uma aplicação WebView2 em execução

Esta secção explica como anexar o Microsoft Edge WebDriver a uma instância webView2 já em execução. Se não tiver apenas uma única instância do WebView2 ou se a instância do WebView2 precisar de navegar por alguma IU nativa, utilize esta secção e abordagem.

Um problema é que, para automatizar uma aplicação baseada em WebView2, por vezes tem de realizar algumas ações na GUI nativa para iniciar o controlo WebView2. Como solução, tem de navegar na IU nativa fora do Microsoft Edge WebDriver e, de alguma forma, garantir que a instância do WebView2 é apresentada da seguinte forma.

Neste cenário, onde tem alguma IU nativa para navegar, inicia a sua aplicação com um método diferente do Microsoft Edge WebDriver, como um script de linha de comandos ou uma ferramenta separada, como o WinAppDriver. Assim que o processo da aplicação tiver sido iniciado, acione a instanciação WebView2 e, em seguida, anexe o WebDriver do Microsoft Edge à instância WebView2 em execução.

O Microsoft Edge WebDriver não processa a automatização nativa da IU, mas seguem-se outras abordagens para navegar na IU nativa e apresentar a instância webView2 que está a automatizar:

  • O Controlador de Aplicações do Windows (WinAppDriver) é um serviço que suporta a Automatização de Testes de IU semelhante ao Selenium em Aplicações do Windows. Este serviço suporta testes Plataforma Universal do Windows (UWP), Windows Forms (WinForms), aplicações Windows Presentation Foundation (WPF) e Windows Clássico (Win32) em PCs Windows 10.

  • Utilizar diretamente a automatização da IU Nativa da Microsoft. A arquitetura microsoft Automação da Interface do Usuário permite que os scripts de teste automatizados interajam com a IU. O Microsoft Automação da Interface do Usuário permite que as aplicações do Windows forneçam e consumam informações programáticas sobre interfaces de utilizador (UIs). Fornece acesso programático à maioria dos elementos da IU no ambiente de trabalho. Permite que os produtos de tecnologia de apoio, como leitores de ecrã, forneçam informações sobre a IU aos utilizadores finais e manipulem a IU por entrada padrão e por outros meios que não a entrada padrão.

  • Utilize um sinalizador, como um parâmetro de linha de comandos ou uma variável de ambiente, para indicar à sua aplicação para iniciar diretamente na instância webView2, para evitar a necessidade de navegar na IU nativa. Consoante o seu cenário, isto poderá tornar possível utilizar a abordagem de "iniciar" descrita no Passo 4a: Permitir que o Microsoft Edge WebDriver inicie a sua aplicação WebView2.

Além de garantir que a instância do WebView2 está ativada, tem de definir o respetivo --remote-debugging-port parâmetro de linha de comandos. Vamos fazê-lo nos passos abaixo. O Microsoft Edge WebDriver utilizará esta porta de depuração remota para ligar à instância do WebView2.

Iniciar a aplicação WebView2 com a depuração remota ativada

O próximo passo acontece quando estiver a programar a sua aplicação. Tem de fornecer este parâmetro de linha de comandos extra quando estiver a instanciar o controlo WebView2. Ative a depuração remota, da seguinte forma.

  1. Configure a instância do WebView2 com o --remote-debugging-port=<port> parâmetro de linha de comandos adicional através de uma das abordagens recomendadas em Globals, na Referência Win32 C++ do WebView2. Escolha um número de porta disponível para este parâmetro.

  2. Inicie a sua aplicação. A forma como inicia a sua aplicação depende das outras ferramentas de teste de IU nativas que está a utilizar.

Neste momento, a aplicação está em execução e --remote-debugging-port o parâmetro da linha de comandos foi definido. Em seguida, vamos anexar o Microsoft Edge WebDriver à aplicação WebView2 iniciada.

Anexar o Microsoft Edge WebDriver à aplicação WebView2 iniciada

  1. Utilize a EdgeOptions.DebuggerAddress propriedade para indicar ao Microsoft Edge WebDriver para ligar à porta de depuração remota que especificou anteriormente, em vez de iniciar uma nova aplicação:
EdgeOptions eo = new EdgeOptions();
eo.UseWebView = true;
eo.DebuggerAddress = "localhost:9222";
EdgeDriver e = new EdgeDriver(eo);

Acima localhost:9222 , o número de porta indicado nesta linha deve corresponder ao número de porta que escolheu quando definiu --remote-debugging-port acima.

Para obter mais informações sobre a DebuggerAddress propriedade do EdgeOptions objeto, veja Objeto EdgeOptions.

Para aplicações UWP, anexe o Microsoft Edge WebDriver ao WebView2 com Ferramentas Remotas

  1. Siga os passos em Depuração remota de aplicações UWP com Ferramentas Remotas para o Microsoft Edge.

    Atualmente, esta funcionalidade WebView2 só é suportada no canal de pré-visualização Canary do Microsoft Edge. Defina a variável WEBVIEW2_RELEASE_CHANNEL_PREFERENCE=1de ambiente , para garantir que a versão webView2 é Canary. Para obter mais informações, veja How to set an environment variable in Test upcoming APIs and features (Como definir uma variável de ambiente em Testar as próximas APIs e funcionalidades).

    Definições da aplicação UWP

  2. Depois de iniciar a aplicação UWP WebView2, aceda a http://<Device Portal URL>/msedge. Por exemplo, a seguinte captura de ecrã mostra localhost:50080/msedge:

    ID de processo de uma aplicação UWP em execução

  3. Repare no processo WebView2 ao qual pretende anexar o browserProcessId Microsoft Edge WebDriver. Por exemplo, a captura de ecrã acima mostra como browserProcessId47860.

  4. No seu código, utilize as wdpAddress propriedades e wdpProcessId para indicar ao Microsoft Edge WebDriver para se ligar às Ferramentas Remotas do Microsoft Edge e ao processo webView2 específico.

    • wdpAddress é definido como o URL do Portal do Dispositivo.
    • wdpProcessId é definido como o browserProcessId valor que anotou no passo anterior:
    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);

Para obter mais informações sobre como iniciar uma aplicação WebView2 UWP com Ferramentas Remotas, veja Remote debugging UWP apps with Remote Tools for Microsoft Edge (Depuração remota de aplicações UWP com Ferramentas Remotas para Microsoft Edge).

Parabéns! Anexou com êxito o Microsoft Edge WebDriver a uma aplicação WebView2 em execução.

Projetos UWP e depuração

Para configurar as definições de depuração ao iniciar, tem de utilizar o registo para ativar a depuração para todos os processos webView2 no arranque. Devido à forma como os projetos UWP são iniciados, o controlo WebDriver2 não consegue configurar automaticamente as definições de depuração ao iniciar. Tenha em atenção que a definição desta chave de registo permite a depuração do suporte para todos os processos WebView2 iniciados enquanto esta variável de ambiente está configurada.

Pode substituir parâmetros por valores especificados na chave de registo WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS. Para obter informações sobre a chave de registo WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS (e variável de ambiente equivalente), veja CreateCoreWebView2EnvironmentWithOptions em Globals. A chave de registo WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS (que também é um nome de variável de ambiente) permite-lhe adicionar aos argumentos da linha de comandos que serão transmitidos ao processo do browser WebView2 Runtime quando for iniciado.

Confira também