Com a popularidade das aplicações web e a possibilidade de execução nos mais diferentes tipos de dispositivos e browsers, é comum encontrar diferenças entre a renderização de uma mesma aplicação em diferentes ambientes, essas diferenças são conhecidas como Cross Browser Issue(XBI).
Essas diferenças podem ser classificadas em problemas visuais(e.g. diferentes: margens, tamanhos, cores e visibilidade de um elemento) ou funcionais(e.g. um menu drop down que deixa de funcionar, uma caixa de diálogo que não abre).
A maioria das ferramentas existentes hoje são criadas pelos próprios autores de artigo sobre o tema ou por empresas.
[ Atenção: Essa postagem é um rascunho, as informações podem estar incompletas ou incorretas. Deixe um feedback. ]
Adobe BrowserLab — Ferramenta que permitia testes cross-browser em websites mostrando screenshots lado-a-lado para classificação manual de XBIs, foi descontinuado em 13 de março de 2013.
Microsoft Expression Web — A partir da versão 3, o Microsoft Expression Web introduziu uma ferramenta chamada SuperPreview que permitia renderização cross-browser lado-a-lado.
Browsera — Tecnologia fechada e pago, usava uma comparação ingênua entre o Document Object Model(DOM) das páginas segundo [Choudhary, 2011].
WEBDIFF — O WEBDIFF foi proposto por Choudhary em 2010, ele consiste em detectar XBIs coletando os dados da página web, fazer uma combinação da informação da estrutura da página(DOM) com a parte visual da página obtida por meio de captura de telas e com esses dados combinados é feito uma comparação entre os browsers.
Na comparação de imagens é utilizado uma métrica conhecido como Earth Mover’s Distance(EMD), o EMD ajuda a medir a distância entre duas distribuições e ajuda a evitar falsos positivos na questão de detectar diferenças entre as capturas de tela, outro aspecto levado em consideração na analise visual é os conteúdos que são variáveis quando a página é recarregada.
Para o cálculo de diferenças entre browsers é determinado um browser como referência e todos os outros serão comparados com ele. Além disso, é feito com que a janela de cada browser tenha o mesmo tamanho para que as imagens tenham a mesma área.
Link: https://github.com/shauvik/webdiff
Nota: O WEBDIFF usa a API Win32 para manipular os browsers e foi testado apenas no Windows XP apesar de que deve funcionar em outros Windows ele não funciona em outras plataformas.
CrossT — É uma ferramenta proposta por Prassad e Mesbah, funciona examinando as URLs alvo por meio de uma ferramenta open source chamada Crawljax[2], essa ferramenta permite explorar o estado dos componentes da aplicação web, após capturar os estados são armazenados como um modelo de navegação em uma máquina de estado finito. A segunda parte consiste em comparar os modelos gerados por cada browser.
CrossCheck — Proposto por Choudhary, Prasad e Orso em 2012, se propõe a detectar problemas de renderização de layout e de funcionalidades combinando as abordagens do WEBDIFF(Análise visual) e do CrossT(Análise dos estados DOM).
Browserbite — Proposto em 2013 combina processamento de imagem com aprendizado de máquina.
X-PERT(Cross-Platform Error ReporTer) — Proposto por Choudhary, Prasad e Orso em 2013, é uma melhoria em relação ao CrossCheck, busca aplicar técnicas mais adequadas a cada XBI, dessa forma na maioria das vezes ele não reporta XBI duplicadamente e evita falsos positivos/negativos.
Um exemplo dado pelos autores é que um movimento num elemento poderia gerar um efeito dominó em todo o resto dos elementos, ferramentas anteriores poderiam reportar isso como XBI, já o X-PERT consegue lidar de uma forma melhor com essas alterações.
A principal mudança ocorre na etapa de comparação, nessa ferramenta a comparação utiliza quatro técnicas para detectar XBI: comportamentais, estruturais, conteúdo visual e conteúdo do texto.
X-Check — Proposto por Guoquan Wu, Meimei He, Wei Chen, Wei Jun e Hua Zhong em 2015
Link: https://gitee.com/nikle/xcheck
ReDeCheck(Responsive Design Checker, pronuncia-se “Ready Check”[7]) —
Link: https://github.com/redecheck/redecheck/
XFix —
Link: https://github.com/sonalmahajan/xfix
Os principais problemas com as ferramentas atuais é a alta taxa de falsos positivos e negativos e a forma utilizada para demonstrar que os métodos são eficientes(Pesquisa com viés).
Tabela comparativa:
| Ferramenta/Método | Análise Visual | Análise DOM | Análise estática | Principais técnicas utilizadas |
| WEBDIFF | Sim | Sim | Não | Comparação Visual(EMD), Comparação DOM |
| CrossT | Não | Sim | Não | Navigation Mode(CrawlJax) |
| CrossCheck | Sim | Sim | Não | Comparação visual(x²) e Comparação de DOM |
| X-PERT | Sim | Sim | Não | Comparação visual(x²) e Navigation mode(CrawlJax) |
| X-Check | Sim | Sim | Não | Record/Play, Comparação visual(x²) |
| … |
Essas são apenas algumas das ferramentas e métodos propostos até hoje, você pode encontrar mais trabalhos em uma revisão sistemática sobre esse tema[6] ou buscando em bases acadêmicas/internet.
Referências
- https://github.com/shauvik/webdiff
- http://crawljax.com/
- http://www.browsera.com/
- https://en.wikipedia.org/wiki/Adobe_BrowserLab
- https://en.wikipedia.org/wiki/Microsoft_Expression_Web
- L. Sabaren, M. Mascheroni, C. Greiner and E. Irrazábal. “A Systematic Literature Review in Cross-browser Testing”, Journal of Computer Science & Technology, vol. 18, no. 1, pp. 18-27, 2018.
- Thomas A. Walsh, Gregory M. Kapfhammer, and Phil McMinn. 2017. Re- DeCheck: An Automatic Layout Failure Checking Tool for Responsively Designed Web Pages. In Proceedings of 26th ACM SIGSOFT International Symposium on Software Testing and Analysis, Santa Barbara, CA, USA, July 10-14, 2017 (ISSTA’17), 4 pages. DOI: 10.1145/3092703.3098221