Automatizar e testar aplicativos WebView2 com o Microsoft Edge WebDriver

Artigo
06/03/2023

Este artigo explica como automatizar e testar seu aplicativo WebView2 com o Microsoft Edge WebDriver, usando a estrutura Selenium para automação de teste do navegador.

Este artigo fornece instruções para usar a estrutura do Selenium e o C#, mas você pode usar qualquer linguagem de biblioteca, estrutura e programação que dê suporte ao WebDriver. Para realizar as mesmas tarefas usando uma estrutura de teste do WebDriver diferente de Selenium, consulte a documentação oficial para sua estrutura de escolha.

Para criar testes automatizados que simulam interações do usuário para seu aplicativo WebView2, você pode usar o Microsoft Edge WebDriver. O Microsoft Edge WebDriver é a implementação da Microsoft do protocolo W3C WebDriver . O protocolo W3C WebDriver permite que os programas controlem o comportamento dos navegadores da Web.

Os autores de teste gravam testes que usam comandos Do WebDriver para informar ao navegador para executar ações específicas. O Microsoft Edge WebDriver recebe esses comandos e, em seguida, pede ao navegador para executar a ação solicitada. O Microsoft Edge WebDriver dá suporte à automação dos aplicativos Microsoft Edge Browser e WebView2.

Para obter a relação entre o protocolo WebDriver, o Microsoft Edge WebDriver como uma implementação desse protocolo e a estrutura de teste do Selenium, consulte Visão geral do WebDriver.

Etapa 1: baixar o exemplo WebView2API

Se você não tiver um projeto WebView2 existente, clone o repositório WebView2Samples para baixar o aplicativo de exemplo WebView2API. Esse exemplo específico dentro do repositório maior é um exemplo abrangente do SDK do WebView2 mais recente. Verifique se você satisfize os pré-requisitos para o aplicativo de exemplo WebView2API.

Depois de clonar o repositório, crie o projeto no Visual Studio. Deve se parecer com a figura a seguir.

Aplicativo de exemplo WebView2API

Etapa 2: Instalar o Microsoft Edge WebDriver

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

Verifique se a versão do Microsoft Edge WebDriver corresponde à versão do WebView2 Runtime que seu aplicativo usa. Para que o Exemplo WebView2API funcione, verifique se sua versão do WebView2 Runtime é maior ou igual à versão com suporte da versão mais recente do SDK do WebView2.

Para localizar a versão mais recente do SDK do WebView2, consulte Notas de Versão para o SDK do WebView2.
Para descobrir qual versão do WebView2 Runtime você tem atualmente, acesse edge://settings/help.

Etapa 3: Adicionar Selenium ao exemplo WebView2API

A essa altura, você instalou o WebView2 Runtime, criou um projeto WebView2 e instalou o Microsoft Edge WebDriver. Em seguida, comece a usar o Selenium, da seguinte maneira.

Comece criando um novo projeto de .NET Framework C# no Visual Studio. Selecione Avançar no canto inferior direito para continuar.
Dê ao projeto um nome de projeto, salve-o no local preferido e selecione Create.

Um novo projeto é criado, com todo o código colocado no Program.cs arquivo.
Em seguida, adicione Selenium ao projeto; instale o Selenium usando o pacote NuGet Do Selenium.WebDriver da seguinte maneira. Para baixar o pacote NuGet Do Selenium.WebDriver, no Visual Studio,selecione Gerenciar Pacotes NuGet do Project> Manage.
Selecione a guia Procurar . A tela a seguir é exibida.
Na lista suspensa De origem do pacote , selecione nuget.org.
Selecione a caixa de seleção Incluir pré-lançamento .
Digite Selenium.WebDriver na barra Pesquisa e selecione Selenium.WebDriver nos resultados.
Na janela de detalhes à direita, verifique se a Versão está definida como 4.0.0 ou posterior e selecione Instalar. O NuGet baixa o Selenium no computador.

Para saber mais sobre o pacote NuGet Do Selenium.WebDriver, confira Selenium.WebDriver.

Use OpenQA.Selenium.Edge adicionando a instrução using OpenQA.Selenium.Edge; no início do arquivo Program.cs:

using OpenQA.Selenium.Edge;

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

Agora você configurou um projeto vazio do Visual Studio que é adequado para testes de Selenium. Em seguida, configure o Selenium para conduzir o WebView2 usando a abordagem "iniciar" ou a abordagem "anexar".

Etapa 4: escolher se o Microsoft Edge WebDriver deve iniciar seu aplicativo ou anexar a ele

Decida se é necessário configurar o Selenium para conduzir o WebView2 usando a abordagem "iniciar" ou "anexar".

A abordagem de "inicialização": em alguns cenários, é apropriado permitir que o Microsoft Edge WebDriver lide com o lançamento do aplicativo WebView2. O Microsoft Edge WebDriver inicia seu aplicativo WebView2 e anexa automaticamente à primeira instância do WebView2 disponível que seu aplicativo cria.
A abordagem "anexar": em outros cenários, é apropriado anexar o Microsoft Edge WebDriver a uma instância do WebView2 em execução. Você inicia seu aplicativo fora do Microsoft Edge WebDriver e anexa o Microsoft Edge WebDriver a uma instância do WebView2 em execução. Essa abordagem de "anexação" é para um aplicativo WebView2 que não é compatível com a abordagem "iniciar".

Abordagem 1: permitir que o Microsoft Edge WebDriver inicie seu aplicativo WebView2

Se você tiver um aplicativo simples que crie uma única instância do WebView2 e essa instância estiver ativa imediatamente após o lançamento, você poderá usar a abordagem "iniciar"; use a Etapa 4a: permitindo que o Microsoft Edge WebDriver inicie seu aplicativo WebView2.

Nesse cenário, há uma instância do WebView2 e ela está disponível no início, sem a necessidade de navegar por nenhuma interface do usuário nativa.

Abordagem 2: anexando o Microsoft Edge WebDriver a um aplicativo WebView2 em execução

Se você tiver qualquer situação que não se encaixe no cenário de "inicialização" acima, você deverá anexar o Microsoft Edge WebDriver a uma instância do WebView2 em execução (em vez de permitir que o Microsoft Edge WebDriver lide com a inicialização do WebView2); usar a Etapa 4b: anexando o Microsoft Edge WebDriver a um aplicativo WebView2 em execução.

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

Você precisa navegar por alguma interface do usuário nativa antes que a instância do WebView2 seja criada.
Seu aplicativo cria várias instâncias do WebView2 e você deseja anexar a uma instância específica.

Nesses cenários, recomendamos anexar a uma instância específica do WebView2, pois ter o Microsoft Edge WebDriver iniciando seu aplicativo WebView2 é apenas para cenários relativamente simples. Quando o Microsoft Edge WebDriver inicia seu aplicativo, ele é anexado automaticamente à primeira instância do WebView2 criada e falhará se nenhuma instância do WebView2 for encontrada.

Independentemente de usar a abordagem "iniciar" ou "anexar", você deve baixar o Microsoft Edge WebDriver e garantir que a versão corresponda à versão do runtime do WebView2 que seu aplicativo usa. As etapas iniciais para configurar a estrutura do WebDriver (como o Selenium) serão diferentes entre as abordagens "iniciar" versus "anexar".

Depois de concluir essas etapas iniciais para iniciar um aplicativo ou anexar a uma instância do WebView2, você poderá usar todos os comandos do WebDriver com suporte para interagir com essa instância do WebView2.

Etapa 4a: permitir que o Microsoft Edge WebDriver inicie seu aplicativo WebView2

Use essa abordagem de "inicialização" se você tiver um aplicativo simples que crie uma única instância do WebView2 e essa instância estiver ativa imediatamente após o lançamento. Nesse cenário, há uma instância do WebView2 e ela está disponível no início, sem a necessidade de navegar por nenhuma interface do usuário nativa.

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

Create um EdgeOptions objeto, copiando e colando o seguinte código:
```
static void Main(string[] args)
{
   EdgeOptions eo = new EdgeOptions();
```
Em seguida, adicionaremos o código que faz o seguinte:
- Configure a instância para usar o EdgeOptions WebView2, definindo a opção UseWebView como true.
- Defina eo.BinaryLocation como o caminho do arquivo do binário do aplicativo WebView2.
- Create um EdgeDriver objeto usando a EdgeOptions instância.

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);

No código acima, especifique o caminho de arquivo correto do runtime do projeto e o runtime do Microsoft Edge WebDriver em seu computador.

EdgeDriver agora foi configurado para conduzir o WebView2 em seu projeto. Por exemplo, se você estiver usando o Exemplo WebView2API, seu código agora poderá ir executando https://microsoft.com o e.Url = @"https://www.microsoft.com"; comando, conforme mostrado na próxima listagem de código.
Verifique se o Selenium pode conduzir o WebView2. Para fazer isso, defina um ponto de interrupção na linha e.Url = @"https://www.microsoft.com";e 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();
}
```

Parabéns! Você automatizau com êxito um projeto WebView2 e dirigiu o WebView2 usando o Selenium e o Microsoft Edge WebDriver, de acordo com a abordagem de "inicialização".

Este é o final do artigo, se você estiver usando a abordagem "iniciar".

Etapa 4b: anexando o Microsoft Edge WebDriver a um aplicativo WebView2 em execução

Esta seção explica como anexar o Microsoft Edge WebDriver a uma instância do WebView2 já em execução. Se você não tiver apenas uma única instância do WebView2 ou sua instância do WebView2 exigir navegar por alguma interface do usuário nativa, use esta seção e abordagem.

Um problema é que, para automatizar um aplicativo baseado em WebView2, às vezes você precisa primeiro executar algumas ações na GUI nativa para iniciar o controle WebView2. Como solução, você precisa navegar pela interface do usuário nativa fora do Microsoft Edge WebDriver e, de alguma forma, garantir que a instância do WebView2 seja exibida da seguinte maneira.

Nesse cenário, em que você tem alguma interface do usuário nativa para navegar, você inicia seu aplicativo usando um método diferente do Microsoft Edge WebDriver, como um script de linha de comando ou uma ferramenta separada, como o WinAppDriver. Depois que o processo do aplicativo for iniciado, você disparará a instanciação WebView2 e, em seguida, anexar o Microsoft Edge WebDriver à instância de WebView2 em execução.

O Microsoft Edge WebDriver não lida com a automação nativa da interface do usuário, mas aqui estão algumas outras abordagens para navegar na interface do usuário nativa e exibir a instância do WebView2 que você está automatizando:

O WinAppDriver (Driver de Aplicativo do Windows) é um serviço para dar suporte à Automação de Teste de Interface do Usuário semelhante ao Selenium em Aplicativos Windows. Esse serviço dá suporte a testes de aplicativos Plataforma Universal do Windows (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF) e Windows Clássico (Win32) em PCs Windows 10.
Usando a automação da interface do usuário nativa da Microsoft diretamente. A estrutura do Microsoft Automação da Interface do Usuário permite que scripts de teste automatizados interajam com a interface do usuário. O Microsoft Automação da Interface do Usuário permite que aplicativos Windows forneçam e consumam informações programáticas sobre interfaces de usuário (UIs). Ele fornece acesso programático à maioria dos elementos da interface do usuário na área de trabalho. Ele permite que produtos de tecnologia assistiva, como leitores de tela, forneçam informações sobre a interface do usuário para usuários finais e manipulem a interface do usuário por entrada padrão e por meios diferentes da entrada padrão.
Use um sinalizador, como um parâmetro de linha de comando ou uma variável de ambiente para dizer ao aplicativo para iniciar diretamente na instância do WebView2, para evitar a necessidade de navegar na interface do usuário nativa. Dependendo do cenário, isso pode tornar possível usar a abordagem de "inicialização" descrita na Etapa 4a: permitir que o Microsoft Edge WebDriver inicie seu aplicativo WebView2.

Além de garantir que a instância do WebView2 seja ativada, você precisa definir seu --remote-debugging-port parâmetro de linha de comando. Faremos isso nas etapas abaixo. O Microsoft Edge WebDriver usará essa porta de depuração remota para se conectar à instância do WebView2.

Iniciar o aplicativo WebView2 com a depuração remota habilitada

A próxima etapa acontece quando você está codificando seu aplicativo. Você precisa fornecer esse parâmetro de linha de comando extra ao instanciar seu controle WebView2. Habilite a depuração remota, da seguinte maneira.

Configure sua instância do WebView2 com o --remote-debugging-port=<port> parâmetro de linha de comando adicional usando uma das abordagens recomendadas em Globals, em Referência do WebView2 Win32 C++. Escolha um número de porta disponível para este parâmetro.
Inicie seu aplicativo. A forma como você inicia seu aplicativo depende das outras ferramentas de teste de interface do usuário nativas que você está usando.

Neste ponto, seu aplicativo está em execução e seu --remote-debugging-port parâmetro de linha de comando foi definido. Em seguida, anexaremos o Microsoft Edge WebDriver ao aplicativo WebView2 iniciado.

Anexando o Microsoft Edge WebDriver ao aplicativo WebView2 iniciado

Use a EdgeOptions.DebuggerAddress propriedade para dizer ao Microsoft Edge WebDriver para se conectar à porta de depuração remota especificada anteriormente, em vez de iniciar um novo aplicativo:

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

No acima localhost:9222 , o número da porta dado nessa linha deve corresponder ao número de porta que você escolheu ao definir --remote-debugging-port acima.

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

Para aplicativos UWP, anexe o Microsoft Edge WebDriver ao WebView2 com ferramentas remotas

Faça as etapas em Aplicativos UWP de depuração remota com Ferramentas Remotas para Microsoft Edge.

Atualmente, esse recurso do WebView2 só tem suporte no canal de visualização canário do Microsoft Edge. Defina a variável WEBVIEW2_RELEASE_CHANNEL_PREFERENCE=1de ambiente , para garantir que a versão do WebView2 seja Canary. Para obter mais informações, consulte Como definir uma variável de ambiente em Testar as próximas APIs e recursos.
Depois de iniciar o aplicativo UWP WebView2, acesse http://<Device Portal URL>/msedge. Por exemplo, a captura de tela a seguir mostra localhost:50080/msedge:
Observe o para o browserProcessId processo WebView2 ao qual você deseja anexar o Microsoft Edge WebDriver. Por exemplo, a captura de tela acima mostra o browserProcessId como 47860.

Em seu código, use as wdpAddress propriedades e wdpProcessId para dizer ao Microsoft Edge WebDriver para se conectar às Ferramentas Remotas do Microsoft Edge e ao processo WebView2 específico.

wdpAddress é definida como a URL do Portal do Dispositivo.
wdpProcessId é definido como o browserProcessId valor que você observou na etapa 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 um aplicativo UWP do WebView2 com Ferramentas Remotas, confira Depuração remota de aplicativos UWP com Ferramentas Remotas para Microsoft Edge.

Parabéns! Você anexou com êxito o Microsoft Edge WebDriver a um aplicativo WebView2 em execução.

Projetos UWP e depuração

Para configurar as configurações de depuração no início, você deve usar o registro para habilitar a depuração para todos os processos do WebView2 na inicialização. Devido à forma como os projetos UWP são iniciados, o controle WebDriver2 não consegue configurar automaticamente as configurações de depuração no início. Observe que a configuração dessa chave de registro permite o suporte de depuração para todos os processos inicializados do WebView2 enquanto essa variável de ambiente está configurada.

Você pode substituir parâmetros por valores especificados na chave do registro WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS. Para obter informações sobre a chave do registro WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS (e variável de ambiente equivalente), consulte CreateCoreWebView2EnvironmentWithOptions in Globals. A WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS chave do registro (que também é um nome de variável de ambiente) permite adicionar aos argumentos de linha de comando que serão passados para o processo do navegador WebView2 Runtime quando ele for iniciado.

Confira também

WebDriver na documentação do Selenium – Como as APIs Selenium impulsionam o WebView2 ou o Microsoft Edge.
Introdução ao Microsoft Edge WebView2 – Como usar o controle WebView2 para inserir conteúdo da Web em seu aplicativo nativo.
Use o WebDriver para automação de teste – Automatizando o Microsoft Edge.

Partilhar via