Espresso per il Web

Espresso-Web è un punto di accesso per lavorare con i componenti UI di Android WebView. Espresso-Web riutilizza gli Atom della popolare API WebDriver per esaminare e controllare il comportamento di un componente WebView.

Quando utilizzare Espresso-Web

Utilizza Espresso-Web per testare le tue app ibride, in particolare l'integrazione dei componenti dell'interfaccia utente nativi della tua app con i relativi componenti UI di WebView. Puoi utilizzare l'API Espresso-Web insieme ad altre API Espresso per interagire completamente con gli elementi web all'interno degli oggetti WebView.

Se devi testare solo WebView e non le interazioni tra WebView e i componenti nativi della tua app, valuta la possibilità di scrivere un test web generale utilizzando un framework come WebDriver. Se utilizzi un framework di test web, non è necessario utilizzare un dispositivo Android o Java Virtual Machine, in modo che i test vengano eseguiti in modo più rapido e affidabile. Detto questo, Espresso-Web ti consente di riutilizzare i tuoi atomi WebDriver personalizzati, il che ti offre molta flessibilità, soprattutto quando scrivi test che prevedi di eseguire sia su app web autonome sia su app che includono una UI Android.

Come funziona

Come il metodo onData() di Espresso, un'interazione WebView comprende diversi atomi. Le interazioni WebView utilizzano una combinazione del linguaggio di programmazione Java e di un bridge JavaScript per svolgere il proprio lavoro. Poiché non è possibile introdurre condizioni di gara esponendo i dati dell'ambiente JavaScript, tutto ciò che Espresso vede sul lato basato su Java è una copia isolata, la restituzione dei dati dagli oggetti Web.WebInteraction è completamente supportata, consentendoti di verificare tutti i dati restituiti da una richiesta.

Che cos'è WebDriver Atom?

Il framework WebDriver utilizza gli Atom per trovare e gestire gli elementi web in modo programmatico. WebDriver utilizza gli Atom per consentire la manipolazione del browser. Un Atom è concettualmente simile a ViewAction, un'unità autonoma che esegue un'azione nella tua UI. Gli Atom vengono esposti utilizzando un elenco di metodi definiti, come findElement() e getElement(), per guidare il browser dal punto di vista dell'utente. Tuttavia, se utilizzi direttamente il framework WebDriver, gli Atom devono essere orchestrati correttamente, il che richiede una logica piuttosto dettagliata.

All'interno di Espresso, le classi Web e Web.WebInteraction racchiudono questo boilerplate e danno un'idea di tipo Espresso per interagire con gli oggetti WebView. Quindi, in un contesto di WebView, gli atomi vengono utilizzati in sostituzione dei tradizionali Espresso ViewMatchers e ViewActions.

L'API appare quindi abbastanza semplice:

Kotlin

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

Java

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

Per scoprire di più, leggi la documentazione di Selenium sugli atomi.

Implementare WebView

Segui le indicazioni mostrate nelle sezioni seguenti per lavorare con WebView nei test della tua app.

Pacchetti

Per includere Espresso-Web nel tuo progetto, completa i seguenti passaggi:

  1. Apri il file build.gradle dell'app. In genere non è il file build.gradle di primo livello, ma app/build.gradle.
  2. Aggiungi la seguente riga all'interno delle dipendenze:

    Trendy

        androidTestImplementation 'androidx.test.espresso:espresso-web:3.4.0'
        

    Kotlin

        androidTestImplementation('androidx.test.espresso:espresso-web:3.4.0')
        
  3. Espresso-Web è compatibile solo con Espresso 2.2 o versioni successive e con la versione 0.3 o successive della libreria di test, quindi assicurati di aggiornare anche queste righe:

    Trendy

        androidTestImplementation 'androidx.test:runner:1.4.0'
        androidTestImplementation 'androidx.test:rules:1.4.0'
        androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
        

    Kotlin

        androidTestImplementation('androidx.test:runner:1.4.0')
        androidTestImplementation('androidx.test:rules:1.4.0')
        androidTestImplementation('androidx.test.espresso:espresso-core:3.4.0')
        

Utilizzo comune dell'API

Il metodo onWebView() è il punto di ingresso principale quando si lavora con WebView su Android tramite Espresso. Utilizza questo metodo per eseguire i test Espresso-Web, come seguente:

Kotlin

onWebView()
    .withElement(findElement(Locator.ID, "link_2")) // similar to onView(withId(...))
    .perform(webClick()) // Similar to perform(click())

    // Similar to check(matches(...))
    .check(webMatches(getCurrentUrl(), containsString("navigation_2.html")))

Java

onWebView()
    .withElement(findElement(Locator.ID, "link_2")) // similar to onView(withId(...))
    .perform(webClick()) // Similar to perform(click())

    // Similar to check(matches(...))
    .check(webMatches(getCurrentUrl(), containsString("navigation_2.html")));

In questo esempio, Espresso-Web individua un elemento DOM il cui ID è "link_2" e fa clic su di esso. Lo strumento verifica quindi che WebView invii una richiesta GET contenente la stringa "navigation_2.html".

Supporto JavaScript

Durante l'esecuzione dei test, il sistema esegue tutte le interazioni WebView utilizzando JavaScript. Pertanto, per supportare la valutazione JavaScript, la WebView sottoposta a test deve avere JavaScript attivato.

Puoi forzare l'attivazione di JavaScript chiamando forceJavascriptEnabled() come azione nella tua attività durante il test, come mostrato nel seguente snippet di codice.

@RunWith(AndroidJUnit4::class)
class MyTestSuite {
    @get:Rule val activityScenarioRule =
        activityScenarioRule<MyWebViewActivity>()

    @Test fun testWebViewInteraction() {
        onWebView().forceJavascriptEnabled()
    }
}

Interazioni web comuni

Le interazioni comuni con gli oggetti Web.WebInteraction includono quanto segue:

  • withElement() fa riferimento a un elemento DOM all'interno di WebView.

    Esempio:

    Kotlin

    onWebView().withElement(findElement(Locator.ID, "teacher"))
    

    Java

    onWebView().withElement(findElement(Locator.ID, "teacher"));
    
  • withContextualElement() fa riferimento a un elemento DOM con ambito all'interno di WebView, rispetto a un altro elemento DOM. Devi prima chiamare withElement() per stabilire l'oggetto Web.WebInteraction di riferimento (elemento DOM).

    Esempio:

    Kotlin

    .withElement(findElement(Locator.ID, "teacher"))
        .withContextualElement(findElement(Locator.ID, "person_name"))
    

    Java

    .withElement(findElement(Locator.ID, "teacher"))
        .withContextualElement(findElement(Locator.ID, "person_name"));
    
  • check() valuta una condizione, assicurandosi che venga risolta in true.

    Esempio:

    Kotlin

    onWebView()
        .withElement(findElement(Locator.ID, "teacher"))
        .withContextualElement(findElement(Locator.ID, "person_name"))
        .check(webMatches(getText(), containsString("Socrates")))
    

    Java

    onWebView()
        .withElement(findElement(Locator.ID, "teacher"))
        .withContextualElement(findElement(Locator.ID, "person_name"))
        .check(webMatches(getText(), containsString("Socrates")));
    
  • perform() esegue un'azione all'interno di un componente WebView, ad esempio fare clic su un elemento.

    Esempio:

    Kotlin

    onWebView()
        .withElement(findElement(Locator.ID, "teacher"))
        .perform(webClick())
    

    Java

    onWebView()
        .withElement(findElement(Locator.ID, "teacher"))
        .perform(webClick());
    
  • reset() ripristina lo stato iniziale di WebView. Questa operazione è necessaria quando un'azione precedente, come un clic, introduce una modifica della navigazione che rende inaccessibili gli oggetti ElementReference e WindowReference.

    Nota: sebbene l'utilizzo di reset() sia utile quando si formulano asserzioni su flussi di lavoro multipagina, ad esempio gli invii di moduli, i test dovrebbero in genere avere un ambito limitato e concentrarsi su una singola pagina.

    Esempio:

    Kotlin

    onWebView()
        .withElement(...)
        .perform(...)
        .reset()
    

    Java

    onWebView()
        .withElement(...)
        .perform(...)
        .reset();
    

Esempio

L'esempio seguente verifica se, dopo aver inserito il testo in un componente WebView e aver selezionato un pulsante Invia, lo stesso testo viene visualizzato in un elemento diverso nella stessa WebView:

Kotlin

const val MACCHIATO = "Macchiato"

@RunWith(AndroidJUnit4::class)
class MyEspressoWebTestSuite {

    @Test fun typeTextInInput_clickButton_SubmitsForm() {
        // Create an intent that displays a web form.
        val webFormIntent = Intent()
        // ...

        // Lazily launch the Activity with a custom start Intent per test.
        ActivityScenario.launchActivity(webFormIntent)

        // Selects the WebView in your layout. If you have multiple WebView
        // objects, you can also use a matcher to select a given WebView,
        // onWebView(withId(R.id.web_view)).
        onWebView()
            // Find the input element by ID.
            .withElement(findElement(Locator.ID, "text_input"))

            // Clear previous input and enter new text into the input element.
            .perform(clearElement())
            .perform(DriverAtoms.webKeys(MACCHIATO))

            // Find the "Submit" button and simulate a click using JavaScript.
            .withElement(findElement(Locator.ID, "submitBtn"))
            .perform(webClick())

            // Find the response element by ID, and verify that it contains the
            // entered text.
            .withElement(findElement(Locator.ID, "response"))
            .check(webMatches(getText(), containsString(MACCHIATO)))
    }
}

Java

public static final String MACCHIATO = "Macchiato";

@Test
public void typeTextInInput_clickButton_SubmitsForm() {
    // Create an intent that displays a web form.
    Intent webFormIntent = new Intent();
    // ...

    // Lazily launch the Activity with a custom start Intent per test.
    ActivityScenario.launchActivity(webFormIntent);

    // Selects the WebView in your layout. If you have multiple WebView objects,
    // you can also use a matcher to select a given WebView,
    // onWebView(withId(R.id.web_view)).
    onWebView()
        // Find the input element by ID.
        .withElement(findElement(Locator.ID, "text_input"))

        // Clear previous input and enter new text into the input element.
        .perform(clearElement())
        .perform(DriverAtoms.webKeys(MACCHIATO))

        // Find the "Submit" button and simulate a click using JavaScript.
        .withElement(findElement(Locator.ID, "submitBtn"))
        .perform(webClick())

        // Find the response element by ID, and verify that it contains the
        // entered text.
        .withElement(findElement(Locator.ID, "response"))
        .check(webMatches(getText(), containsString(MACCHIATO)));
}

Risorse aggiuntive

Per maggiori informazioni sull'utilizzo di Espresso-Web nei test Android, consulta le risorse seguenti.

Samples

  • WebBasicSample: utilizza Espresso-Web per interagire con gli oggetti WebView.