I am using Nightmare to doing some screen caps on a site. This below is a small dropdown in a site with many different option values. Note that this is Nightmare and not in Phantomjs. Although same the coding slightly differs. Not sure how to traverse the option values when there is no name to call from.

<div class="filterRegionAndDistrict">
<select name="selectRegionAndDistrict" data-bind="foreach:     $root.regionsAndDistricts, value: selectedGroupOption">
<option data-bind="text: text, option: $data" value="">All</option>
<option data-bind="text: text, option: $data" value="">TR1</option>
<option data-bind="text: text, option: $data" value="">TR2</option>
<option data-bind="text: text, option: $data" value="">TR3</option>

my nightmare script captures all but only I am unable to drill down to the options of selecting say TR4

This one works

.viewport(1280, 1000)

This one does not works:

.viewport(1280, 1000)

Any suggestions? How do I traverse down this drop-down options menu?

2 Answers 2


Literally just solved this problem using an evaluate to change the selected value of the elements. In this case....

  .evaluate(function() {
    document.getElementsByName("selectRegionAndDistrict")[0].options[3].selected = true;
  .then(function(result) {
  .catch(function(error) {
    console.error("Error:", error);

would give you the selected element of the text TR3 that you are looking for. In the evaluate you would have the correct javascript environment to even run logic if you needed to dynamically determined which option to select, or if you needed to loop through all of them.


.select(selector, option) is dedicated to this.


.select('select', 'value')

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.