Passo 1 de 8
Preparar um roteiro de testes
Monte uma base local de duas páginas e prepare casos de teste com expectativas verificáveis, estado e contexto de execução.
Trilha de aprendizado · Nível 7 · Tutorial 6
Ao concluir, você será capaz de executar um roteiro de testes para localizar destinos incorretos e recursos que não carregam, registrando informações suficientes para corrigir e conferir cada falha.
Preparar um roteiro de testes
Monte uma base local de duas páginas e prepare casos de teste com expectativas verificáveis, estado e contexto de execução. 2 min
Testar o menu a partir de cada página
Confira cada par de origem e destino do menu, verificando o endereço alcançado e o conteúdo da página de chegada. 2 min
Conferir links para trechos da página
Confirmar separadamente o documento alcançado e o trecho indicado pelo fragmento. 1 min
Inventariar recursos e conferir imagens e ícones
Liste as dependências de cada página e confira imagens e ícones sem aprovar recursos que ainda não foram verificados. 2 min
Investigar carregamentos no painel Rede
Capture requisições e diferencie recurso não encontrado, bloqueio local e resposta bem-sucedida que ainda exige conferência. 2 min
Testar reprodução e carregamento de legendas
Confirme a reprodução das mídias e diferencie carregamento de legenda, exibição do texto e limitações do ambiente. 2 min
Registrar, corrigir e testar novamente
Registre uma falha reproduzível, confirme a correção e selecione os testes afetados pela mudança. 2 min
Concluir a revisão funcional do site
Consolide evidências, proponha correções e diferencie testes concluídos de verificações pendentes. 2 min
Passo 1 de 8
Monte uma base local de duas páginas e prepare casos de teste com expectativas verificáveis, estado e contexto de execução.
Comece com um roteiro, não com a pergunta “o site funciona?”. Cada caso de teste deve registrar:
Defina a expectativa antes do teste. Preencha a observação somente depois de executar a ação.
Dica
Um recurso que não faz parte da página fica fora do escopo. Isso é diferente de um recurso previsto que não carregou.
No seu editor, crie a pasta site-teste. Dentro dela, salve index.html e crie a subpasta paginas, com o arquivo sobre.html.
Copie os documentos completos abaixo para os respectivos arquivos. Esta base tem navegação e links para trechos, mas ainda não inclui imagens, ícones, áudio ou vídeo.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Guia do bairro</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">Início</a></li>
<li><a href="paginas/sobre.html">Sobre</a></li>
</ul>
</nav>
</header>
<main>
<h1>Guia do bairro</h1>
<p>Conheça nosso projeto de informações sobre o bairro.</p>
<p><a href="#contato">Ir para contato</a></p>
<p><a href="paginas/sobre.html#equipe">Conhecer a equipe</a></p>
<section id="contato">
<h2>Contato</h2>
<p>Envie sugestões nas reuniões de sábado.</p>
</section>
</main>
</body>
</html><!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sobre o guia</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
</ul>
</nav>
</header>
<main>
<h1>Sobre o guia</h1>
<p>Este projeto reúne informações para os moradores.</p>
<section id="equipe">
<h2>Equipe</h2>
<p>O guia é organizado por moradores voluntários.</p>
</section>
<p><a href="../index.html#contato">Ver contato</a></p>
</main>
</body>
</html>Abra index.html no navegador. Em suas anotações, registre o nome do navegador, a versão se disponível e o endereço completo da página.
Nesta prática, você pode usar file://; não precisa configurar um servidor. Registre o contexto realmente usado.
Exemplo
Origem: index.html.
Ação: clicar em “Sobre” no menu.
Esperado: abrir paginas/sobre.html e exibir o título principal “Sobre o guia”.
Observado: ainda não registrado.
Estado: não testado.
Esse resultado é verificável. “O menu funciona” não informa qual destino deveria abrir. Apenas abrir a página de origem ainda não executa o caso.
Considere este cenário: você está em paginas/sobre.html e vai testar o link “Início” do menu, mas ainda não clicou nele.
Escreva a origem, a ação, o resultado esperado, o resultado observado e o estado. No resultado esperado, indique o arquivo de destino e um conteúdo específico que deve aparecer.
Escreva pelo menos 40 caracteres (0/40).
Passo 2 de 8
Confira cada par de origem e destino do menu, verificando o endereço alcançado e o conteúdo da página de chegada.
Um menu funcionar na página inicial não garante que funcione na subpasta. Teste cada link a partir de cada página: a unidade de cobertura é o par origem → destino, não a aparência do menu.
Exemplo
Neste exemplo, os dois menus têm links para Início e Contato. Os arquivos, a partir da pasta inicial do site, são:
index.html.paginas/contato.html.O roteiro precisa cobrir:
Inclua também os links que devem levar à própria página.
Você testou os links Início e Contato somente a partir de index.html. Ambos chegaram aos destinos esperados. Qual conclusão é válida?
No site preparado na etapa anterior, use os nomes reais das páginas:
Repita a sequência a partir da página inicial e da página na subpasta.
Exemplo
Um link para um arquivo inexistente está quebrado. Já um link Contato que abre a página inicial alcança um destino existente, mas incorreto. Os dois casos falham, embora apenas o primeiro possa exibir uma mensagem de erro.
Considere este resultado do exemplo:
paginas/contato.html.index.html, com o título Início e a apresentação do site, sem mensagem de erro.Qual estado você registraria e por quê? De onde deve começar o próximo caso, que testa o link Início do menu de Contato?
Escreva pelo menos 20 caracteres (0/20).
Passo 3 de 8
Confirmar separadamente o documento alcançado e o trecho indicado pelo fragmento.
Para aprovar um link com fragmento, confira duas coisas:
id do elemento pretendido? Observe o trecho exibido e confira o identificador no inspetor.Dica
O fragmento na barra de endereços não comprova que o alvo existe. Pouca ou nenhuma rolagem também não comprova falha: o trecho pode já estar visível.
Use os arquivos já criados, sem alterá-los:
index.html e clique no link para #contato.paginas/sobre.html e clique no link para ../index.html#contato.Em cada caso, confirme o documento index.html, observe o trecho de contato e inspecione seu id. Registre cada origem e seu resultado separadamente.
Dica
Se não houver elemento correspondente, registre alvo inexistente. Se o identificador estiver em um trecho diferente do esperado, registre alvo incorreto — mesmo que tenha ocorrido rolagem.
Exemplo
Este caso não representa os arquivos da sua base; não os altere.
paginas/sobre.html.href="../index.html#contatos".index.html.index.html#contatos, sem rolagem perceptível.inicio e contato; o trecho Contato tem id="contato".Em uma frase, identifique o documento alcançado, compare o fragmento solicitado com o identificador existente e justifique o estado do caso com uma evidência.
Escreva pelo menos 30 caracteres (0/30).
Passo 4 de 8
Liste as dependências de cada página e confira imagens e ícones sem aprovar recursos que ainda não foram verificados.
Amplie o roteiro com página, tipo de recurso, referência utilizada e resultado esperado. Inclua o que existir: imagens, ícones, candidatos de srcset e picture, pôsteres, fontes alternativas de áudio e vídeo e arquivos de legenda.
Cada alternativa entra no inventário, mesmo que o navegador não a selecione. Recursos ausentes ficam fora do escopo; verificações ainda não realizadas ficam como “não testado”.
Exemplo
Página: recursos.html
A imagem aparecer no conteúdo não comprova que o ícone apareceu na aba.
Na pasta inicial do site, crie recursos.html, preservando as páginas anteriores. Coloque ao lado uma imagem própria em PNG, com conteúdo fácil de reconhecer. No código, substitua foto.png nas duas referências pelo nome e extensão reais do arquivo e adapte o alt à sua imagem.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Conferência de recursos</title>
<link rel="icon" href="foto.png">
</head>
<body>
<main>
<h1>Conferência de imagem e ícone</h1>
<img src="foto.png" alt="Bicicleta azul" width="240">
</main>
</body>
</html>Salve e abra a página no navegador. Confira se a imagem corresponde ao arquivo escolhido e se sua miniatura aparece na aba. Registre os dois resultados separadamente, com navegador e contexto de abertura. Texto alternativo ou espaço reservado não comprovam carregamento.
Dica
O navegador pode manter ícones em cache mesmo após atualizar a página. Se aparecer uma versão antiga, registre a divergência: isso, sozinho, não comprova referência incorreta nem permite aprovar o ícone atual.
Em páginas com picture ou srcset, confira o conteúdo nas condições relevantes de largura da janela, densidade da tela e suporte a formato. Registre a condição usada e o resultado observado.
Redimensionar a janela uma vez não garante que todos os candidatos tenham sido selecionados. Não aprove arquivos alternativos sem evidência de que foram verificados.
Exemplo
O sucesso do primeiro caso não aprova o segundo.
Associe cada situação à conclusão sustentada pelas evidências.
Toque em um item e depois no par correspondente.
Passo 5 de 8
Capture requisições e diferencie recurso não encontrado, bloqueio local e resposta bem-sucedida que ainda exige conferência.
Na página do seu site, escolha uma imagem do inventário e siga este roteiro:
Dica
Se disponível, marque Desativar cache, mantenha as ferramentas abertas e recarregue novamente. Desmarque ao terminar a investigação. Isso reduz dúvidas sobre cópias antigas, mas não garante atualização imediata do ícone da aba.
Execute o roteiro no seu computador. Registre navegador, contexto de abertura (file://, HTTP ou HTTPS), endereço solicitado da imagem, status ou mensagem e o que apareceu na página. Se não localizar a requisição, relate essa limitação.
Escreva pelo menos 20 caracteres (0/20).
Em file://, um arquivo ausente pode gerar uma mensagem como net::ERR_FILE_NOT_FOUND, sem código HTTP 404. Já um bloqueio indicado pelo navegador não comprova que o arquivo esteja ausente ou que a referência esteja errada. Preserve a mensagem e o contexto no registro.
Associe cada registro fictício à conclusão justificada. Os casos são completos para esta análise; não é necessário abrir os endereços.
Toque em um item e depois no par correspondente.
Passo 6 de 8
Confirme a reprodução das mídias e diferencie carregamento de legenda, exibição do texto e limitações do ambiente.
Ver controles ou a duração da mídia não comprova que ela reproduz.
Escolha um vídeo próprio com som e conteúdo conhecidos. Na mesma pasta dele, crie midia.html com o código abaixo. Substitua meu-video.mp4 pelo nome e pela extensão reais do arquivo.
Se não tiver um vídeo disponível, registre a prática como não testada e siga para o caso de análise.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teste de reprodução</title>
</head>
<body>
<main>
<h1>Teste de reprodução</h1>
<video controls width="320" src="meu-video.mp4"></video>
</main>
</body>
</html>Dica
Abra a página no navegador. Com o painel Rede aberto, recarregue e clique em reproduzir. Confira o avanço do tempo, o som e a imagem esperados. Para áudio, confira tempo e som.
Quando houver fontes alternativas, identifique no painel Rede o arquivo carregado durante a reprodução. Não aprove as outras fontes por esse resultado. Se não conseguir identificar qual foi usada, registre a dúvida.
Registre o navegador, o contexto de abertura (file://, HTTP ou HTTPS), o arquivo de mídia, o intervalo reproduzido e o que observou no tempo, no som e na imagem. Indique se passou ou falhou nesse intervalo. Se não executou a prática, registre “não testado” e o motivo.
Escreva pelo menos 20 caracteres (0/20).
Para conferir legendas, ative a faixa nos controles do vídeo e reproduza um intervalo com texto previsto. Combine a observação na tela com a evidência de carregamento no painel Rede.
Analise este caso fictício executado em HTTPS. A página midia.html e os três recursos abaixo estão na mesma pasta. Esta análise não conta como teste do seu site.
Marcação para análise; não é necessário copiá-la.
<video controls width="320">
<source src="visita.mp4" type="video/mp4">
<source src="visita.webm" type="video/webm">
<track kind="captions" src="visita-pt.vtt"
srclang="pt-BR" label="Português">
</video>Com a faixa ativa, este texto deve aparecer entre 5 e 8 segundos.
WEBVTT
00:00:05.000 --> 00:00:08.000
Vamos começar a visita.
Exemplo
Navegador: Firefox. Contexto: HTTPS. Origem: midia.html.
Após clicar em reproduzir, o tempo avançou de 0 a 10 segundos, com imagem e som esperados.
Painel Rede:
Nenhuma legenda apareceu. Não foi registrado se a faixa “Português” estava ativada.
Atenção
Em file://, um bloqueio de WebVTT pelo navegador não comprova referência incorreta. Registre a verificação da legenda como bloqueada. A confirmação real exige executar o teste em HTTP ou HTTPS.
No caso em HTTPS, o que foi confirmado sobre as fontes de vídeo e a legenda? O que falta fazer para conferir sua exibição? Se, em vez disso, o navegador bloqueasse o WebVTT em file://, como você registraria essa verificação?
Escreva pelo menos 30 caracteres (0/30).
Passo 7 de 8
Registre uma falha reproduzível, confirme a correção e selecione os testes afetados pela mudança.
Um bom registro permite repetir a falha. Separe a evidência observada da hipótese sobre a causa, que ainda precisa ser conferida.
Exemplo
Este é um caso fictício, não um teste executado no seu site.
paginas/sobre.html.src="../imagens/Equipe.PNG"./imagens/Equipe.PNG com resposta 404 no painel Rede.Dica
Compare caminho, nome, extensão e maiúsculas/minúsculas com o arquivo real: diferenças toleradas em um ambiente podem falhar em outro. Corrija no arquivo-fonte, salve e recarregue a página. Uma alteração apenas no inspetor não salva a correção.
Coloque as ações na sequência de um ciclo reproduzível.
O teste de regressão verifica se as partes afetadas continuam funcionando após a alteração. Mudou nome, pasta ou recurso compartilhado? Use o inventário para identificar as páginas dependentes e repetir os casos afetados.
Exemplo
Foi confirmado que o arquivo real é imagens/equipe.png. Somente duas páginas usam essa foto. As referências foram corrigidas e os arquivos HTML, salvos:
index.html: de src="imagens/Equipe.PNG" para src="imagens/equipe.png".paginas/sobre.html: de src="../imagens/Equipe.PNG" para src="../imagens/equipe.png".Reteste realizado: ao recarregar paginas/sobre.html no Firefox, por HTTPS, a foto esperada apareceu.
Pendente: index.html ainda não foi testada após a mudança.
Com base no caso, acrescente ao registro de paginas/sobre.html a alteração realizada e o resultado do reteste. Indique também qual outro caso precisa ser repetido, por quê e qual estado deve manter enquanto isso.
Escreva pelo menos 40 caracteres (0/40).
Passo 8 de 8
Consolide evidências, proponha correções e diferencie testes concluídos de verificações pendentes.
Analise este caso fictício usando o fluxo: definir expectativas → executar → investigar → registrar → corrigir → repetir os testes afetados. Não é necessário criar arquivos; esta análise não conta como teste do seu próprio site.
Exemplo
Ambiente registrado: Chrome, acesso por HTTPS, site na raiz do domínio.
Arquivos existentes:
index.html: página Início.paginas/contato.html: página Contato, com id="horarios" no trecho Horários.assets/fachada.png: foto de uma fachada azul.assets/icone.png: ícone de um círculo azul.As duas páginas devem exibir o menu Início/Contato, a foto e o ícone. Há links para Horários nas duas páginas. Não há áudio, vídeo, legendas nem variantes responsivas de imagem.
Exemplo
Cada clique partiu novamente da origem indicada.
Menu Início: index.html, na página inicial, e ../index.html, na página Contato, abriram a página Início correta.
Menu Contato: em index.html, href="index.html" abriu Início, com HTTP 200. Em paginas/contato.html, href="contato.html" ainda não foi testado.
Horários: paginas/contato.html#horarios, em Início, e #horarios, em Contato, exibiram o trecho correto no documento esperado.
Foto: src="assets/fachada.jpg", em Início, e src="../assets/fachada.jpg", em Contato, solicitaram /assets/fachada.jpg. Resultado nas duas páginas: HTTP 404 e foto ausente.
Ícone: referências assets/icone.png e ../assets/icone.png, respectivamente. A exibição na aba não foi conferida em nenhuma página.
Escreva um relatório curto: registre as duas falhas com origem, referência, esperado e observado; proponha correções; indique retestes e verificações pendentes. Inclua navegador e contexto. Não apresente correções propostas como já executadas.
Escreva pelo menos 80 caracteres (0/80).
Resumo
Parabéns! Você concluiu: Testar links e carregamento de recursos do site
Você concluiu “Testar links e carregamento de recursos do site”. Aplique o roteiro ao seu site, mantendo evidências e limites registrados. Na sequência da trilha, você verificará a navegação e os controles pelo teclado.
Milhares de cursos online em vídeo, ebooks e áudiobooks.
Para testar seus conhecimentos no decorrer dos cursos online
Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail
Baixe nosso aplicativo pelo QR Code ou pelos links abaixo:.
Leve o conhecimento no seu bolso.
Baixe o aplicativo Cursa.
São centenas de Cursos gratuitos a disposição, com Certificado de conclusão gratuito que é salvo em sua galeria de imagens do celular.
Baixe o app para ter acesso ao Certificado de conclusão de Curso Gratuitamente.
+ de 10 milhões
de alunos
Certificado grátis e
válido em todo o Brasil
60 mil exercícios
gratuitos
4,8/5 classificação
nas lojas de apps
Cursos gratuitos em
vídeo, ebooks e audiobooks
