Espresso Testing Framework - WebView

WebView é uma visualização especial fornecida pelo Android para exibir páginas da web dentro do aplicativo. O WebView não fornece todos os recursos de um aplicativo de navegador completo, como o Chrome e o Firefox. No entanto, ele fornece controle completo sobre o conteúdo a ser mostrado e expõe todos os recursos do Android a serem chamados dentro das páginas da web. Ele habilita o WebView e fornece um ambiente especial onde a IU pode ser facilmente projetada usando tecnologia HTML e recursos nativos como câmera e discagem de contato. Este conjunto de recursos permite que um WebView forneça um novo tipo de aplicativo chamado aplicativo Híbrido , onde a IU é feita em HTML e a lógica de negócios é feita em JavaScript ou por meio de um endpoint de API externo.

Normalmente, testar um WebView precisa ser um desafio porque ele usa tecnologia HTML para seus elementos de interface de usuário em vez de interface de usuário / visualizações nativas. O Espresso se destaca nessa área, fornecendo um novo conjunto de correspondências e asserções da Web, que é intencionalmente semelhante a correspondências de exibição nativas e afirmações de exibição. Ao mesmo tempo, ele fornece uma abordagem bem balanceada, incluindo um ambiente de teste baseado em tecnologia da web também.

O Espresso web é construído sobre a estrutura WebDriver Atom, que é usada para localizar e manipular elementos da web. Atom é semelhante a ações de visualização. O Atom fará toda a interação dentro de uma página da web. O WebDriver expõe um conjunto predefinido de métodos, como findElement () , getElement () para encontrar elementos da web e retorna os átomos correspondentes (para realizar ações na página da web).

Uma declaração de teste da web padrão se parece com o código abaixo,

onWebView()
   .withElement(Atom)
   .perform(Atom)
   .check(WebAssertion)

Aqui,

onWebView () - Semelhante a onView (), expõe um conjunto de API para testar um WebView.
withElement () - Um dos vários métodos usados para localizar elementos da web dentro de uma página da web usando Atom e retorna o objeto WebInteration, que é semelhante a ViewInteraction.
perform () - executa a ação dentro de uma página da web usando Atom e retorna WebInteraction.
check () - faz a declaração necessária usando WebAssertion.

Um exemplo de código de teste da web é o seguinte,

onWebView()
   .withElement(findElement(Locator.ID, "apple"))
   .check(webMatches(getText(), containsString("Apple")))

Aqui,

findElement () localiza um elemento e retorna um Atom
webMatches é semelhante ao método de correspondências

Escreva um aplicativo de amostra

Vamos escrever um aplicativo simples baseado em WebView e escrever um caso de teste usando o método onWebView () . Siga estas etapas para escrever um aplicativo de amostra -

Inicie o Android Studio.
Crie um novo projeto conforme discutido anteriormente e denomine -o MyWebViewApp .
Migre o aplicativo para a estrutura AndroidX usando Refactor → Migrar para o menu de opções AndroidX .
Adicione a opção de configuração abaixo no arquivo AndroidManifest.xml para dar permissão para acessar a Internet.

<uses-permission android:name = "android.permission.INTERNET" />

O Espresso Web é fornecido como um plugin separado. Portanto, adicione a dependência no app / build.gradle e sincronize-a.

dependencies {
   androidTestImplementation 'androidx.test:rules:1.1.1'
   androidTestImplementation 'androidx.test.espresso:espresso-web:3.1.1'
}

Remova o design padrão da atividade principal e adicione WebView. O conteúdo do activity_main.xml é o seguinte,

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   xmlns:app = "http://schemas.android.com/apk/res-auto"
   xmlns:tools = "http://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   tools:context = ".MainActivity">
   <WebView
      android:id = "@+id/web_view_test"
      android:layout_width = "fill_parent"
      android:layout_height = "fill_parent" />
</RelativeLayout>

Crie uma nova classe, ExtendedWebViewClient estendendo WebViewClient e substitua o método shouldOverrideUrlLoading para carregar a ação do link no mesmo WebView ; caso contrário, uma nova janela do navegador será aberta fora do aplicativo. Coloque-o em MainActivity.java .

private class ExtendedWebViewClient extends WebViewClient {
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
      view.loadUrl(url);
      return true;
   }
}

Agora, adicione o código abaixo no método onCreate de MainActivity . O objetivo do código é encontrar o WebView , configurá-lo corretamente e, finalmente, carregar o url de destino.

// Find web view
WebView webView = (WebView) findViewById(R.id.web_view_test);

// set web view client
webView.setWebViewClient(new ExtendedWebViewClient());

// Clear cache
webView.clearCache(true);

// load Url
webView.loadUrl("http://<your domain or IP>/index.html");

Aqui,

O conteúdo de index.html é o seguinte -

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   <body>
      <h1>Fruits</h1>
      <ol>
         <li><a href = "apple.html" id = "apple">Apple</a></li>
         <li><a href = "banana.html" id = "banana">Banana</a></li>
         </ol>
   </body>
</html>

O conteúdo do arquivo apple.html referido em index.html é o seguinte -

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   
   <body>
      <h1>Apple</h1>
   </body>
</html>

O conteúdo do arquivo banana.html referido em banana.html é o seguinte,

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   
   <body>
      <h1>Banana</h1>
   </body>
</html>

Coloque index.html, apple.html e banana.html em um servidor da web
Substitua o url no método loadUrl pelo url configurado.
Agora, execute o aplicativo e verifique manualmente se está tudo bem. Abaixo está a captura de tela do aplicativo de amostra WebView -

Agora, abra o arquivo ExampleInstrumentedTest.java e adicione a regra abaixo -

@Rule
public ActivityTestRule<MainActivity> mActivityRule =
   new ActivityTestRule<MainActivity>(MainActivity.class, false, true) {
   @Override
   protected void afterActivityLaunched() {
      onWebView(withId(R.id.web_view_test)).forceJavascriptEnabled();
   }
};

Aqui, encontramos o WebView e o JavaScript ativado do WebView porque a estrutura de teste da web do espresso funciona exclusivamente por meio do mecanismo JavaScript para identificar e manipular o elemento da web.

Agora, adicione o caso de teste para testar nosso WebView e seu comportamento.

@Test
public void webViewTest(){
   onWebView()
      .withElement(findElement(Locator.ID, "apple"))
      .check(webMatches(getText(), containsString("Apple")))
      .perform(webClick())
      .withElement(findElement(Locator.TAG_NAME, "h1"))
      .check(webMatches(getText(), containsString("Apple")));
}

Aqui, o teste foi feito na seguinte ordem,

encontrou o link, apple usando seu atributo id por meio do método findElement () e enumeração Locator.ID .
verifica o texto do link usando o método webMatches ()
executa uma ação de clique no link. Ele abre a página apple.html .
novamente encontrou o elemento h1 usando métodos findElement () e enumeração Locator.TAG_NAME .
finalmente, verifica novamente o texto da tag h1 usando o método webMatches () .
Por fim, execute o caso de teste usando o menu de contexto do Android Studio.