Pontos principais

  • Teste se a mudança de país atualiza rótulos, requisitos e formatos juntos
  • Entrada bruta separada, valores normalizados e resultados do servidor
  • Configurar tokens de preenchimento automático semântico e rótulos visíveis localizados
  • Preservar a entrada após falha e mover o foco para um erro útil

Autoria e revisão

Princípios editoriais
Escrito por
Equipe Editorial do Gerador de Endereços Aleatórios
Revisado por
Equipe de revisão de formulários e controle de qualidade
Última atualização relevante
Adicionada troca de país, campos dinâmicos, tokens de preenchimento automático e uma matriz de teste em camadas.

Camada um: estado de mudança de país

A seleção de um país pode renomear Cidade, alterar Estado para Província ou Prefeitura, ocultar uma região e substituir a dica de código postal. Afirme que a UI e API derivam da mesma configuração de país.

Nunca apague silenciosamente o texto inserido em uma mudança de país. Confirme primeiro ou retenha os rascunhos por país e depois bloqueie esse comportamento em testes de regressão.

PaísEtiquetas localizadasComportamento chave
Estados UnidosEstado/CEPEstado de duas letras e CEP de cinco dígitos
CanadáProvíncia / Código PostalA1A 1A1 com espaço
Reino UnidoPost Town / Código Postalcondado normalmente opcional
JapãoPrefeitura / Código postalCódigo de sete dígitos e vários níveis
AustráliaSubúrbio / Estado / Código PostalCódigo postal de quatro dígitos

Camada dois: HTML semântico e preenchimento automático

nome, rótulo e preenchimento automático têm trabalhos distintos. Os rótulos explicam o significado local; o nome segue o contrato API; o preenchimento automático usa tokens padronizados, como país, address-line1, address-level1, address-level2 e postal-code.

Não combine endereço com address-line1 e address-line2 para a mesma representação de endereço.

<input name="addressLine1" autocomplete="shipping address-line1" />
<input name="locality" autocomplete="shipping address-level2" />
<input name="region" autocomplete="shipping address-level1" />
<input name="postalCode" autocomplete="shipping postal-code" />

Camada três: validação, normalização e verificação

A validação pergunta se o formato de entrada é aceitável. A normalização padroniza caixas e separadores. A verificação compara com dados de referência. Dê-lhes estados e mensagens separados.

Evite reescrever a cada pressionamento de tecla. Normalize ao desfocar ou enviar e mostre a alteração resultante.

  • Distinguir erros de caracteres vazios, muito longos e de caracteres inválidos
  • Retenha rawValue antes da normalização
  • Não limpe o formulário após um tempo limite de pesquisa
  • Nunca rotule uma correspondência de regex como entrega

Camada quatro: recuperação de erros e acessibilidade

Após a falha, concentre-se em um resumo do erro ou no primeiro campo inválido. Conecte mensagens com aria-describedby, nunca confie apenas na cor e retenha outros valores de campo.

Seleção de países para teste de teclado, listas de sugestões, links de erro e foco pós-envio. Localize testes automatizados por rótulos ou funções, em vez de espaços reservados específicos do país.

Camada cinco: validar o payload real da API

Capture a solicitação enviada e declare countryCode, regionCode, postalCode, rawAddress e normalizedAddress. Leia o registro para detectar falhas de codificação e de conversão nula.

Uma asserção somente de interface do usuário pode perder uma seleção de província que exibe Ontário corretamente, mas envia Ontário em vez de ON. Também pode perder uma segunda linha limpa que deixa o valor anterior armazenado. Execute um registro por meio de criação, edição, reabertura e exportação para que o teste comprove uma viagem de ida e volta completa em vez de um estado de tela bem-sucedido.

Exercite o comportamento de pesquisa de terceiros com respostas lentas, limitação de taxa, erros de servidor, nenhuma sugestão e diversas sugestões plausíveis. Uma falha de rede não deve ser declarada porque seu endereço está errado. A indisponibilidade do sistema e a entrada inaceitável são estados diferentes com soluções diferentes.

Versão da configuração do país usada pelo teste. Quando as regras postais ou os requisitos do produto mudam, uma falha deve identificar se o aplicativo foi alterado ou se o instantâneo de referência foi alterado.

  • Faça um instantâneo da solicitação final JSON
  • Confirme se a limpeza de um campo opcional remove seu valor antigo
  • Simular tempo limite, 429, 500, nenhum resultado e vários resultados
  • Cópia de erro de sistema separada da cópia input-error

Perguntas frequentes

Todos os países deveriam mostrar um campo Estado?

Não. Renomeie-o como Província, Prefeitura ou Região, quando apropriado, e oculte-o onde o país não exigir esse nível.

O preenchimento automático pode substituir um rótulo visível?

Não. O preenchimento automático atende ao navegador; os rótulos atendem às pessoas e à tecnologia assistiva.

Uma pesquisa com falha pode limpar o formulário?

Não deveria. Preserve a entrada, identifique o campo e deixe o usuário corrigi-lo no local.

Fontes e leituras

  1. MDN: atributo de preenchimento automático HTML
  2. WHATWG: Endereço de nomes de campos de preenchimento automático