Site Overlay

jQuery + DevTools = Automation

images Nestas últimas semanas eu tenho trabalhado num ritmo insano. Na agência onde trabalho, estamos colocando dois e-commerces no ar ao mesmo tempo. Os dois e-commerces são ambos montados em cima de uma plataforma que dá muito autonomia na hora de montar as páginas. Um conceito de páginas com seções que carregam módulos e sub-módulos.

Até aí, nada de muito novo. Porém, para atender uma demanda de layout, fomos obrigados a montar um grande número de páginas, e mudar uma boa parte da estrutura do HTML. Visando tornar o sistema mais simples de manter, fizemos uso pesado do conceito de módulos e sub-módulos, que funcionou lindo para a primeira loja.

A questão veio na segunda loja. Esta já estava no ar, com uma estrutura diferente de HTMLs e módulos muito mais simples. Para poder fazer a troca, era necessário excluir, página a página, módulo a módulo manualmente. Clicando no ícone de exclusão, confirmando a exclusão para depois a página atualizar a listagem.

Uma vez limpa,  iniciava-se o processo de incluir os componentes necessários naquela página em uma ordem específica seguindo seguinte processo:

1 – clicar no botão adicionar componente, que abre um modal carregado em ajax
2 – escolher o componente em uma lista de centenas de componentes
3 – adiciona-lo na página clicando no botão adicionar
Esse processo é repetido até todos os componentes daquela seção estarem colocados na ordem correta.

Cronometrei o tempo que eu demorei para fazer isso com uma das seções de uma página – a seção header : que tinha 3 componentes para serem removidos e 5 adicionados, eu levava em torno de 4:00 (quatro minutos) aproximadamente (fiz isso umas quatro vezes, tirei uma média e arredondei).

Fiz uma conta burra e calculei que com +- 60 páginas, cada uma tendo em média 6 seções, com 3 a 4 componentes, e que precisariam de 5 a 10 componentes… que eu levaria (sem pausas para comer, dormir, me distrair, responder emails e etc) aproximadamente três dias e 4 horas.

Foi aí que minha veia de programador saltou em minha testa… deveria haver um meio mais eficiente de fazer isso…

Usando o devtools do chrome, eu primeiramente fiz com que o alerta de confirmação de exclusão fosse removido… (um truque simples para eliminar o confirm do javascript é criar uma function confirm(){return true;}  e colar isso no seu console do devtools.

imgresNão foi uma mudança drástica, mas já economizou alguns segundos…
Pensei no que mais poderia fazer… fiz um jQuery que pegava todos os botões de exclusão e disparava um clique. Em essência simulando que eu tivesse clicado em todos..
Graças a natureza da aplicação (ajax), eu consegui disparar simultaneamente todos os “remover esse componente”, reduzindo o meu tempo gasto com “clique, confirme, aguarda retorno do ajax” de um minuto para uma algo entre 5s – 10s…

Continuei… fiz mais uma função que abria o modal… e eliminava o “dismissModal()”evitando assim que o modal fechasse. Sequencialmente, eu disparei 5 chamadas de ajax, simulando que eu tivesse clicado no componente e clicado no adicionar.

Criei algumas funções para isso, e dei paste lá no devTools para ter acesso fácil…
limpSec() – limpava a seção
popHead() – populava o Head
popFoot() – populava o Footer
etc…
Em suma… um trabalho que eu estimei em 80h acabou me custando cerca de 1h de programação e duas horas e meia de monitoramento e interações pontuais.

O que mais posso falar se não: OBRIGADO JQUERY E OBRIGADO DEV TOOLS

 

Comments

comments

Leave a Reply

Your email address will not be published.