Design para inconsistência do navegador com o Lambdatest


Quando a web era jovem, uma conexão de 56k era rápida, o CSS era novo e o Flash era apenas um brilho nos olhos da Macromedia, havia uma frase que enfeitava metade de todas as telas de apresentação: Melhor visualizado no IE6.

Veja bem, no início dos anos 2000, a web era muito menos competitiva. Era perfeitamente possível ignorar 40% dos usuários e ainda gerar lucro. De fato, dada a despesa de manter uma base de código diferente para cada navegador, muitas vezes era financeiramente inviável construir para mais de um único navegador.

código front-end ainda é renderizado de maneira muito diferente em navegadores diferentes

Ao longo dos anos, a web se tornou muito mais competitiva, e os desenvolvedores sérios sobre a criação de sites lucrativos procuraram maneiras de codificar sites para um público mais amplo; os padrões da web começaram a surgir.

É difícil imaginar como teríamos lidado com o crescimento exponencial da web móvel sem a espinha dorsal dos padrões da web. No entanto, os padrões da web alimentaram o equívoco de que os navegadores exibem código de forma consistente; A verdade é que o código front-end ainda é renderizado de maneira muito diferente em navegadores diferentes.

Por que os navegadores não são consistentes?

Apesar do comprometimento do setor com os padrões da Web, os navegadores ainda processam as páginas da Web de maneira muito diferente. Existem algumas razões para isso:

Padrões da Web em evolução

A liberação de um novo recurso do CSS3, HTML5 e, especialmente, do ECMAScript leva muito tempo. Da proposta inicial à recomendação, existem centenas de revisões e emendas.

O problema é que os adotantes iniciais frequentemente se veem indo para a produção com uma versão desatualizada da especificação.

Veja o Flexbox da CSS, que conta com excelente suporte em todos os principais navegadores, oficialmente, até no IE; Infelizmente, a Microsoft codificou em uma versão mais antiga da especificação e qualquer pessoa que ainda precise oferecer suporte ao IE descobrirá que precisa executar um código compatível com versões anteriores.

Âmbito de interpretação

Os padrões da Web deixam deliberadamente muito espaço para interpretação. Existem inúmeras propriedades que são renderizadas de maneira diferente porque a especificação se refere a uma configuração padrão, sem definir esse padrão.

Embora possa ser frustrante, há uma razão sólida para essa flexibilidade: compare um elemento de seleção no navegador Safari do macOS, com a mesma seleção no navegador Safari do iOS; O select não é apenas estilizado de maneira diferente – como seria no Edge ou no Chrome – é um elemento de interface do usuário totalmente diferente!

Bugs, Código Legado e Hacks

Como todos os codificadores, os engenheiros que constroem navegadores não são perfeitos. Eles trabalham com as mesmas pressões, prazos e departamentos de marketing que o resto de nós enfrenta. O resultado é um código irregular, geralmente com erros, especialmente em casos extremos.

Existe um bug clássico no navegador que aparece apenas no Chrome: os campos de entrada com texto de espaço reservado, girados 180 graus no eixo Y, substituem inesperadamente a propriedade backface-visible. O motivo? Em algum momento, alguém que trabalha no mecanismo do Chrome (provavelmente em um esforço para acelerar a renderização) optou por alternar a visibilidade em vez de detectar o estado atual atual.

Projetando por inconsistência

Temos sorte que as guerras dos navegadores estão muito atrasadas. Mas, pelas razões listadas acima, os desenvolvedores devem adotar o fato de que, de maneiras sutis, mas inconfundíveis, os navegadores são inconsistentes.

Naturalmente, os sites não precisam ter a mesma aparência em todos os navegadores e dispositivos – um dos motivos pelos quais existem vários navegadores é que usuários diferentes têm preferências diferentes – mas um site deve funcionar e ser familiar (especialmente em dispositivos móveis e computadores) no entanto, o usuário escolhe acessá-lo.

Uma maneira de testar sites é comprar de 10 a 20 computadores e de 20 a 30 dispositivos móveis, instalar vários navegadores em cada um e testar minuciosamente cada um deles, sempre que você ajustar seu código.

A maneira mais inteligente é usar um aplicativo de teste entre navegadores como o Lambdatest.

Projetando com o Lambdatest

O Lambdatest é um SaaS que permite testar em uma enorme variedade de dispositivos, a partir do conforto da sua máquina de desenvolvimento. Você não precisa de nenhum equipamento especial, basta fazer login no site para obter uma variedade de opções de teste:

Teste entre navegadores

O Lambdatest permite executar testes ao vivo e interativos em mais de 2000 navegadores diferentes instalados em vários dispositivos. Esses não são simuladores, são instâncias reais do navegador que você acessa remotamente.

Por meio de uma interface intuitiva, você pode navegar pelos principais navegadores no macOS, iOS, Windows e Android. Compare inconsistências e use as opções de captura de tela e vídeo para registrar áreas problemáticas como buggy.

Essa abordagem manual ao teste é flexível e ideal para verificar componentes individuais de sua compilação. É ótimo para verificar se as correções foram totalmente resolvidas. Mas para testes realmente abrangentes, um teste manual é muito trabalhoso, pois o Lambdatest fornece testes automatizados.

Teste automatizado

Onde o Lambdatest realmente se destaca é o teste automatizado. A automação permite testar seu design em relação a mais de 2000 implementações de navegador. Basta selecionar o sistema operacional e os navegadores nos quais deseja testar, executar o processo automatizado de captura de tela e revisar os resultados no painel.

Para testes contínuos durante o desenvolvimento, você provavelmente só deseja comparar os navegadores de destino, mas para quaisquer marcos de construção, vale a pena testar o mais abrangente possível.

Usando a API tranquila, você pode automatizar logs, testar metadados e caçar bugs em um ritmo recorde mundial, economizando tempo, dinheiro e reputação.

Integração de Terceiros

Além de testes manuais e automação, o Lambdatest também se integra a uma ampla variedade de ferramentas de terceiros, incluindo Jira, GitLab e Trello. Isso significa que você pode testar seu site completamente, sem nunca deixar a segurança do seu fluxo de trabalho existente.

Há também uma extensão do Chrome e um plugin do WordPress. Ambos permitem que você faça uma captura de tela do seu site, em mais de 2000 navegadores, com um único clique no seu navegador ou no painel de administração do WordPress.

Teste de comparação inteligente

Talvez o recurso que mais gostamos seja o recurso de teste da UI inteligente. O que esse recurso inovador faz é detectar automaticamente quando algo está errado. É ótimo para designers e desenvolvedores que trabalham remotamente, que não têm os olhos de um colega novo para emprestar para verificar as alterações.

Basta puxar uma das capturas de tela dos testes automatizados do Lambdatest para usar como linha de base, depois executar a ferramenta Teste de Comparação Inteligente e sinalizará quaisquer diferenças notáveis.

É uma ferramenta fantástica para quando você está corrigindo rapidamente erros e precisa verificar duas vezes se sua correção não quebrou outra coisa. Dado que a grande maioria dos bugs no código é introduzida ao invadir inconsistências no navegador, é sempre aconselhável verificar se as soluções que você apresenta não estão trazendo consigo uma série de problemas totalmente novos.

Por que escolher a Lambdatest

O número de navegadores e dispositivos diferentes nos quais você precisa testar, apenas para cobrir as marcas mais populares do mercado, é proibitivamente caro para a maioria das equipes. Sem mencionar a demanda constante para manter a atualização. O Lambdatest elimina esse custo e traz testes abrangentes ao alcance de todos os profissionais da web. Sem o teste entre navegadores que o Lambdatest permite, é praticamente impossível projetar e criar um site moderno.

O que amamos no Lambdatest é que é uma maneira flexível de realizar testes abrangentes e confiáveis ​​em seu fluxo de trabalho existente. Existem outros aplicativos que permitem testar em diferentes navegadores, mas geralmente forçam uma nova maneira de trabalhar com você, o Lambdatest não.

Você pode experimentar o Lambdatest gratuitamente, aproveitando o plano freemium que oferece 6 x 10 minutos de teste, 10 sessões de capturas de tela e 10 sessões de testes responsivos. Quando você estiver feliz que o Lambdatest seja adequado para você e sua equipe, os planos começam em apenas US $ 15 / mês.

[– This is a sponsored post on behalf of Lambdatest –]



Fonte

Leave a Reply

Your email address will not be published. Required fields are marked *