Teste de Componentes

Com o Browser Runner do WebdriverIO, você pode executar testes em um navegador desktop ou móvel real, usando WebdriverIO e o protocolo WebDriver para automatizar e interagir com o que é renderizado na página. Esta abordagem tem muitas vantagens em comparação com outros frameworks de teste que só permitem testar contra JSDOM.

Como Funciona?

O Browser Runner usa Vite para renderizar uma página de teste e inicializar um framework de teste para executar seus testes no navegador. Atualmente, ele suporta apenas Mocha, mas Jasmine e Cucumber estão no roteiro. Isso permite testar qualquer tipo de componente, mesmo para projetos que não usam Vite.

O servidor Vite é iniciado pelo testrunner WebdriverIO e configurado para que você possa usar todos os reporters e serviços como costumava fazer para testes e2e normais. Além disso, ele inicializa uma instância browser que permite acessar um subconjunto da API WebdriverIO para interagir com qualquer elemento na página. Semelhante aos testes e2e, você pode acessar essa instância através da variável browser anexada ao escopo global ou importando-a de @wdio/globals, dependendo de como injectGlobals está configurado.

O WebdriverIO tem suporte integrado para os seguintes frameworks:

• Nuxt: O testrunner do WebdriverIO detecta uma aplicação Nuxt e configura automaticamente seus composables do projeto e ajuda a simular o backend do Nuxt, leia mais na documentação do Nuxt
• TailwindCSS: O testrunner do WebdriverIO detecta se você está usando TailwindCSS e carrega o ambiente corretamente na página de teste

Configuração

Para configurar o WebdriverIO para testes unitários ou de componentes no navegador, inicie um novo projeto WebdriverIO via:

npm init wdio@latest ./
# ou
yarn create wdio ./

Uma vez que o assistente de configuração iniciar, escolha browser para executar testes unitários e de componentes e escolha um dos presets se desejado, caso contrário, vá com "Other" se você só quiser executar testes unitários básicos. Você também pode configurar uma configuração Vite personalizada se já usar Vite em seu projeto. Para mais informações, confira todas as opções do runner.

informação

Nota: O WebdriverIO por padrão executará testes de navegador em modo headless em CI, por exemplo, quando uma variável de ambiente CI está definida como '1' ou 'true'. Você pode configurar manualmente esse comportamento usando a opção headless para o runner.

No final deste processo, você deverá encontrar um wdio.conf.js que contém várias configurações do WebdriverIO, incluindo uma propriedade runner, por exemplo:

wdio.comp.conf.js

loading...

View on GitHub

Ao definir diferentes capabilities, você pode executar seus testes em diferentes navegadores, em paralelo se desejar.

Se você ainda não tem certeza de como tudo funciona, assista ao seguinte tutorial sobre como começar com Teste de Componentes no WebdriverIO:

Estrutura de Teste

É totalmente sua escolha o que você deseja executar em seus testes e como gostaria de renderizar os componentes. No entanto, recomendamos usar a Testing Library como framework utilitário, pois ela fornece plugins para vários frameworks de componentes, como React, Preact, Svelte e Vue. É muito útil para renderizar componentes na página de teste e limpa automaticamente esses componentes após cada teste.

Você pode misturar primitivas da Testing Library com comandos WebdriverIO como desejar, por exemplo:

component-testing/svelte-example.js

loading...

View on GitHub

Nota: usar métodos de renderização da Testing Library ajuda a remover componentes criados entre os testes. Se você não usar a Testing Library, certifique-se de anexar seus componentes de teste a um contêiner que seja limpo entre os testes.

Scripts de Configuração

Você pode configurar seus testes executando scripts arbitrários no Node.js ou no navegador, por exemplo, injetando estilos, simulando APIs do navegador ou conectando-se a um serviço de terceiros. Os hooks do WebdriverIO podem ser usados para executar código no Node.js, enquanto o mochaOpts.require permite importar scripts para o navegador antes que os testes sejam carregados, por exemplo:

export const config = {
    // ...
    mochaOpts: {
        ui: 'tdd',
        // fornece um script de configuração para executar no navegador
        require: './__fixtures__/setup.js'
    },
    before: () => {
        // configura o ambiente de teste no Node.js
    }
    // ...
}

Por exemplo, se você quiser simular todas as chamadas fetch() em seu teste com o seguinte script de configuração:

import { fn } from '@wdio/browser-runner'

// executa código antes de todos os testes serem carregados
window.fetch = fn()

export const mochaGlobalSetup = () => {
    // executa código depois que o arquivo de teste é carregado
}

export const mochaGlobalTeardown = () => {
    // executa código após o arquivo de especificação ser executado
}

Agora, em seus testes, você pode fornecer valores de resposta personalizados para todas as solicitações do navegador. Leia mais sobre fixtures globais na documentação do Mocha.

Observar Arquivos de Teste e Aplicação

Existem várias maneiras de depurar seus testes de navegador. A mais fácil é iniciar o testrunner WebdriverIO com a flag --watch, por exemplo:

$ npx wdio run ./wdio.conf.js --watch

Isso executará todos os testes inicialmente e pausará quando todos forem executados. Você pode então fazer alterações em arquivos individuais, que serão reexecutados individualmente. Se você definir um filesToWatch apontando para os arquivos da sua aplicação, ele reexecutará todos os testes quando forem feitas alterações em sua aplicação.

Depuração

Embora ainda não seja possível definir pontos de interrupção em seu IDE e tê-los reconhecidos pelo navegador remoto, você pode usar o comando debug para parar o teste em qualquer ponto. Isso permite que você abra o DevTools para então depurar o teste, definindo pontos de interrupção na guia de fontes.

Quando o comando debug é chamado, você também obterá uma interface repl Node.js em seu terminal, dizendo:

The execution has stopped!
You can now go into the browser or use the command line as REPL
(To exit, press ^C again or type .exit)

Pressione Ctrl ou Command + c ou digite .exit para continuar com o teste.

Executar usando um Selenium Grid

Se você tem um Selenium Grid configurado e executa seu navegador através desse grid, você precisa definir a opção host do browser runner para permitir que o navegador acesse o host correto onde os arquivos de teste estão sendo servidos, por exemplo:

export const config: WebdriverIO.Config = {
    runner: ['browser', {
        // IP de rede da máquina que executa o processo WebdriverIO
        host: 'http://172.168.0.2'
    }]
}

Isso garantirá que o navegador abra corretamente a instância do servidor certa hospedada na instância que executa os testes WebdriverIO.

Exemplos

Você pode encontrar vários exemplos para testar componentes usando frameworks de componentes populares em nosso repositório de exemplos.