Nightwatch.js多环境多变量场景下如何选择下拉框首个元素？

Hey there! Let's figure out how to pick the first option from a dropdown in Nightwatch.js when you're dealing with multiple environments and variables. I've got a couple of solid approaches that work well for this scenario:

1. For standard <select> dropdowns: Use Nightwatch's built-in selectByIndex #

This is the most straightforward method since selectByIndex(0) targets the very first option directly. The key for multi-environment setups is to abstract your dropdown selector and expected values into environment-specific variables so you don't have to rewrite test code for each environment.

Here's an example:

module.exports = {
  'Select first option from standard dropdown': function(browser) {
    // Pull environment-specific selectors/values from globals
    const dropdownSelector = browser.globals.dropdownSelector;
    const expectedFirstValue = browser.globals.expectedFirstOptionValue;

    browser
      .waitForElementVisible(dropdownSelector) // Always wait for elements to avoid race conditions
      .selectByIndex(dropdownSelector, 0) // Index 0 = first option
      .verify.value(dropdownSelector, expectedFirstValue); // Optional: Validate the selection matches environment expectations
  }
};

2. For custom dropdowns (non-<select> components) #

Lots of modern apps use custom dropdowns built with divs/spans instead of native <select> elements. For these, you'll need to first trigger the dropdown to expand, then click the first visible option. Again, abstract your selectors to handle environment differences:

Example code:

module.exports = {
  'Select first option from custom dropdown': function(browser) {
    const dropdownTrigger = browser.globals.customDropdownTrigger;
    const firstOptionSelector = browser.globals.customDropdownFirstOption;
    const expectedFirstText = browser.globals.expectedFirstOptionText;

    browser
      .waitForElementVisible(dropdownTrigger)
      .click(dropdownTrigger) // Open the dropdown menu
      .waitForElementVisible(firstOptionSelector)
      .click(firstOptionSelector) // Click the first option
      .verify.containsText('.selected-value-display', expectedFirstText); // Validate the selected option is visible
  }
};

Pro tip: Set up environment-specific globals #

To make this seamless across environments, define your variables in Nightwatch's configuration file (nightwatch.conf.js). This way, running tests against staging, production, or any other environment will automatically pull the right selectors and values:

module.exports = {
  // Base configuration...
  globals: {
    // Default fallback values
    dropdownSelector: '#default-dropdown',
    expectedFirstOptionValue: 'default-option-1'
  },
  test_settings: {
    staging: {
      globals: {
        dropdownSelector: '#staging-user-dropdown',
        expectedFirstOptionValue: 'staging-guest'
      }
    },
    production: {
      globals: {
        dropdownSelector: '#prod-user-dropdown',
        expectedFirstOptionValue: 'prod-guest'
      }
    }
  }
};

Run your tests with the environment flag to use the right config: nightwatch --env staging

A quick reminder: Always use waitForElementVisible before interacting with elements—this prevents flaky tests caused by async loading, especially across different environments with varying load speeds.

内容的提问来源于stack exchange，提问作者Isengo