Protractor：ElementArrayFinder.filter后子元素文本为空，如何获取父<label>文本

Got it, let's work through this problem step by step. When using ElementArrayFinder.prototype.filter(), if the element you're checking returns an empty string via getText(), you can easily traverse up to its parent <label> element to grab the text you need. Here's how to handle both your specific scenarios:

1. Core Approach: Traverse to Parent in the Filter Callback #

Inside the filter function, instead of relying on the current element's text, use Protractor's element traversal methods to target the parent <label>. You can use either a simple XPath parent selector or the parentElementArrayFinder property for clearer code.

Here's a basic example:

// Replace 'your-target-selector' with the selector for your 60/2 elements
const targetElements = element.all(by.css('your-target-selector'));

const filteredElements = targetElements.filter(async (elem) => {
  // Get the immediate parent <label> of the current element
  const parentLabel = elem.element(by.xpath('..'));
  // Alternatively, use parentElementArrayFinder: elem.parentElementArrayFinder.first()
  
  const labelText = await parentLabel.getText();
  
  // Adjust this condition to match your filtering needs
  return labelText === 'your-desired-text';
});

2. Handling Scenario 1: 60 Elements with Duplicate Parent Text #

When dealing with a large set of elements where multiple share the same parent label text, you can combine the parent text check with other element attributes (like class, ID, or position) to narrow down results:

const filteredDuplicates = targetElements.filter(async (elem, index) => {
  const parentLabelText = await elem.element(by.xpath('..')).getText();
  const elemId = await elem.getAttribute('id');
  
  // Filter by parent text AND a specific element attribute
  return parentLabelText === 'Duplicate Label Text' && elemId.includes('specific-id-part');
});

3. Handling Scenario 2: 2 Elements with Unique Parent Text #

For the case where each element has a unique parent label text, you can directly target each unique value to get the exact element you need:

// Get element linked to unique label text "Unique Text 1"
const uniqueElement1 = targetElements.filter(async (elem) => {
  const labelText = await elem.element(by.xpath('..')).getText();
  return labelText === 'Unique Text 1';
}).first();

// Get element linked to unique label text "Unique Text 2"
const uniqueElement2 = targetElements.filter(async (elem) => {
  const labelText = await elem.element(by.xpath('..')).getText();
  return labelText === 'Unique Text 2';
}).first();

Quick Tips #

• Always use async/await inside the filter callback—Protractor methods are asynchronous, so this ensures you wait for the text to load before filtering.
• If the <label> isn't the immediate parent, adjust the XPath (e.g., ./ancestor::label to find the nearest <label> ancestor, or ../../label to jump two levels up).
• Use browser.debugger() inside the filter callback if you need to inspect elements and verify your selector is working correctly.

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