- \n
- O que \u00e9 AJAX?<\/a><\/li>\n
- Quais desafios v\u00eam com aplica\u00e7\u00f5es AJAX?<\/a><\/li>\n
- T\u00e9cnicas de simula\u00e7\u00e3o do usu\u00e1rio<\/a><\/li>\n<\/ul>\n
- \n
- Teste de carga AJAX em a\u00e7\u00e3o<\/a>\n
- \n
- Script de teste de carga AJAX baseado em protocolo<\/a><\/li>\n
- Script de teste de carga AJAX baseado em navegador<\/a><\/li>\n
- Conclus\u00e3o: Compara\u00e7\u00e3o de ambos os m\u00e9todos de simula\u00e7\u00e3o<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
- \n
- Como o LoadView aborda testes de carga com o AJAX<\/a>\n
- \n
- Cinco passos para executar seus testes de carga baseados em AJAX com o LoadView<\/a><\/li>\n<\/ul>\n<\/li>\n
- Ferramentas usadas<\/a><\/li>\n<\/ul>\n
<\/p>\n
\n<\/p>\n
<\/a>O que \u00e9 AJAX?<\/span><\/p>\n
<\/p>\n
Aqueles de voc\u00eas que tiveram que lidar com testes de carga de aplica\u00e7\u00f5es web AJAX (Asnchronous JavaScript e XML) aprenderam que isso pode muitas vezes ser um desafio dif\u00edcil de desenvolvimento e automa\u00e7\u00e3o. Este artigo fornecer\u00e1 alguns antecedentes adicionais sobre a t\u00e9cnica de desenvolvimento AJAX, as vantagens e desvantagens do AJAX e uma abordagem recomendada de teste de desempenho AJAX.<\/p>\n
D\u00e9cadas atr\u00e1s, p\u00e1ginas da Web e aplicativos eram chatos, mas extremamente leves, f\u00e1ceis de manter, e sua testabilidade era fant\u00e1stica em compara\u00e7\u00e3o com as estruturas de aplicativos da Web usadas hoje. Os usu\u00e1rios muitas vezes passavam mais tempo esperando em frente a uma tela branca do que interagindo com esses primeiros aplicativos da Web. Devido a essa usabilidade limitada, as empresas evitaram gastar dinheiro em novos servi\u00e7os baseados na Web.<\/p>\n
A partir de 2005, uma nova tecnologia chamada AJAX permitiu que os desenvolvedores constru\u00edssem sites modernos, o que minimizava o tempo que os usu\u00e1rios passavam em frente a uma tela em branco esperando uma p\u00e1gina carregar. AJAX \u00e9 uma abrevia\u00e7\u00e3o para e \u00e9 mais do que uma tecnologia porque consiste em HTML, CSS, JavaScript, XMLHttpRequest e uma linguagem de scripting do lado do servidor, como PHP.<\/p>\n
No in\u00edcio da era da Internet, a popularidade das p\u00e1ginas web ricas e interativas de conte\u00fado era ruim porque n\u00e3o havia op\u00e7\u00e3o de atualizar uma p\u00e1gina da Web sem recarregar toda a p\u00e1gina. \u00c0 medida que novas tecnologias e t\u00e9cnicas evolu\u00edram, o AJAX ajudou a fechar essa lacuna e introduziu o conceito ass\u00edncrono de carga de dados, permitindo que um usu\u00e1rio final interaja com a p\u00e1gina enquanto os dados s\u00e3o carregados em segundo plano. Hoje, esse conceito \u00e9 amplamente utilizado porque permite a implementa\u00e7\u00e3o de aplicativos web interativos e din\u00e2micos, o que ajuda a melhorar a experi\u00eancia geral do usu\u00e1rio.<\/p>\n
<\/p>\n
Uma solicita\u00e7\u00e3o t\u00edpica do AJAX consiste no seguinte processo:<\/p>\n
- \n
- O usu\u00e1rio clica na p\u00e1gina da Web ou aplicativo web.<\/li>\n
- O manipulador desta p\u00e1gina web cria um objeto XMLHttpRequest.<\/li>\n
- O objeto XMLHttpRequest solicita um documento do servidor.<\/li>\n
- O Servidor recupera dados apropriados e os envia de volta.<\/li>\n
- XMLHttpRequest dispara um evento para notificar a p\u00e1gina da Web ou aplicativo que os dados chegaram.<\/li>\n
- O manipulador processa e exibe os dados.<\/li>\n<\/ol>\n
<\/p>\n
\n<\/p>\n
<\/a><\/p>\n
Quais desafios v\u00eam com aplica\u00e7\u00f5es AJAX?<\/h2>\n
<\/p>\n
Existem algumas armadilhas comuns envolvidas em aplicativos web din\u00e2micos baseados em AJAX, que j\u00e1 s\u00e3o bem conhecidos na comunidade de desenvolvedores. Vamos cobrir algumas das \u00e1reas mais problem\u00e1ticas do AJAX abaixo.<\/p>\n
Primeiro, como discutimos acima, um dos componentes que comp\u00f5em o AJAX \u00e9 o JavaScript. Se voc\u00ea desativar o JavaScript no seu navegador, ele tornar\u00e1 seu aplicativo ou site in\u00fatil. V\u00e1rios anos atr\u00e1s, era comum que as organiza\u00e7\u00f5es trancaram navegadores para seus funcion\u00e1rios e desativaram o JavaScript para fins de seguran\u00e7a. Esses dias se foram, mas ainda \u00e9 bom ter isso em mente, pois mesmo mudan\u00e7as como essas podem ter consequ\u00eancias n\u00e3o intencionais.<\/p>\n
Em segundo lugar, os dados carregados e exibidos dinamicamente n\u00e3o fazem parte da p\u00e1gina, especialmente para p\u00e1ginas criadas como um SPA (Aplicativo de p\u00e1gina \u00fanica) Se um mecanismo de pesquisa indexou sua p\u00e1gina web baseada no AJAX, o resultado, do ponto de vista do SEO, pode ser insatisfat\u00f3rio porque uma grande extens\u00e3o do conte\u00fado n\u00e3o \u00e9 vis\u00edvel para esses motores de indexa\u00e7\u00e3o.<\/p>\n
Em terceiro lugar, as atualiza\u00e7\u00f5es din\u00e2micas de p\u00e1gina em andamento podem perturbar os usu\u00e1rios com um baixo tempo de aten\u00e7\u00e3o. Quanto mais elementos din\u00e2micos aparecerem nessas p\u00e1ginas, maior \u00e9 a chance de que seu usu\u00e1rio seja interrompido e n\u00e3o possa terminar seu trabalho dentro do tempo aceit\u00e1vel.<\/p>\n
Finalmente, devido \u00e0 comunica\u00e7\u00e3o cliente-servidor baseada em callback, a lat\u00eancia pode ser v\u00e1rias vezes maior em compara\u00e7\u00e3o com outras tecnologias, como o WebSockets, por exemplo. Os clientes da Web puxam para atualiza\u00e7\u00f5es de dados, o que tamb\u00e9m \u00e9 um desafio para testes automatizados.<\/p>\n
<\/p>\n
\n<\/p>\n
<\/a><\/p>\n
Teste de carga AJAX: T\u00e9cnicas de simula\u00e7\u00e3o do usu\u00e1rio<\/h2>\n
<\/p>\n
Especialistas em testes de carga e engenheiros de desempenho s\u00e3o respons\u00e1veis por escolher uma abordagem adequada de simula\u00e7\u00e3o de usu\u00e1rio, que \u00e9 adequada para sua aplica\u00e7\u00e3o em teste e n\u00e3o gera muito esfor\u00e7o de sua parte. Se voc\u00ea escolher o m\u00e9todo de simula\u00e7\u00e3o errado, a chance \u00e9 muito alta de que voc\u00ea n\u00e3o pode enfrentar hotspots de desempenho em sua aplica\u00e7\u00e3o.<\/p>\n
Existem dois m\u00e9todos de simula\u00e7\u00e3o de usu\u00e1rio que discutiremos abaixo.<\/p>\n
Simula\u00e7\u00e3o de solicita\u00e7\u00f5es e respostas baseadas em protocolos<\/h3>\n
A maioria das ferramentas de teste de c\u00f3digo aberto, bem como ferramentas de teste de carga comercial suportam esse procedimento. Voc\u00ea grava intera\u00e7\u00f5es cliente-servidor e a ferramenta de teste captura todas as solicita\u00e7\u00f5es e respostas em um script de teste. Ap\u00f3s a parametriza\u00e7\u00e3o de dados din\u00e2micos, como IDs de sess\u00e3o ou dados de entrada de teste, os scripts podem ser usados para simular a carga necess\u00e1ria em seu sistema back-end. Esteja ciente de que o processamento ou as intera\u00e7\u00f5es do lado do cliente n\u00e3o fazem parte das medi\u00e7\u00f5es de tempo de resposta do n\u00edvel de protocolo.<\/p>\n
Simula\u00e7\u00e3o completa baseada em navegador de intera\u00e7\u00f5es reais do usu\u00e1rio<\/h3>\n
Apenas algumas das solu\u00e7\u00f5es de teste de carga mais abrangentes<\/a> do mercado hoje fornecem e suportam simula\u00e7\u00e3o completa de teste de carga baseada em navegador. A raz\u00e3o para isso \u00e9 que os requisitos de recursos do sistema s\u00e3o mais elevados e implementar um replay confi\u00e1vel pode ser um pouco dif\u00edcil. Quando chega a hora de criar scripts de teste para simula\u00e7\u00f5es completas de usu\u00e1rios baseadas em navegador, a cria\u00e7\u00e3o \u00e9 como a abordagem baseada em protocolo, no entanto, desta vez todas as intera\u00e7\u00f5es do lado do cliente s\u00e3o gravadas e salvas.<\/p>\n
O testador ou engenheiro navega pela p\u00e1gina da Web ou aplicativo da Web enquanto um gravador de script captura todas as intera\u00e7\u00f5es no navegador da Web. Durante a execu\u00e7\u00e3o do teste, um navegador web sem cabe\u00e7a executa as intera\u00e7\u00f5es gravadas e responde a retornos de chamadas do servidor como um usu\u00e1rio real. Este tipo de simula\u00e7\u00e3o de usu\u00e1rio \u00e9 muito preciso e fornece m\u00e9tricas realistas de desempenho front-end.<\/p>\n
O primeiro m\u00e9todo de simula\u00e7\u00e3o que descrevemos \u00e9 perfeito para aplica\u00e7\u00f5es est\u00e1ticas da Web, tem uma baixa sobrecarga de simula\u00e7\u00e3o em sua m\u00e1quina de inje\u00e7\u00e3o de carga e muitas vezes \u00e9 f\u00e1cil de implementar. A t\u00e9cnica posterior fornece tempos de resposta de ponta a ponta precisos, mas sua sobrecarga no servidor de teste de carga \u00e9 muito maior. Ent\u00e3o, como voc\u00ea escolheria o melhor m\u00e9todo de simula\u00e7\u00e3o de usu\u00e1rio para testar aplicativos ou p\u00e1ginas da Web baseados em AJAX?<\/p>\n
<\/p>\n
\n<\/p>\n
<\/a><\/p>\n
Teste de carga AJAX em a\u00e7\u00e3o<\/h2>\n
<\/p>\n
Qual \u00e9 a melhor abordagem de teste de carga do AJAX<\/a> e como voc\u00ea pode validar sua decis\u00e3o? Obviamente, \u00e9 uma boa ideia come\u00e7ar um pequeno experimento se voc\u00ea n\u00e3o tiver certeza de que abordagem forneceria resultados precisos.<\/p>\n
Para este cen\u00e1rio, cobriremos duas implementa\u00e7\u00f5es de teste de carga para um aplicativo de amostra AJAX usando ajaxsearchpro.com<\/a>. Este aplicativo de demonstra\u00e7\u00e3o \u00e9 um simples mecanismo de busca. Para este exemplo, vamos supor que um usu\u00e1rio digite um termo de pesquisa no campo de pesquisa e o conte\u00fado correspondente seja exibido. Depois que a tecla enter for acionada ou o bot\u00e3o de pesquisa for clicado, a pesquisa final ser\u00e1 executada e os resultados de pesquisa correspondentes ser\u00e3o exibidos na tela. Abaixo est\u00e1 o gr\u00e1fico de cachoeira capturado usando o navegador Chrome DevTools. O tempo de resposta da solicita\u00e7\u00e3o de pesquisa do “carro” foi de 2,2 segundos.<\/p>\n
<\/p>\n
![\"navegador](\"https:\/\/www.loadview-testing.com\/wp-content\/uploads\/waterfall-chart-chrome-browser.png\")
<\/p>\n<\/p>\n
Usamos as ferramentas de desenvolvedor dentro do navegador Chrome, o que nos ajudou a descobrir que ele executa essa solicita\u00e7\u00e3o ao executar a a\u00e7\u00e3o de pesquisa: ajaxsearchpro.com\/?s=car<\/a><\/p>\n
Criamos um script de teste de carga baseado em protocolo e baseado em navegador, executamos ambos e comparamos as m\u00e9tricas de desempenho resultantes. O que voc\u00ea acha? Qual simula\u00e7\u00e3o de usu\u00e1rio \u00e9 a melhor para um aplicativo baseado em AJAX?<\/p>\n
<\/a><\/p>\n
<\/p>\n
Script de teste de carga AJAX baseado em protocolo<\/h3>\n
<\/p>\n
- Ferramentas usadas<\/a><\/li>\n<\/ul>\n
- Cinco passos para executar seus testes de carga baseados em AJAX com o LoadView<\/a><\/li>\n<\/ul>\n<\/li>\n
- Script de teste de carga AJAX baseado em navegador<\/a><\/li>\n
- Script de teste de carga AJAX baseado em protocolo<\/a><\/li>\n
- Quais desafios v\u00eam com aplica\u00e7\u00f5es AJAX?<\/a><\/li>\n
![\"gr\u00e1fico](\"https:\/\/www.loadview-testing.com\/wp-content\/uploads\/protocol-based-ajax-waterfall-chart.png\")
<\/p>\n![\"execu\u00e7\u00e3o](\"https:\/\/www.loadview-testing.com\/wp-content\/uploads\/protocol-based-ajax-script-execution.png\")
![\"gr\u00e1fico](\"https:\/\/www.loadview-testing.com\/wp-content\/uploads\/browser-based-ajax-waterfall-chart-1.png\")
<\/p>\n![\"execu\u00e7\u00e3o](\"https:\/\/www.loadview-testing.com\/wp-content\/uploads\/browser-based-ajax-script-execution.png\")