um mergulho profundo no teste CSS: guia completo de um desenvolvedor

quando se trata de testes front-end, o teste CSS é frequentemente esquecido. Existem, sem dúvida, desafios significativos no teste CSS, mas isso não significa que ele deva ser descartado como uma ferramenta sem importância em uma estratégia geral de teste. Neste post, ofereceremos um guia para esta forma de teste, para que você entenda as motivações por trás do uso e conheça as etapas práticas para começar.

vamos abrir o post com as questões fundamentais:

• o que é o teste CSS?
• por que você deve se preocupar com isso??
• como você testa CSS?

assim que tirarmos o básico do caminho, guiaremos você por uma lista de algumas das principais ferramentas de teste CSS. Você entenderá mais sobre as diferentes ferramentas e categorias de ferramentas neste espaço.

antes de encerrar, compartilharemos algumas considerações finais, incluindo como o Testim Automate pode contornar alguns dos obstáculos impostos pelo CSS ao fazer testes automatizados de ponta a ponta.

vamos lá.

CSS Testing Basics

vamos começar respondendo às perguntas fundamentais.

o que é o teste CSS?

o teste CSS, como o nome sugere, é o processo de testar suas folhas de estilo. Mais especificamente, nos referimos ao teste CSS automático. Afinal, isso é 2021 e a automação de testes é essencial. Isso é verdade em todos os níveis, camadas e formas de teste. O teste CSS não é uma exceção.

por que você deve se preocupar com o teste CSS?

CSS é um membro da trifecta web (HTML, CSS e JavaScript). Como tal, é vital para a qualidade de um aplicativo da web. Problemas em CSS farão com que o aplicativo/site da web não seja renderizado corretamente.

a interface do Usuário é uma área particularmente sensível de um aplicativo quando se trata da experiência do Usuário. Afinal, a interface é o que o usuário vê e toca—literalmente, no caso do celular.

portanto, o teste CSS deve ser um componente crucial do teste de interface do Usuário se sua organização levar a sério o fornecimento de uma experiência de usuário agradável aos usuários.

como você testa CSS?

você pode testar CSS de várias maneiras. Isso ocorre porque o teste CSS não é uma única coisa; em vez disso, ele vem em tipos diferentes. Os quatro tipos principais são:

• Regressão
• Sintaxe
• Projeto
• Referência

agora Vamos cobrir cada um desses tipos.

Regressão

o teste CSS de regressão é o mesmo teste de regressão antigo aplicado ao CSS. O teste de regressão é menos um tipo de teste—como, teste unitário ou teste de ponta a ponta-e mais uma estratégia. Consiste em Configurar um conjunto de testes para detectar regressões ou bugs após alterações na base de código.Portanto, o teste de regressão CSS verifica se você não quebra o estilo da página após alterar a página.

sintaxe

esta categoria refere-se a técnicas de teste e ferramentas que verificam se sua sintaxe CSS está bem. Em poucas palavras, é como um linter para CSS.

projeto

a categoria “projeto” significa verificar se o CSS respeita os padrões do projeto e da organização.

referência

finalmente, o teste CSS de referência verifica se a página implementada e renderizada parece com a aparência que deveria. Muito progresso foi feito nesta área, e as coisas são muito melhores do que costumavam ser na Idade das trevas do domínio do Internet Explorer.

no entanto, isso não significa que não haja mais desafios. Apesar de muitos dos principais navegadores de hoje compartilharem uma base comum-o navegador de código aberto Chromium—é provável que você tenha dificuldades ao garantir que sua página pareça e se comporte da mesma forma em pelo menos os navegadores mais usados.

ferramentas de teste CSS: Aqui estão algumas das principais

vamos orientá-lo através de algumas das ferramentas disponíveis que você pode querer verificar.

Como dissemos antes, o teste CSS é uma área frequentemente negligenciada nos testes. Uma das implicações disso é o número reduzido de ferramentas disponíveis em comparação com outros tipos de testes.

CSS Lint

CSS Lint é precisamente o que seu nome sugere: um linter para código CSS. Você pode acessá-lo em seu site ou instalá-lo como um pacote npm.

CSS Lint oferece verificação de sintaxe, além de usar regras para verificar se o código não contém problemas. Você também pode escrever seu próprio conjunto de regras.

BackstopJS

BackstopJS é uma ferramenta de regressão visual para aplicativos da web. Ele faz isso comparando imagens dom tomadas ao longo do tempo. Você pode instalá-lo facilmente com a ngp:

BackstopJS torna testes com headless Chrome e pode simular as interações do usuário usando o Marionetista scripts. Você pode adicioná-lo ao seu CI e ele vem com renderização integrada do Docker.

Quixote

Quixote é um teste de unidade e integração para CSS. Usando esta biblioteca, você pode verificar como os elementos HTML são renderizados pelo navegador e verificar como os elementos se relacionam entre si. O Quixote funciona em navegadores modernos para desktop e dispositivos móveis, mas você também pode usar uma ferramenta como o Karma para executar testes do Quixote em vários navegadores.

você pode instalar esta ferramenta via npm:

CSSCritic

CSS Crítico é uma ferramenta automática de testes de regressão de CSS.

funciona comparando o estado atual do seu layout com uma imagem de referência que você fornece. Sempre que o layout muda, os testes falham.

você pode obter CSS Critic usando npm:

Uma limitação importante é que CSSCritic só funciona no Firefox e no Chrome.

conclusão

o teste CSS é uma forma de teste frequentemente negligenciada. O que, infelizmente, faz algum sentido, já que o CSS sempre foi uma espécie de patinho feio da trifecta da web.

no entanto, como os erros CSS certamente afetam a interface de um aplicativo da web—o que, por sua vez, afeta negativamente a experiência do usuário—testar suas folhas de estilo é de suma importância se você deseja entregar uma ótima experiência de usuário aos seus visitantes.

neste post, vimos os fundamentos do teste CSS: o que é, por que é importante e como você o faz. Também orientamos você por algumas das principais ferramentas, abrangendo diferentes categorias: linters, teste de Unidade, Teste de regressão e teste de regressão visual. Agora você sabe mais sobre o conceito de teste CSS e as ferramentas à sua disposição.

antes de encerrar, aqui está um pensamento final: CSS é importante, e não apenas no contexto do teste CSS. Também é importante para outros tipos de testes.

por exemplo, as ferramentas de teste de ponta a ponta costumam usar nomes de classes CSS como identificadores. Infelizmente, essa pode ser uma abordagem frágil. É comum que os desenvolvedores usem técnicas que acabam anexando identificadores aleatórios às suas classes CSS. Módulos CSS são um exemplo de tal abordagem.

o uso de tais técnicas geralmente resulta em testes frágeis. Muitas ferramentas dependem de nomes de classe para encontrar elementos no DOM. Quando os nomes das classes mudam, os testes falham, resultando em manutenção pesada do teste.

existem melhores abordagens, no entanto. Por exemplo, Testim recentemente adicionou um recurso chamado Localizador de filtragem e mapeamento. Ele permite que o Testim filtre a parte dinâmica dos nomes das classes ao determinar localizadores para cada elemento. Isso melhora a precisão do localizador, tornando os casos de teste mais robustos. Dê Testim uma tentativa e localizador de filtragem. Teste feliz!