Populating a dropdown menu within a form by extracting the text contained within the <option> tags utilizing CasperJS

Question

Populating a dropdown menu within a form by extracting the text contained within the <option> tags utilizing CasperJS

I am trying to complete the "Acheter un billet" form on this website:

This is my current progress:

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

casper.start('http://www.leguichet.fr/', function() {
  this.fill('form#search_tickets', {'departure':'1', 'arrival':'2'}, false);
  this.click('input[value="Rechercher"]');
  this.wait(1000, function() {
    this.echo(this.getCurrentUrl());
  });
});

casper.run(function(){
    this.exit();
});

The documentation mentions that fill() uses the value attribute for matching, but I prefer to use the text within the option tags. For example, they have:

<option value="Montpellier">Montpellier</option>
<option value="Béziers">Béziers</option>

So if I want to select Béziers, do I write 'departure':'Montpellier'? Is there a way to utilize the text within the option tags?

javascript html-select casperjs

Answer 1

Answer №1

To simplify the process, you can retrieve the element value of the desired option and use it for selection later on. Even if another option is chosen during subsequent selections, the value remains the same so it should not have any impact:

var x = require('casper').selectXPath;
casper.start('http://www.leguichet.fr/', function() {

  var textToSelect = "Béziers";
  var value = this.getElementAttribute(x("//form[@id='search_tickets']//select[@name='departure']/option[contains(text(), '" + text + "')]"), 'value');

  this.fill('form#search_tickets', {'departure': value, 'arrival':'2'}, false);

  this.click('input[value="Rechercher"]');
  this.wait(1000, function() {
    this.echo(this.getCurrentUrl())
  });
});

You can utilize XPath to easily select DOM nodes based on their text content using the text() function. Apply the same approach for selecting arrival.

Answer 2

To simplify the process, you can retrieve the element value of the desired option and use it for selection later on. Even if another option is chosen during subsequent selections, the value remains the same so it should not have any impact:

var x = require('casper').selectXPath;
casper.start('http://www.leguichet.fr/', function() {

  var textToSelect = "Béziers";
  var value = this.getElementAttribute(x("//form[@id='search_tickets']//select[@name='departure']/option[contains(text(), '" + text + "')]"), 'value');

  this.fill('form#search_tickets', {'departure': value, 'arrival':'2'}, false);

  this.click('input[value="Rechercher"]');
  this.wait(1000, function() {
    this.echo(this.getCurrentUrl())
  });
});

You can utilize XPath to easily select DOM nodes based on their text content using the text() function. Apply the same approach for selecting arrival.

Populating a dropdown menu within a form by extracting the text contained within the <option> tags utilizing CasperJS

Answer №1

Similar questions

Extract the color value using the Spectrum color picker

Perform the ajax request repeatedly only once

Utilizing the Bootstrap portfolio section, I aim to eliminate the 'ALL' tab and ensure a category is selected

Be sure to transmit the value in string format when choosing the option

Facing issue with React Native Flip Card functionality not working properly when trying to flip

The child div can be scrolled horizontally, while the parent window remains fixed

"Implementing Babel in a create-react-app Project: A Step-by-Step

Refresh needed for Material UI styles to load correctly in Next JS

Make changes to external CSS using HTML and JavaScript

Pass an array containing an HTML string to the $.post method in jQuery

Guide on how to reset a counter to 0 using a JavaScript button

Toggle the input box by clicking the button

Executing a JavaScript function within HTML on the server side using Node.js

Tips for exiting a web app that is taking up your entire screen

Is it possible to retrieve an array using axios?

Is it more efficient to pass session variables through an ajax function, or should I access them directly within the script?

Implementing personalized validation post-control initialization in an Angular 4 reactive form

CellNav + Edit feature results in the grid taking over focus from elements located outside of the grid

Add a fresh AngularJS controller to the HTML dynamically once the page has finished loading

"Bridging the Gap: Establishing Communication Among Backbone Marionette Views