Como testar seus React-Native WebViews com Detox

Você pode finalmente escrever testes ponta a ponta para seus WebViews usando Detox!

… Bem, pelo menos no Android.

No momento, iOS não é compatível. No entanto, é provável que isso mude no futuro. Além disso, embora exista funcionalidade para teste no Android, os documentos do Detox não foram oficialmente atualizados para incluir testes de webview. Isso sugere que o trabalho pode ser contínuo e bastante silencioso .

Independentemente disso, ser capaz de testar webviews no Android continua sendo um grande salto para o tipo de desenvolvedor!

Como adicionar um WebView ao seu aplicativo

Para incluir um WebView, adicione o react-native-webviewpacote como uma dependência ao seu package.json. Importe o WebViewcomponente e passe a ele uma fonte conforme mostrado abaixo.

Certifique-se de incluir um testIDem seu WebView para que ele possa ser encontrado por desintoxicação quando você executar seu teste.

Como escrever um teste para o webview

Para este exemplo, estamos usando a página de login do Twitter. Gostaríamos de permitir que o usuário:

• Digite um nome de usuário
• Digite uma senha
• E clique no botão Login

Às vezes, leva um tempo para um webview carregar, então pode ser útil adicionar um atraso para garantir que ele termine de carregar antes de executar os testes.

Como visto a seguir, podemos usar o objeto da web do Detox para interagir com a visualização e fazer afirmações sobre os elementos localizados.

Localizando elementos DOM:

A web do Detox baseia-se no Expresso-Web do Android e fornece uma lista de funções para selecionar elementos DOM.

• id - encontra um elemento na árvore DOM por seu id
• text - encontra um elemento na árvore DOM por sua classe CSS
• cssSelector - encontra um elemento na árvore DOM correspondente ao seletor CSS fornecido
• name - encontra um elemento na árvore DOM por seu atributo “nome”
• xpath - encontra um elemento na árvore DOM por seu XPath
• href- encontra um <a>elemento na árvore DOM por seu texto de link
• hrefContent- encontra um <a>elemento na árvore DOM por meio de seu texto de link parcial
• tag - encontra um elemento na árvore DOM por seu nome de tag

Depois de localizar seu elemento, você pode simular a interação do usuário com os seguintes métodos autoexplicativos:

• tap
• typeText
• getText
• clearText
• replaceText
• scrollToView
• getCurrentUrl
• getTitle
• runScript
• runScriptWithArgs

O Detox Web também vem com um divertido conjunto de combinações:

• toExist()
• toNotExist()
• toHaveText()
• toNotHaveText()

As possibilidades são infinitas!