O primeiro browser surgiu nos anos 90, era o WorldWideWeb e era a única forma de aceder à internet. Depois deste, surgem outros browsers como o Lynx e o Mosaic – o Lynx só permitia textos, não tinha imagens nem outro tipo de conteúdo, enquanto o Mosaic foi o primeiro browser a permitir imagens.

O grande salto deu-se quando apareceu o Internet Explorer, em 1995, criado pela Microsoft. O Internet Explorer dominou o mercado, pois ao mesmo tempo surgiu o sistema operativo Windows 95 onde este browser já vinha instalado – as pessoas deixaram de ter de procurar browsers para instalar. Em junho de 2022, depois de mais de 25 anos de vida, o IE “reformou-se” e fizémos o nosso “adeus ao Internet Explorer”.

Em 2003 surge o Safari, que foi criado especificamente para os computadores da Apple – tal como a Microsoft fez com a Internet Explorer – esta foi a resposta da Apple para combater a concorrência. No ano seguinte, em 2004, surge o Firefox com o mesmo objetivo de competir com a Internet Explorer. Em 2008, surge o Google Chrome que, até hoje, é o browser mais utilizado de sempre e chegou a este patamar muito rapidamente.

Como podemos perceber, existem vários tipos de browsers e foram surgindo ao longo de vários anos, mas sabia que todos agem de forma diferente? Os conteúdos e os sites comportam-se de forma diferente consoante o browser que utilizamos e isto acontece devido ao Rendering Engine.

O Rendering Engine está relacionado com a forma como cada browser interpreta o código HTML, Javascript, entre outros. Cada browser tem o seu, o que significa que cada um vai interpretar todos estes códigos de forma diferente, o que vai fazer com que altere a forma como vê os conteúdos num Google Chrome ou num Firefox.

Os principais passos do processo de um Rendering Engine são os seguintes:

• Esta ferramenta recebe o código HTML em blocos – incluindo ficheiros de estilos (css, por exemplo);
• Cria a render tree que inclui informação de estilos tais como as informações que definem onde e como é que aparece cada elemento nas páginas (a ordem, por exemplo);
• Passando para a parte do layout, a render tree define o tamanho e posições dos mesmos utilizando as coordenadas exatas;
• Por último, pega em toda esta informação e transporta-a para o UI (User Interface) para ser possível visualizar no ecrã.

A forma como estes processos são feitos são diferentes dependendo do seu browser. É possível que visualize um site de uma forma no Google Chrome e ver de outra forma no Safari, por exemplo.

É por todos estes fatores que testar um website em multiplas plataformas e multiplos browsers é essencial para a quality assurance. Como cada browser interpreta as web pages de várias formas, depois do testing há ajustes e otimizações a fazer para que a user interface e user experience esteja assegurada, independentemente do browser usado pelo utilizador, com o objetivo de resultarem em todos da melhor forma possível.