Ad

Click Elements By Classes With Specific Text In CasperJS

- 1 answer

I'm trying for 2 hours now to find a selector to choose form a list in the facebook share dialog : facebook share dialog

(i don't use thier api for the restricted access to some features )

var casper = require('casper').create({

    pageSettings: {
        loadImages:  false,        // The WebPage instance used by Casper will
        loadPlugins: false,        // use these settings
        userAgent: 'Mozilla/5.0 (Windows NT 6.3; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0'
    },
    logLevel: "info",              // Only "info" level messages will be logged
    verbose: true


});
var fs = require('fs');
var dyn = null;
casper.start('http://facebook.com/login.php', function() {
    // search for 'casperjs' from google form
   console.log("page loaded");

   this.test.assertExists('form#login_form', 'form is found');

   this.fill('form#login_form', { 
        email: 'email', 
        pass:  'pass'
    }, true);

    this.wait(1000, function() {
        casper.capture('login.png');
        console.log("screen captured");
    });
});
    casper.thenOpen('https://www.facebook.com/dialog/share?app_id=966242223397117&redirect_uri=http://www.facebook.com/dialog/return/close&display=popup&href=http://www.isearchforjob.com/', function() {

    console.log("debug loaded");

    this.wait(1000, function() {
        casper.capture('debug.png');
        console.log("screen captured");
    });

    if (this.exists('span._55pe')) {
        this.echo('span._55pe exists');
        this.click('span._55pe');
        this.echo('\n\nspan._55pe clicked\n\n');
    }   

    this.wait(5000, function() {
    if (this.exists('li[class="_54ni _42ym _2n3i __MenuItem"] > a._54nc')) {
        this.echo('li[class="_54ni _42ym _2n3i __MenuItem"] > a._54nc exists');

        this.echo('\n\n li[class="_54ni _42ym _2n3i __MenuItem"] > a._54nc clicked\n\n');
    }   

    });


    this.wait(10000, function() {

        fs.write('2.htm', this.getPageContent(), 'w');

        casper.capture('clicked2.png');
        console.log("screen captured");
    });
});
casper.run();

the first click works perfectly here is a screenshot :

screenshot

but the second click wont :

this.click('li._54ni _42ym _2n3i __MenuItem');

results in the same selector for all the list so it's useless

this is the HTML:

<li class="_54ni _42ym _2n3i __MenuItem" role="presentation">
    <a class="_54nc" target="_blank" rel="nofollow noreferrer" href="#" role="menuitem">
        <span data-reactroot=""><span class="_54nh"><span>Share in a group</span>

Is there any chance I can get the selectors by text? "Share in a group"

And is it possible to simulate the down arrow key in this case?

Ad

Answer

The classes are all written one after the with the class selector:

this.click('li._54ni._42ym._2n3i.__MenuItem');

You can also use an attribute selector to match an element with a specific attribute string (works for any attribute and not just class):

this.click('li[class="_54ni _42ym _2n3i __MenuItem"]');

You can even mix those:

this.click('li.__MenuItem[class^="_54ni _42ym"]');

Finally, you probably want to click the link in a list item:

this.click('li[class="_54ni _42ym _2n3i __MenuItem"] > a._54nc');
Ad
source: stackoverflow.com
Ad