Ferramentas e métodos de análise de Cross Browser Issue(XBI)

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).

Principais Navegadores(Browsers) do Mercado

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étodoAnálise VisualAnálise DOMAnálise estáticaPrincipais técnicas utilizadas
WEBDIFFSimSimNãoComparação Visual(EMD), Comparação DOM
CrossTNãoSimNãoNavigation Mode(CrawlJax)
CrossCheckSimSimNãoComparação visual(x²) e Comparação de DOM
X-PERTSimSimNãoComparação visual(x²) e Navigation mode(CrawlJax) 
X-CheckSimSimNãoRecord/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

  1. https://github.com/shauvik/webdiff
  2. http://crawljax.com/
  3. http://www.browsera.com/
  4. https://en.wikipedia.org/wiki/Adobe_BrowserLab
  5. https://en.wikipedia.org/wiki/Microsoft_Expression_Web
  6. 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.
  7. 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

Deixe uma resposta

O seu endereço de e-mail não será publicado.