[Question] how to filter array of selectors with same ID by text

I have the case where elements have the same data-test-id. Instead of using hardcoded indexes, I would like to get and then use the needed element by text.

I’m using the following code but filtering doesn’t work, get back the same array of elements with ElementHandlers

/// Util class
  async getElementsById(
    id,
    option: ElementContext = {
      locator: id,
      context: this.page,
    }
  ):Promise<Array<ElementHandle>>{
    return await option.context.$$(`[data-test-id=${option.locator}]`)
  }

/// Page object
 megaNavItem = async () =>
        await this.getElementsById('mega-nav-level-1-item')
        
  filterElements = async (expectedItem: string) =>
    await this.megaNavItem().then(el =>
      el.find(async e => (await e.innerText()) === expectedItem)
    )

Unfortunately, can’t understand what is the reason. I see that text is not extracting (innerText() doesn’t work ) to make correct filtering. Would appreciate any help with this case.

[aslushnikov]

@Yurii397 it looks like you got tripped with promises. Your filter function uses async predicate, which won’t work. You’ll need to use a sync predicate, and use Promise.all() construct beforehand or a manual iteration to fetch contents.

Something like this would work:

/// Util class
async function getElementsById(id, option) {
  return await option.context.$$(`[data-test-id=${option.locator}]`)
}

/// Page object
megaNavItem = async () => await this.getElementsById('mega-nav-level-1-item')

filterElements = async (expectedItem: string) => {
  const elements = await this.megaNavItem();
  const result = [];
  for (const element of elements) {
    const text = await element.innerText();
    if (text === expectedItem)
      result.push(element);
  }
  return result;
}

[Yurii397]

@aslushnikov thank you for the guide!