Automatize e teste aplicativos WebView2 com o Microsoft Edge WebDriver

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 Selenium e C#, mas você pode usar qualquer biblioteca, estrutura e linguagem de programação que suporte WebDriver. Para realizar as mesmas tarefas usando uma estrutura de teste WebDriver diferente da Selenium, consulte a documentação oficial da estrutura de sua escolha.

Para criar testes automatizados que simulam interações do usuário para seu aplicativo WebView2, você pode usar o Microsoft Edge WebDriver. 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 escrevem testes que usam comandos WebDriver para dizer ao navegador para executar ações específicas. O Microsoft Edge WebDriver recebe esses comandos e solicita que o navegador execute a ação solicitada. O Microsoft Edge WebDriver oferece suporte à automação do navegador Microsoft Edge e dos aplicativos WebView2.

Para a relação entre o protocolo WebDriver, o Microsoft Edge WebDriver como uma implementação desse protocolo e a estrutura de teste 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 no repositório maior, um exemplo abrangente do SDK do WebView2 mais recente. Verifique se você atendeu aos pré-requisitos para o aplicativo de exemplo WebView2API.

Depois de clonar o repositório, crie o projeto no Visual Studio. Deve ser semelhante à 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 de WebView2API funcione, certifique-se de que sua versão do WebView2 Runtime seja maior ou igual à versão com suporte da versão mais recente do WebView2 SDK.

  • Para localizar a versão mais recente do SDK do WebView2, consulte as notas de versão do SDK do WebView2.

  • Para descobrir qual versão do WebView2 Runtime você tem atualmente, vá para edge://settings/help.

Etapa 3: Adicionar Selenium ao exemplo WebView2API

Nesse ponto, você instalou o WebView2 Runtime, compilou um projeto WebView2 e instalou o Microsoft Edge WebDriver. Em seguida, comece a usar o Selenium, da seguinte maneira.

  1. Comece criando um novo projeto C# .NET Framework no Visual Studio. Selecione Avançar no canto inferior direito para continuar.

    Criar um novo projeto

  2. Dê um nome ao seu projeto, salve-o no Local de sua preferência e selecione Criar.

    Configure seu novo projeto

    Um novo projeto é criado, com todo o código colocado no Program.cs arquivo.

    Novo projeto

  3. Em seguida, adicione o Selenium ao projeto; instale o Selenium usando o pacote NuGet Selenium.WebDriver da seguinte maneira. Para baixar o pacote NuGet Selenium.WebDriver, no Visual Studio, selecioneGerenciar Pacotes NuGet de Projeto>.

  4. Selecione a guia Procurar . A tela a seguir é exibida.

    Baixar o pacote NuGet

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

  6. Marque a caixa de seleção Incluir pré-lançamento .

  7. Digite Selenium.WebDriver na barra de pesquisa e selecione Selenium.WebDriver nos resultados.

  8. 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 em seu computador.

    Gerenciar Pacotes do NuGet

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

  9. 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 adequado para testes do 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 anexá-lo

Decida se deseja configurar o Selenium para conduzir o WebView2 usando a abordagem "iniciar" ou "anexar".

  • A abordagem de "lançamento": em alguns cenários, é apropriado permitir que o Microsoft Edge WebDriver lide com a inicialização do seu aplicativo WebView2. O Microsoft Edge WebDriver inicia seu aplicativo WebView2 e é anexado automaticamente à primeira instância WebView2 disponível que seu aplicativo cria.

  • A abordagem de "anexação": em outros cenários, é apropriado anexar o Microsoft Edge WebDriver a uma instância WebView2 em execução. Você inicia seu aplicativo fora do Microsoft Edge WebDriver e, em seguida, anexa o Microsoft Edge WebDriver a uma instância WebView2 em execução. Essa abordagem de "anexação" é para um aplicativo WebView2 que não é compatível com a abordagem de "lançamento".

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

Se você tiver um aplicativo simples que cria uma única instância do WebView2 e essa instância estiver ativa imediatamente após a inicialização, poderá usar a abordagem de "inicialização"; 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 na inicialização, 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 alguma situação que não se encaixe no cenário de "lançamento" acima, deverá anexar o Microsoft Edge WebDriver a uma instância WebView2 em execução (em vez de permitir que o Microsoft Edge WebDriver lide com a inicialização do WebView2); use a Etapa 4b: Anexando o Microsoft Edge WebDriver a um aplicativo WebView2 em execução.

Alguns exemplos de cenários que não se enquadram no cenário de "lançamento" 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 fazer com que o Microsoft Edge WebDriver inicie 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 de "lançamento" ou "anexação", você deve baixar o Microsoft Edge WebDriver e verificar se a versão corresponde à versão do WebView2 runtime que seu aplicativo usa. As etapas iniciais para configurar sua estrutura WebDriver (como o Selenium) serão diferentes entre as abordagens de "lançamento" e "anexação".

Depois de concluir essas etapas iniciais para iniciar um aplicativo ou anexá-lo a uma instância do WebView2, você poderá usar qualquer comando WebDriver compatível para interagir com essa instância do WebView2.

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

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

Para conduzir o WebView2 com Selenium e Microsoft Edge WebDriver:

  1. Crie um EdgeOptions objeto copiando e colando o seguinte código:

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

    Em seguida, adicionaremos um código que faz o seguinte:

    • Configure a instância para usar o EdgeOptions WebView2, definindo a UseWebView opção como true.
    • Defina eo.BinaryLocation como o caminho do arquivo do binário do aplicativo WebView2.
    • Crie um EdgeDriver objeto usando a EdgeOptions instância.

  2. Copie o seguinte código e cole-o abaixo da linha da 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 arquivo correto do tempo de execução do projeto e o tempo de execução do Microsoft Edge WebDriver no 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 pode ir executando https://microsoft.com o e.Url = @"https://www.microsoft.com"; comando, conforme mostrado na próxima listagem de código.

  4. 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();
}

    Selênio executando WebView2

Parabéns! Você automatizou com sucesso um projeto WebView2 e conduziu o WebView2 usando o Selenium e o Microsoft Edge WebDriver, de acordo com a abordagem de "lançamento".

Este é o fim do artigo, se você estiver usando a abordagem de "lançamento".

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 se sua instância do WebView2 exigir a navegação 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, inicie seu aplicativo usando um método diferente do Microsoft Edge WebDriver, como um script de linha de comando ou uma ferramenta separada, como WinAppDriver. Depois que o processo do aplicativo for iniciado, você disparará a instanciação do WebView2 e, em seguida, anexará o Microsoft Edge WebDriver à instância do 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 driver de aplicativo do Windows (WinAppDriver) é um serviço para dar suporte à automação de teste de interface do usuário semelhante ao Selenium em aplicativos do Windows. Este serviço oferece suporte a testes de aplicativos Plataforma Universal do Windows (UWP), Windows Forms (WinForms), Windows Presentation Foundation (WPF) e Windows clássico (Win32) em computadores Windows 10.

  • Usando a automação de IU nativa da Microsoft diretamente. A estrutura de Automação da Interface do Usuário da Microsoft permite que scripts de teste automatizados interajam com a interface do usuário. A Automação da Interface do Usuário da Microsoft permite que os aplicativos do 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. Ela permite que produtos de tecnologia adaptativa, como leitores de tela, forneçam informações sobre a interface do usuário aos usuários finais e manipulem a interface do usuário por meio de 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 seu aplicativo para iniciar diretamente na instância WebView2, para evitar a necessidade de navegar pela interface do usuário nativa. Dependendo do cenário, isso pode possibilitar o uso da abordagem de "lançamento" descrita na Etapa 4a: Permitindo que o Microsoft Edge WebDriver inicie seu aplicativo WebView2.

Além de garantir que a instância do WebView2 esteja 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.

Iniciando 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.

  1. 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 Globais, na Referência do WebView2 Win32 C++. Escolha um número de porta disponível para este parâmetro.

  2. Inicie seu aplicativo. A forma como você inicia seu aplicativo depende de quais outras ferramentas de teste de interface do usuário nativas 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

  1. Use a EdgeOptions.DebuggerAddress propriedade para informar 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);

Na localhost:9222 parte superior, o número da porta fornecido nesta linha deve corresponder ao número da porta que você escolheu ao configurar --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 Driver ao WebView2 com Ferramentas Remotas

  1. Execute as etapas em Depuração remota de aplicativos UWP com Ferramentas Remotas para Microsoft Edge.

    No momento, esse recurso WebView2 só tem suporte no canal de visualização Canary 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.

    Configurações do aplicativo UWP

  2. Depois de iniciar o aplicativo UWP WebView2, vá para http://<Device Portal URL>/msedge. Por exemplo, a captura de tela a seguir mostra localhost:50080/msedge:

    ID do processo de um aplicativo UWP em execução

  3. Observe o browserProcessId para o processo WebView2 ao qual você deseja anexar o Microsoft Edge WebDriver. Por exemplo, a captura de tela acima mostra o browserProcessId como 47860.

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

    • wdpAddress é definido como a URL do Portal de Dispositivos.
    • wdpProcessId é definido como o browserProcessId valor que você anotou 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 WebView2 UWP com Ferramentas Remotas, consulte Depuração remota de aplicativos UWP com Ferramentas Remotas para Microsoft Edge.

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

Projetos UWP e depuração

Para definir as configurações de depuração na inicialização, você deve usar o registro para ativar 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 pode definir automaticamente as configurações de depuração na inicialização. Observe que a configuração dessa chave do Registro habilita o suporte de depuração para todos os processos WebView2 iniciados 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 em Globals. A chave do Registro WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS (que também é um nome de variável de ambiente) permite adicionar argumentos de linha de comando que serão passados para o processo do navegador WebView2 Runtime quando ele for iniciado.

Confira também

  • Last updated on