O que é o teste de fumaça? Testes de verificação de compilação explicados com exemplos

via GIPHY

Neste tutorial, você aprenderá sobre o teste de fumaça e como ele ajuda a detectar bugs. Em seguida, você testará um aplicativo da Web em uma programação e enviará alertas quando os testes falharem. Vamos começar!

1. O que é o teste de fumaça?
2. Por que você deveria se importar?
3. Configure seu projeto
4. Crie um teste de fumaça
5. Revise o código de teste
6. Execute seu teste localmente
7. Executar testes nas ações do GitHub
8. Configurar alertas com o Slack
9. Conclusão

O termo “teste de fumaça” teve origem no reparo de hardware. Um dispositivo estava ligado e passaria no teste de fumaça se pegasse fogo. Testing O teste de fumaça às vezes é chamado de “teste de verificação de construção”.

Quando aplicados a aplicativos da Web, os testes de fumaça verificam se a funcionalidade mais importante está funcionando. Por exemplo, os testes de fumaça no Netflix podem incluir o login e a reprodução de um vídeo.

Por design, os testes de fumaça não cobrem todas as permutações e caixas de bordas. Em vez disso, eles verificam se seu aplicativo não está tão quebrado que testes adicionais seriam uma perda de tempo.

Os testes de fumaça fornecem muito valor em relação ao esforço necessário para criá-los. De acordo com a Microsoft, os testes de fumaça são “o método mais econômico para identificar e corrigir defeitos no software” após as revisões de código.

via GIPHY

Apenas alguns testes de recursos críticos como o login podem melhorar significativamente a qualidade. Testar o que os usuários costumam fazer ajuda a garantir que os principais casos de uso do seu aplicativo sejam suportados.

Os testes de fumaça também dão à sua equipe a confiança de enviar um novo código. As alterações na sua base de código geralmente têm consequências não intencionais e desconhecidas. Os testes de fumaça proporcionam uma tranqüilidade adicional de que seu aplicativo não será interrompido quando você lançar esse novo e incrível recurso.

Se você executar testes de fumaça na produção, também poderá detectar bugs que os testes anteriores perderam. Mesmo pequenas diferenças entre ambientes como preparação e produção podem causar problemas. Os testes de fumaça podem identificar esses problemas antes que o cliente o faça.

Em resumo, os testes de fumaça oferecem outra camada de proteção contra uma experiência ruim do usuário. Um aplicativo sem problemas ajuda a sua equipe, sua empresa e seus clientes a serem mais bem-sucedidos. ✨

Agora que aprendemos o que é o teste de fumaça, vamos construir um pipeline de teste de fumaça!

via GIPHY

Este tutorial supõe que você entender a linha de comando, tem Node.js e npm instaladoe conhecer o básico do JavaScript e Git.

Você pode configurar seus testes dentro de um projeto existente ou criar um novo. Para criar um novo projeto, execute o seguinte na linha de comando.

mkdir smoke_testscd smoke_tests

Se você ainda não o fez, inicialize seu projeto para poder instalar Node.js pacotes.

npm init -y

Agora vamos instalar as ferramentas necessárias para criar nossos testes de fumaça. Este tutorial criará Dramaturgo e Jest testes em um aplicativo da web. Playwright é uma biblioteca criada pela Microsoft para automatizar Crómio, Raposa de fogoe WebKit navegadores. Jest é uma estrutura para criar e executar testes JavaScript.

Para criar e executar rapidamente nossos testes, usaremos o código aberto Biblioteca QA Wolf que eu ajudo a manter. O controle de qualidade Wolf converte as ações do navegador em código de teste Playwright / Jest. Ele também executa seus testes em um provedor de IC, como Ações do GitHub.

Se você preferir usar outra estrutura de teste, ainda poderá seguir este tutorial para executar seus testes no IC e configurar alertas.

Para configurar seu projeto para testes de fumaça, execute o seguinte no diretório do projeto.

npm init qawolf

Você será solicitado a especificar o diretório em que seus testes serão salvos. Pressione Enter para usar o diretório padrão .qawolfou digite um nome diferente.

? rootDir: Directory to create tests in (.qawolf)

Você verá uma nota na linha de comando indicando se seus testes usarão TypeScript. Nosso projeto de exemplo não possui um arquivo “tsconfig.json”, portanto nossos testes não usarão o TypeScript.

TypeScript ✖️ tsconfig.json not found

A etapa final é escolher o seu provedor de IC. Este tutorial usará ações do GitHub, mas você pode escolher outro provedor, se quiser. Selecione seu provedor de IC na linha de comando e pressione Enter.

? Choose CI Provider (Use arrow keys)  Azure DevOps   Bitbucket Pipelines   CircleCI ❯ GitHub Actions   GitLab CI/CD   Jenkins   Skip CI setup 

Os pacotes necessários para os testes de fumaça (Playwright, Jest e QA Wolf) serão instalados.

Dois arquivos também serão criados no seu projeto. O primeiro é um arquivo de fluxo de trabalho para executar seus testes no IC. Como selecionamos as ações do GitHub, esse arquivo é salvo em “.github / workflows / qawolf.yml”. Vamos discutir este arquivo mais tarde.

Há também um arquivo de configuração criado em “qawolf.config.js”. Não precisaremos editar este arquivo, mas você pode saiba mais aqui.

Depois que as dependências concluírem a instalação, verifique se a instalação foi bem-sucedida.

npx qawolf howl

Agora que nosso projeto está configurado, vamos criar nosso primeiro teste de fumaça. Neste tutorial, criaremos um teste de fumaça em TodoMVC, um aplicativo simples de fazer. Especificamente, testaremos se podemos

1. crie um item de tarefa,
2. complete e
3. limpar todos concluídos.

Para criar nosso teste, usaremos o npx qawolf create comando. Este comando pega a URL do seu aplicativo e um nome de teste opcional. A execução deste comando abrirá um Crómio navegador onde suas ações serão convertidas para o código Playwright / Jest.

Na linha de comando, execute o seguinte. Você pode opcionalmente substituir http://todomvc.com/examples/react com um URL diferente e myFirstTest com um nome diferente.

npx qawolf create http://todomvc.com/examples/react myFirstTest

Abra seu editor de código e encontre seu arquivo de teste (“.qawolf / myFirstTest.test.js” em nosso exemplo). É aqui que o seu código de teste será criado à medida que você usa o navegador.

Depois que o navegador Chromium for aberto para TodoMVC, execute as seguintes ações.

1. Clique na entrada todo para focá-la
2. Digite “criar teste!”
3. pressione Enter
4. Clique para concluir a tarefa
5. Clique em “Limpar concluído” para limpar todos os concluídos
6. Na linha de comando, realce 💾 Save and Exit e pressione Enter para salvar seu teste

O vídeo abaixo fornece um exemplo.

https://www.youtube.com/watch?v=KP4tpilrOOE

Agora vamos dar uma olhada no nosso código de teste. No seu editor de código, abra seu arquivo de teste (“.qawolf / myFirstTest.test.js” em nosso exemplo).

No início de nosso teste, importamos qawolf. Também importamos elemento selectors do “.qawolf / selectors / myFirstTest.json”, que discutiremos em breve.

const qawolf = require("qawolf");const selectors = require("./selectors/myFirstTest.json");

O teste então lança um Dramaturgo browser, que no nosso caso é um navegador Chromium. Isso cria um novo Dramaturgo browserContext, que é uma sessão de navegador anônimo. O controle de qualidade do Wolf tem acesso ao context para que ele possa detectar suas ações. Finalmente, um novo Dramaturgo page é criado, abrindo uma nova guia no navegador.

let browser;let page;beforeAll(async () => {  browser = await qawolf.launch();  const context = await browser.newContext();  await qawolf.register(context);  page = await context.newPage();});

O teste em si está contido em um Jest test quadra com o nome que você especificou. O teste primeiro navega para a URL TodoMVC. Em seguida, ele executa as ações que você executou: crie um item de tarefa, conclua-o e limpe todos os itens concluídos. Cada ação usa um dos Playwright’s page métodos, como click e type.

test('myFirstTest', async () => {  await page.goto("http://todomvc.com/examples/react");  await page.click(selectors["0_what_needs_to_b_input"]);  await page.type(selectors["1_what_needs_to_b_input"], "create test!");  await page.press(selectors["2_what_needs_to_b_input"], "Enter");  await page.click(selectors["3_input"]);  await page.click(selectors["4_button"]);});

O primeiro argumento passado para cada page método é um HTML seletor. Esse seletor informa ao Playwright com qual elemento interagir, como a entrada de tarefas ou o botão “Limpar concluído”. Esses seletores são importados do arquivo “.qawolf / selectors / myFirstTest.json”, que se parece com o seguinte.

{ "0_what_needs_to_b_input": "html=
",// ...}

Cada atributo do elemento com o qual você interagiu, bem como os de seus dois antepassados, é armazenado neste arquivo. Ao executar seu teste, ele fará o possível para encontrar uma correspondência boa o suficiente para o HTML especificado. Por não confiar em um único atributo, seus testes são mais robustos às alterações no seu código de front-end.

Dramaturgo page métodos também suporte outros tipos de seletores, como Seletores CSS ou seletores de texto. Por exemplo, você pode substituir selectors["4_button"] na última etapa com o seletor CSS '.clear-completed'.

test('myFirstTest', async () => {  // ...  // change this  await page.click(selectors["4_button"]);  // to this (CSS selector)  await page.click('.clear-completed');});

Opcionalmente, você pode configurar o QA Wolf para usar atributos de teste como data-qa no código gerado sempre que possível. Vejo este guia aprender mais.

Após a conclusão do teste, o QA Wolf para de gravar qualquer vídeo do navegador, se aplicável. O navegador também está fechado.

afterAll(async () => {  await qawolf.stopVideos();  await browser.close();});

Juntando tudo, o código de teste completo é assim.

const qawolf = require("qawolf");const selectors = require("./selectors/myFirstTest.json");let browser;let page;beforeAll(async () => {  browser = await qawolf.launch();  const context = await browser.newContext();  await qawolf.register(context);  page = await context.newPage();});afterAll(async () => {  await qawolf.stopVideos();  await browser.close();});test("myFirstTest", async () => {  await page.goto("http://todomvc.com/examples/react");  await page.click(selectors["0_what_needs_to_b_input"]);  await page.type(selectors["1_what_needs_to_b_input"], "create test!");  await page.press(selectors["2_what_needs_to_b_input"], "Enter");  await page.click(selectors["3_input"]);  await page.click(selectors["4_button"]);});

Se o teste não puder concluir o fluxo de trabalho, ele falhará. Você pode editar seu código de teste, como adicionando asserções. Não vamos abordar isso neste tutorial, mas aqui está um guia se você quiser saber mais.

Agora que entendemos nosso código de teste, vamos executar nosso teste!

Vamos executar nosso teste localmente para garantir que funcione. Na linha de comando, execute o seguinte para executar seus testes com o Jest.

npx qawolf test

Você deve ver um navegador Chromium aberto e executar o teste. Seu teste será executado o mais rápido possível, portanto, não se surpreenda se for executado rapidamente.

O vídeo abaixo fornece um exemplo.

https://www.youtube.com/watch?v=JRcR-d6Yfdw

Neste tutorial, executaremos nossos testes em uma programação, como a cada hora. A execução de testes em um cronograma garante que seu aplicativo esteja funcionando continuamente. Também pode expor problemas periódicos, ou “flocos”, que aparecem apenas algumas vezes.

Neste tutorial, usamos Ações do GitHub para executar nossos testes. O GitHub Actions é uma ferramenta para automatizar fluxos de trabalho de software, como implantar um serviço da Web ou testar um aplicativo.

Revisar arquivo de fluxo de trabalho

Quando nós montar nosso projeto, uma Arquivo YAML chamado “.github / workflows / qawolf.yml” foi criado. Primeiro, examinaremos brevemente as diferentes partes deste arquivo. Em seguida, vamos atualizá-lo para que nossos testes sejam executados em um cronograma.

A primeira linha do arquivo do fluxo de trabalho nomeia nosso fluxo de trabalho. Esse é o nome que será exibido nas Ações do GitHub e você poderá alterá-lo, se quiser.

name: qawolf

o on chave em seguida, especifica qual evento deve acionar nossos testes para execução. Por padrão, seus testes serão executados sempre que alguém enviar para qualquer ramificação. Em breve, editaremos isso para também executar nossos testes em uma programação.

on:  push:    # test every branch    # edit below if you only want certain branches tested    branches: "*"  # schedule:  #   # test on schedule using cron syntax  #   - cron: "0 * * * *" # every hour

O restante do arquivo define o que as ações do GitHub devem fazer quando executadas. As ações do GitHub executarão os trabalhos listados na seção jobs chave. No nosso caso, temos apenas um trabalho que executa nossos testes.

Especificamente, nossa test job instala dependências, verifica nosso código e executa nosso comando de teste npx qawolf test. Após a execução dos testes, os artefatos de depuração, como logs e vídeos do console, são salvos.

jobs:  test:    runs-on: ubuntu-18.04    steps:      - name: Install dependencies        run: |          sudo apt update          # chromium dependencies          sudo apt-get install libgbm1          # webkit dependencies          sudo apt-get install libwoff1 libopus0 libwebp6 libwebpdemux2 libenchant1c2a libgudev-1.0-0 libsecret-1-0 libhyphen0 libgdk-pixbuf2.0-0 libegl1 libgles2 libevent-2.1-6 libnotify4 libvpx5 libxslt1.1      - uses: actions/checkout@v2      - uses: actions/setup-node@v1      - uses: actions/cache@v1        with:          path: ~/.npm          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}          restore-keys: |            ${{ runner.os }}-node-      - run: npm install      # - name: Start local server      #   run: npm run start & npx wait-on http://localhost:3000      - run: npx qawolf test --headless        env:          # configure tests with environment variables          QAW_ARTIFACT_PATH: ${{ github.workspace }}/artifacts          # you can also use GitHub secrets for environment variables          # https://help.github.com/en/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets          # LOGIN_PASSWORD: ${{ secrets.PASSWORD }}            - name: Upload Artifacts        if: always()        uses: actions/upload-artifact@master        with:          name: qawolf          path: ${{ github.workspace }}/artifacts

Executar testes nas ações do GitHub

Agora que entendemos um pouco melhor nosso arquivo de fluxo de trabalho, vamos executá-lo no GitHub Actions. Se você ainda não o criou, crie um repositório Git para o seu projeto. Certifique-se de ignorar node_modules/ na tua “arquivo .gitignore “.

git initgit add .git commit -m "Initial commit"

Assegure-se de ter criou um repositório para o seu projeto no GitHub. Em seguida, envie seu código para o GitHub.

git remote add origin YOUR_REPOSITORY_URLgit push -u origin master

Vejo este repositório do GitHub Por exemplo.

Agora vá ao seu repositório GitHub e clique na aba “Actions”, que fica ao lado da aba “Pull Requests”.

Você verá que seus testes estão sendo executados. Isso ocorre porque nosso arquivo de fluxo de trabalho disse ao GitHub para executar nossos testes sempre que alguém enviasse para qualquer ramo. Clique no fluxo de trabalho executado para visualizar os detalhes. Observe que o nome varia dependendo da sua mensagem de confirmação.

Após a execução do teste, você verá uma marca de seleção verde indicando que o fluxo de trabalho foi bem-sucedido. Você também deve ver um link para baixar artefatos (vídeo e logs) em “Artefatos”. Clique neste link para fazer o download dos artefatos de teste.

Os artefatos são organizados com uma pasta por teste. No nosso exemplo, temos apenas um teste chamado “myFirstTest.test.js”. Abra esta pasta para ver os logs do navegador no arquivo “logs_0 _ $ {timestamp} .txt” e no vídeo “video_0 _ $ {timestamp} .mp4”. o 0 nos nomes dos arquivos refere-se ao índice da página. Se o seu teste envolvesse mais de uma página, haveria registros e vídeos correspondentes para cada página adicional.

Agora, vamos atualizar nosso arquivo de fluxo de trabalho para também executar nossos testes em uma programação. No arquivo “.github / workflows / qawolf.yml”, comente nas linhas 7-9.

name: qawolfon:  push:    # test every branch    # edit below if you only want certain branches tested    branches: "*"  schedule:    # test on schedule using cron syntax    - cron: "0 * * * *" # every hour

Essas linhas informam ao GitHub para executar seus testes em uma programação especificada usando sintaxe cron. o valor padrão é "0 * * * *", o que significa executar a cada hora. Atualize esse valor se desejar usar um intervalo de tempo diferente.

Mudaremos mais uma coisa sobre nosso arquivo de fluxo de trabalho. As ações do GitHub têm um limite de armazenamento para artefatos, portanto, não queremos carregá-los sempre. Em vez disso, enviaremos apenas logs e vídeos quando os testes falharem. Atualizar linha 51 de if: always() para if: failure().

# ...      - name: Upload Artifacts        if: failure()        uses: actions/upload-artifact@master        with:          name: qawolf          path: ${{ github.workspace }}/artifacts

Confirme suas alterações e envie-as para o GitHub.

git add .git commit -m "Run tests on a schedule"git push

Agora, seus testes de fumaça serão executados a cada hora no GitHub Actions!

A última parte do nosso pipeline é um sistema de alerta que nos informa quando nossos testes falham. Neste tutorial, usamos Slack porque tem um plano grátis. Você também pode usar um serviço como PagerDuty, que terá um processo de configuração semelhante.

via GIPHY

Se você ainda não possui uma conta e espaço de trabalho do Slack, crie-os agora.

Criar webhook do Slack

Agora, criaremos um webhook do Slack, que é um URL que nos permite enviar mensagens do Slack programaticamente. Faremos um POST solicitação para este URL quando nossos testes falharem.

Primeiro, precisamos criar um aplicativo Slack, que será responsável por enviar nossas mensagens de alerta. Comece visitando o Site da API do Slack. No canto superior direito, há um botão verde para “Criar novo aplicativo”.

Clique neste botão e você será solicitado a nomear seu aplicativo Slack e escolher um espaço de trabalho. Em nosso exemplo, chamamos nosso aplicativo de “testes de fumaça”. Depois de preencher o formulário, clique no botão verde “Criar aplicativo”.

Você deve ser redirecionado para a página do seu aplicativo no Slack. Verifique se você está na página “Informações básicas” em “Configurações”. Em “Adicionar recursos e funcionalidades”, há um link para “Webhooks de entrada”. Clique neste link.

Na página Webhooks de entrada, clique na alternância para ativar os webhooks de entrada.

Você poderá ver o botão “Adicionar novo Webhook ao espaço de trabalho” na parte inferior da página. Clique neste botão para adicionar um novo webhook. Usaremos este webhook para enviar uma mensagem do Slack quando nossos testes falharem.

Você será solicitado a escolher o canal onde suas mensagens serão postadas. No nosso exemplo, selecionamos o canal “alertas”. Depois de escolher seu canal, clique no botão verde “Permitir”.

Você será redirecionado para a página de webhooks. Em “URLs do Webhook para o seu espaço de trabalho”, agora você deve ver o URL do seu webhook.

Para testar seu webhook, copie o código em “Amostra de solicitação de ondulação para postar em um canal”. Será algo parecido com o seguinte.

curl -X POST -H 'Content-type: application/json' --data '{"text":"Hello, World!"}' https://hooks.slack.com/services/SECRET

Cole isso na linha de comando e pressione Enter. Você verá a mensagem “Olá, mundo!” postado no canal que você especificou.

Enviar alerta quando os testes falharem

Agora que temos nosso webhook do Slack, precisamos atualizar nosso arquivo de fluxo de trabalho GitHub Actions. Vamos adicionar uma etapa que faz uma POST solicitar ao nosso webhook quando os testes falharem.

Em vez de colar nosso URL do webhook diretamente no arquivo do fluxo de trabalho, vamos adicioná-lo ao nosso segredos do repositório. Segredos são variáveis ​​de ambiente criptografadas que armazenam informações confidenciais. Manter o URL do webhook em segredo impede que outras pessoas o vejam e potencialmente o usem para o mal. 😈

Adicione um novo segredo nas configurações do seu repositório. Chame seu segredo SLACK_WEBHOOK_URLe defina seu valor como seu URL do Slack webhook. O vídeo abaixo fornece um exemplo.

https://www.youtube.com/watch?v=urhpqJgpxGY

Agora vamos atualizar nosso arquivo de fluxo de trabalho. Na parte inferior do arquivo “.github / workflows / qawolf.yml”, adicione as seguintes linhas. Essas linhas dizem ao GitHub para fazer uma POST solicite ao seu webhook Slack quando seus testes falharem. Alteramos o valor passado para "text" de “Olá, mundo!” para “Falha nos testes de fumaça!”, mas você pode usar a mensagem que desejar.

Observe que não usamos o valor do nosso URL do Slack webhook diretamente, mas substituí-lo por ${{ secrets.SLACK_WEBHOOK_URL }}.

# ...      - name: Upload Artifacts        if: failure()        uses: actions/upload-artifact@master        with:          name: qawolf          path: ${{ github.workspace }}/artifacts          # add the following lines       - name: Post Slack Message        if: failure()        run: |          curl -X POST -H 'Content-type: application/json' --data '{"text":"Smoke tests failed!"}' ${{ secrets.SLACK_WEBHOOK_URL }}

Se você deseja testar se o seu webhook funciona, gere um erro no seu arquivo de teste “.qawolf / myFirstTest.test.js”. Em seguida, faça as alterações no GitHub.

test("myFirstTest", async () => {  await page.goto("http://todomvc.com/examples/react");  await page.click(selectors["0_what_needs_to_b_input"]);  await page.type(selectors["1_what_needs_to_b_input"], "create test!");  await page.press(selectors["2_what_needs_to_b_input"], "Enter");  await page.click(selectors["3_input"]);  await page.click(selectors["4_button"]);  // add this line  throw new Error("demogorgon!");});

Seu teste falhará e uma mensagem será postada no Slack. Você também poderá fazer o download de artefatos.

Depois de concluir o teste do webhook, remova o erro do seu código de teste.

Se você chegou até aqui, parabéns! 🎉

via GIPHY

Neste tutorial, aprendemos sobre testes de fumaça e construímos um pipeline de testes de fumaça. Agora você pode ser o herói do teste de fumaça do seu time! 🦸

Se sua equipe precisar de ajuda com o controle de qualidade ou se você quiser apenas conversar, entre em contato comigo em [email protected]. 😊