如何在Protractor Selenium中获取HTML下拉框选中值？现有方法无效

Hey Mani, I’ve run into this exact issue before—let’s get your dropdown selected value working properly. The problem is likely that you’re not using Protractor’s built-in tools for handling native <select> elements, or there was a small syntax/usage mistake with the methods you tried. Here’s how to fix it:

For Native HTML <select> Dropdowns #

Protractor has a dedicated Select class designed specifically for native select elements, which avoids the confusion of trying to target selected options directly with CSS.

Step 1: Import the Select Class #

First, make sure you’ve imported the Select module at the top of your test file:

const { Select } = require('protractor');

Step 2: Wrap Your Dropdown Element #

Locate your select element (use whatever locator works for you—id, name, CSS, etc.) and wrap it in a Select object:

// Replace with your actual locator (e.g., by.name('dropdownName'), by.css('select#myDropdown'))
const dropdown = new Select(element(by.id('your-dropdown-id')));

Step 3: Get the Selected Value/Text #

Now you can reliably get the selected option’s details:

• To get the visible text of the selected option:

  dropdown.getFirstSelectedOption().getText().then(selectedText => {
      console.log('Selected option text:', selectedText);
  });
  

• To get the value attribute of the selected option:

  dropdown.getFirstSelectedOption().getAttribute('value').then(selectedValue => {
      console.log('Selected option value:', selectedValue);
  });
  

Why Your Previous Methods Failed #

Let’s break down why your attempts didn’t work:

• option:selected: If you used this directly with element(by.css('option:selected')), it might target all selected options (if it’s a multi-select) or pick the first matching option on the page—not necessarily the one from your specific dropdown. Wrapping the select element first avoids this ambiguity.
• option:clicked: This isn’t a valid CSS pseudo-class, so it won’t ever return a match.
• option.getFirstSelectedvalue(): This has two issues—first, it’s a misspelling (the correct method is getFirstSelectedOption()), and second, this method belongs to the Select class instance, not directly to an option element.

For Custom Dropdowns (Non-Native <select>) #

If your dropdown is a custom component (built with divs/ul/li instead of a native select), you’ll need to target the element marked as selected (usually via a class like active or selected):

// Adjust the CSS selector to match your custom dropdown's structure
element(by.css('.custom-dropdown-container .dropdown-option.selected')).getText().then(selectedText => {
    console.log('Selected custom dropdown option:', selectedText);
});

If you’re still stuck, sharing a snippet of your dropdown’s HTML would help narrow down the issue even more!

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