form submit with casperjs - new url doesn't load

Question

GOAL

Here I am trying to perfom a basic search navigation on the Pubmed website. Lets say that the term that I am searching for is Hello. What I expect at the end is to land on a result page after clicking the search button.

PROBLEM

The submit code works perfectly on the javascript console of the chrome browser. But it doesn't work through casperjs. The current-url seems to remain the same. I couldn't figure out where the problem is.

My Code

// USAGE: casperjs test navigation_test.js

var config = {
  url: 'https://www.ncbi.nlm.nih.gov/pubmed/',
};

config.form = {
  "term": "Hello",
};

casper.test.begin('Testing navigation and forms', 2, function suite(test) {
  test.comment('⌚  Loading ' + config.url + '...');


  casper.start(config.url, function() {
    // adjust the view port
    this.viewport(1280, 1024);
  });

  // #1 method-2 (short)
  casper.then(function() {
   this.fill('form#EntrezForm', config.form, true);   
  })

  // #2
  casper.then(function() {
    test.assertUrlMatch(/term/, 'New location is ' + this.getCurrentUrl());
  });

  casper.run(function () {
    test.done();
  });

});

Extra Code

The #1 method in the above code is short. I have also tried a longer version as follows. But it didn't work either.

//  #1 method-1 (long)
casper.then(function() {
  this.evaluate(function() {
      $('term').value = "Hello"
  });

  test.assertEvalEquals(function () {
      return $('term').value;
  }, "Hello", 'The search was filled out properly.');  

  this.click('button[id="search"][type="submit"][class="button_search nowrap"]');
  // OR
  // this.clickLabel('Search', 'button');
  // OR 
  /*this.evaluate(function() {
    $('search').click();
    // OR
    // document.getElementById('search').click();
  });*/

});

This link worked. https://stackoverflow.com/questions/24197587/casperjs-click-doesnt-load-new-html — Nikhil Mallela, Jul 04 '17 at 18:08

Rippo · Accepted Answer · 2017-07-20T06:43:09.067

After I submit a form or request a new uri I ALWAYS use one of the waitFor for selectors. I sometimes notice that using just .then sometimes fails.

This passes fine (I also noticed your url match was slightly wrong)

var config = {
    url: 'https://www.ncbi.nlm.nih.gov/pubmed/',
};

config.form = {
  "term": "Hello",
};

casper.test.begin('Testing navigation and forms', 2, function suite(test) {

    casper.start(config.url, function () {
        this.viewport(1280, 1024);
    });

    casper.then(function () {
        test.assertTitle("Home - PubMed - NCBI", "Title is Home - PubMed - NCBI");
        this.fill('form#EntrezForm', config.form, true);
    });

    //Changes made here!
    casper.waitForText("Search results", function () {
        test.assertUrlMatch(/pubmed\/\?term=Hello/, 
            'New location is ' + this.getCurrentUrl());
    });

    casper.run(function () {
        test.done();
    });

});

UPDATE TRY THIS

Add a fail condition and take a screen grab to see what has happened (or what has not happened)

casper.waitForText("Search results", function () {
  test.assertUrlMatch(/pubmed\/\?term=Hello/, 
  'New location is ' + this.getCurrentUrl());
}, function() {
  casper.capture("grab.png");
});

You could also add a user agent string, directly below the casper.test line

casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X)');

Also you can try increasing the time out so its more than 5 seconds e.g.

    casper.waitForText("Search results", function () {
        test.assertUrlMatch(/pubmed\/\?term=Hello/, 
            'New location is ' + this.getCurrentUrl());
    }, null, 10000);

UPDATE TRY THIS AS WELL - LONG SHOT!

Try replacing with this coede. It should fill in the form and submit it at the same time...

casper.then(function () {
  test.assertTitle("Home - PubMed - NCBI", "Title is Home - PubMed - NCBI");
  this.fillSelectors('form', {
    "input[id='term']": "Hello"
  }, true);
});

Surprising how the above code of yours is not working for me... I am getting the following error. [error screenshot](http://i.imgur.com/IytRsnh.jpg) — Nikhil Mallela, Jul 18 '17 at 15:39
I am using `casperjs 1.1.4`, `phantomjs 2.1.1`, `nodejs v4.2.6` on `Ubuntu 16.04.2`. As far as I see I think there is problem with executing the "search" button. Here is the image of [grab.png](http://i.imgur.com/gze6cop.png). At this part of the code, the page should have already landed at the "Search results" but it isn't so. Here is now the [current error](http://i.imgur.com/QoSBn33.jpg) looks like. — Nikhil Mallela, Jul 19 '17 at 15:46
have posted another update. Everything works great on windows :) — Rippo, Jul 20 '17 at 06:43
It looks like the above codes are having problems with `Ubuntu`. May be there is something wrong specifically with my installation. But after you have hinted about `Windows`, I have given it a shot. And apparently, your solutions are working flawlessly on the Windows machine. Hinting me about `Windows` is a nice direction :) Thank you! You can mark this thread as solved :) — Nikhil Mallela, Jul 20 '17 at 13:50

form submit with casperjs - new url doesn't load

1 Answers1