Impossible de cliquer sur le Bouton Follow de Twitter avec CasperJS

[wiwi0503]

Voilà, je début en code (1 mois) donc soyez indulgents svp

Voilà, j’ai tenté l’écriture d’un code avec CaserJs pour ajouter des comptes twitter à partir d’une liste d’url de comptes.

Je m’explique: j’ai une base de données excel de plusieurs milliers de comptes twitter qui pourraient potentiellement être intéressés par mon produit. Dans cette base de donnée j’ai le lien vers ce compte.

J’ai donc codé un script avec Casper JS qui fonctionne en 4 étapes:

• Ouverture de l’Url (mon script tournera en boucle dans un tableau d’url. Pour cet exemple, j’ai simplement mis un seul url)
• Affichage du pop-up pour me connecter (identifiant + mdp) --> En effet dans casperJs, la page s’ouvre de manière similaire qu’en navigation privée et il faut cliquer sur un lien « se connecter » pour afficher le formulaire de connexion.
• Remplissage du formulaire et click sur le bouton de connexion
• Click sur le bouton follow

On passe à l’url suivant et on recommence. (je n’ai pas encore écris la partie Loop dans ce code car je veux déjà que ca fonctionne avec un seul url)

Tout fonctionne bien jusqu’au moment de cliquer. Le script tourne normalement, aucune erreur ne remonte (je prends la peine de faire des captures d’écrans à chaque étapes pour m’assurer que les pages se charges correctement).
Le problème c’est que le script ne clique pas sur le bouton « follow ». Lorsque je me connecte à mon compte twitter, aucun compte n’a été ajouté.

Voici mon script:

var url_connexion = 'https://twitter.com/googledrive';

var credentials = {email:"[email protected]",password:"xxxxxx"};

var identifiant = {input_email:'input[name="session[username_or_email]"]',input_password:'input[name="session[password]"]',valider_connexion:'input.submit.btn.primary-btn.js-submit'};

var button_follow = "button.user-actions-follow-button.js-follow-btn.follow-button.btn";

var button_connexion_home = "a.Button.StreamsLogin.js-login";

var Afficher_connexion = "a#signin-link.dropdown-toggle.js-dropdown-toggle.dropdown-signin";


casper.start(url_connexion, function () {

    casper.thenClick(Afficher_connexion, function () {

       this.sendKeys(identifiant.input_email,credentials.email);

       this.sendKeys(identifiant.input_password,credentials.password);

       casper.thenClick(identifiant.valider_connexion,function(){

          casper.wait(6000,function(){ 

          });
  });
});

casper.then( function() {
    casper.waitForSelector('button.user-actions-follow-button.js-follow-btn.follow-button.btn', function() {
        this.click('button.user-actions-follow-button.js-follow-btn.follow-button.btn');   // C'est ici que ca ne fonctionne pas, le script ne clique pas sur le Bouton "Follow"
});
});

});

casper.run();

J’ai mis une fonction waitForSelector à la fin pour être sur que le script puisse cliquer sur le sélecteur unique du bouton « follow », mais rien n’y fait, ca ne marche pas. c’est comme si on ne pouvait pas cliquer sur le bouton Follow de twitter dans l’environnement CasperJs. Quelqu’un a t-il déjà eu affaire à ce problème ?

N’hésitez pas si vous avez des questions.

Si vous avez la réponse à mon problème je vous serai éternellement reconnaissant !

Merci.

[Camille]

cc @ScraperMasters

[boristchangang]

Tu peux faire un screenshot entre les deux étapes pour qu’on soit sur que la page est bien chargée ?

[ScrapingExpert]

Plusieurs cas de figure possibles:

• 1 - Le click interne à CasperJS n’est pas géré par le Javascript utilisé coté Twitter
• 2 - Ce n’est pas un clic qui trigger l’event lié au bouton « Follow », il te faudrait donc tester avec du casper.then -> this.mouse.down(selector)

Pour le cas de figure (1), tu peux utiliser un click « Javascript », via un casper.evaluate, comme suit:

/**

• Clicks on a DOM element, using Javascript method
• @param {string} xpath - The XPath selector identifying the node element to be clicked
  /
  Ghost.prototype.thenClickJS =
  /* @lends Ghost */
  function(xpath) {

this.then(function() {

this.evaluate(function(elemXPath, optionXPath) {

  // Get specified select option element
  var elem = __utils__.getElementByXPath(elemXPath);

  // Create 'click' mouse event
  var eventObject_click = document.createEvent('MouseEvents');
  eventObject_click.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

  elem.dispatchEvent(eventObject_click);

}, xpath);

});
};

Evidemment tu peux passer outre le XPath et récupérer le bouton en CSS via:
var elem = document.querySelector(cssSelector)

Pour le cas de figure (2):

/**
 * Sends a "mousedown" event on a DOM element, using CasperJS' mouse.down method
 * @param {string} xpath - The XPath selector identifying the node element to send the event to
 */
Ghost.prototype.thenMouseDown =
/** @lends Ghost */
function(xpath) {
  this.then(function() {
    this.echo(" [GHOSTJS] *thenMouseDown* - Sending 'mousedown' event onto element matching: " + xpath);
    this.mouse.down(x(xpath));
  });
};

Ou bien en mode « mousedown » coté Javascript:

/**

• Sends a « mousedown » event on a DOM element, using Javascript method
• @param {string} xpath - The XPath selector identifying the node element to send the event to
  /
  Ghost.prototype.thenMouseDownJS =
  /* @lends Ghost */
  function(xpath) {

this.then(function() {

this.evaluate(function(elemXPath, optionXPath) {

  // Get specified select option element
  var elem = __utils__.getElementByXPath(elemXPath);

  // Create 'click' mouse event
  var eventObject_click = document.createEvent('MouseEvents');
  eventObject_click.initMouseEvent('mousedown', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

  elem.dispatchEvent(eventObject_click);

}, xpath);

});
};

[boristchangang]

Je vais aller me cacher avec ma réponse

[wiwi0503]

Salut Boris,

J’ai en effet mis des captures d’écran automatiques pour bien voir si la page est bien chargée, la voici:

On voit que je suis bien connecté à mon compte.

(la capture d’écran avant et après le clic est la même)

[wiwi0503]

ScrapingExpert, tu sembles bien porter ton nom

Alors j’ai pas tout compris à ce que tu as écris, en revanche ce que je peux te dire c’est que dans ma console le click semble être bien pris en compte. Je n’ai aucune idée si la capture d’écran du terminal t’aidera à y voir plus clair donc je la poste au cas ou:

Quand tu me parles de Xpath tu me parles Chinois. Avec mes 1 mois de code je ne fais pas long feu… Il faut que je cherche la doc à propos de ça.

[ScrapingExpert]

Voici le code pour cliquer sur un élément en passant en full JS, évalué au sein du DOM de la page, et non plus dans le contexte browser (quand tu fais casper.thenClick, tu es dans le contexte du browser, qui clique sur un élément, là on va passer dans le contexte DOM, et c’est Javascript au sein de la page qui va cliquer):

this.then(function() {

    this.evaluate(function() {

      // ICI ON RECUP LE BOUTON VIA TON SELECTEUR CSS
      var elem = document.querySelector('button.user-actions-follow-button.js-follow-btn.follow-button.btn');

      // Create 'click' mouse event
      var eventObject_click = document.createEvent('MouseEvents');
      eventObject_click.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

      elem.dispatchEvent(eventObject_click);

    });
});

[boristchangang]

Twitter utilise jQuery. du coup essaies ça :
casper.then(function(){
this.evaluate(function(){
$('button.user-actions-follow-button.js-follow-btn.follow-button.btn').trigger('click');
});
});

[boristchangang]

C’est exactement la même chose que @ScrapingExpert a écrit (j’ai essayé de simplifier, il est trop fort ScrapingExpert).

[wiwi0503]

Haaaaa d’accord, là ça me parle !

J’essaie de suite.

Merci !

[wiwi0503]

C’est parfait. Merci à toi.

Je regarde si ca marche.