Você já pensou em algum momento que o fato de utilizar aplicativos de relacionamentos e o tempo que gasta só dando like nas pessoas procurando por um match?
E se eu te disser que tem uma maneira de automatizar essa ação de clicar em um botão para depois você apenas gastar suas energias com a conversa? Parece bem mais interessante, né?
Esse script foi feito para funcionar no Tinder, mas pode ser refatorado para outros sites do segmento, lembrando que estamos utilizando a versão do Tinder no navegador!
Nesse artigo, vamos trabalhar com manipulação de DOM pelo JavaScript, entender sobre seletores CSS e um método de como fazer um bloco de código ser executado em determinado período de tempo.
Capturando o botão (DOM)
Antes de mais nada, precisamos encontrar o botão de like dentro de todo o código HTML.
Analisando o botão de like, vemos que tem muitas classes dinâmicas e que isso dificultaria no momento de reutilizar esse código, pois se dermos um refresh na página ou utilizarmos em uma nova página ou em outro computador, percebemos que nosso código não vai mais funcionar.
Uma maneira de conseguirmos capturar esse botão com algo que é fixo, ou seja, não muda com frequência, com isso, podemos perceber que o Tinder usa react testing library e tem o campo data-testid="gamepadLike".
Uma maneira de capturar o botão pelo data-testid seria utilizar o seletor querySelector, podemos colocar esse seletor em uma constante para facilitar nossa vida depois e deixando nosso código mais legível.
const likeBtn = document.querySelector('[data-testid="gamepadLike"]');
Primeira parte finalizada.
Clicando no botão
O JavaScript tem um método nativo que é HTMLElement.click(), segundo informações da própria documentação:
É um método que simula o clique do mouse em um elemento.
Sabendo disso, podemos fazer dessa maneira para dar um like sem ao menos clicar no elemento:
likeBtn.click();
"Automatizando" a rotina
Agora, para finalizar nossa linha de montagem, precisamos fazer com que o clique no botão aconteça de uma forma que não precise mais da nossa ação após rodar o código.
Olhando os métodos do JavaScript que tem essa funcionalidade, temos o setInterval.
Esse método repete chamadas de funções ou executam trechos de código, com um tempo de espera fixo entre cada chamada.
Podemos utilizar da seguinte forma:
window.setInterval(() => likeBtn.click(), 1000);
Lembrando que quando utilizamos algum método que ocorre após um tempo previamente estabelecido como é o caso do setInterval, passamos o valor de intervalo em milissegundos, nesse caso, o trecho de código acima acontecerá após 1 segundo.
Conclusão
Depois de toda essa explicação, o código que vimos até aqui tem nada mais do que 2 linhas:
const likeBtn = document.querySelector('[data-testid="gamepadLike"]');
window.setInterval(() => likeBtn.click(), 1000);
Executando o código
- abrir o Tinder pelo navegador;
- clicar com o botão direito na tela e ir em inspecionar;
- No menu superior, entrar na sessão
Console - Copiar o código e colar no campo abaixo.
Código funcionando
Críticas, sugestões e elogios, deixe no comentário abaixo! :)
Top comments (0)