Protractor中同class多下拉框的指定文本选项选择方案求助

Got it, let's work through this together. You're using Protractor with JavaScript, need to target the first dropdown inside the first .tab-pane.active.ng-star-inserted container, then select the option labeled "Raphael (BH681) - SVI". Below are various XPath and CSS locator strategies, plus corresponding Protractor code snippets to implement this.

XPath Locator Strategies #

1. Precise XPath for the first dropdown (using role attribute) #

This leverages the role="tabpanel" attribute from your page snippet to narrow down the target container, then selects the first <select> element inside it:

//div[@role='tabpanel' and contains(@class, 'tab-pane active ng-star-inserted')][1]//select[1]

2. XPath to target the specific option #

To directly locate the option with your desired text (works for both native <select> and custom dropdowns):

//div[@role='tabpanel' and contains(@class, 'tab-pane active ng-star-inserted')][1]//*[text()='Raphael (BH681) - SVI']

If there might be extra whitespace in the text, use contains() instead:

//div[@role='tabpanel' and contains(@class, 'tab-pane active ng-star-inserted')][1]//*[contains(text(), 'Raphael (BH681) - SVI')]

Protractor Code with XPath #

For native <select> elements, using Protractor's built-in Select class is cleaner:

const firstDropdown = element(by.xpath("//div[@role='tabpanel' and contains(@class, 'tab-pane active ng-star-inserted')][1]//select[1]"));
const selectDropdown = new Select(firstDropdown);

// Select by visible text
selectDropdown.selectByVisibleText('Raphael (BH681) - SVI');

If it's a custom dropdown (not a native <select>), use click actions:

// Open the dropdown
element(by.xpath("//div[@role='tabpanel' and contains(@class, 'tab-pane active ng-star-inserted')][1]//div[contains(@class, 'dropdown-toggle')]")).click();

// Select the target option
element(by.xpath("//div[@role='tabpanel' and contains(@class, 'tab-pane active ng-star-inserted')][1]//*[text()='Raphael (BH681) - SVI']")).click();

CSS Selector Strategies #

1. CSS for the first dropdown #

Uses :first-of-type to target the first matching tab container, then the first <select> inside it:

div[role='tabpanel'].tab-pane.active.ng-star-inserted:first-of-type select:first-of-type

If the ng-star-inserted class is dynamic (Angular-generated), you can omit it and match the stable classes:

div[role='tabpanel'].tab-pane.active:first-of-type select:first-of-type

2. Handling custom dropdown options with CSS #

CSS can't directly select elements by text, so use Protractor's filter() method to find the matching option:

// Locate all options in the first dropdown
const dropdownOptions = element.all(by.css("div[role='tabpanel'].tab-pane.active:first-of-type .dropdown-option"));

// Filter and click the target option
dropdownOptions.filter((elem) => {
  return elem.getText().then((text) => text.trim() === 'Raphael (BH681) - SVI');
}).first().click();

Protractor Code with CSS for Native Selects #

Same as XPath, use the Select class for native dropdowns:

const firstDropdown = element(by.css("div[role='tabpanel'].tab-pane.active:first-of-type select:first-of-type"));
const selectDropdown = new Select(firstDropdown);

selectDropdown.selectByVisibleText('Raphael (BH681) - SVI');

Key Notes #

• Avoid relying fully on dynamic classes like ng-star-inserted—they might change between Angular builds. Use contains() for classes or stick to stable attributes like role or id (your snippet shows id="tab-stakeHolder-panel" which is another great target!).
• If the dropdown is inside an iframe, you'll need to switch to the iframe first before interacting with elements.

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