How could I improve my page objects for this iterator assertion?

Question

I am writing a e2e test for my front end web app with webdriver.io and node/javascript.

Specifically, I want to improve my page objects. I have a dropdown that has two items(two rows of items) in a type head search bar.

Here is my page object:

import Page from './page';

class SearchPage extends Page {

    get searchBtn() { return $('=Search'); }
    get searchBox() { return $('atlas-search input'); }
    get searchHints() { return $$('mat-option'); }

    getHintText(el) { return el.$('span span').getText(); }

    home() {
        super.open('http://35.202.252.182:5000')
    }
}

export default new SearchPage();

And here is my test:

    describe('When searching for items', () => {
      before(() => searchPage.searchBox.setValue('Darth'));

      it('should give 2 drop down hints', () => {
        browser.pause(800);

        [ 
          'Star Wars - Darth Vader',
          'Star Wars - Darth Maul', 
        ].forEach((assertion, i) => { 
          const el = searchPage.searchHints[i+1];
          const elText = searchPage.getHintText(el);
          elText.should.equal(assertion);
        });
      });
    });

How could I assert these values better using page objects and make it less brittle? For instance, I would like to loop it without the order mattering.

Answer 1

you can iterate through searchHindts elements and return the element that contains the text you want. IF the returned element is empty or null you can fail the tests. This would be a better approach if you are conserned about the order

eg:

a= $$("something")
(for i of a){
if(a.getText===assertion){
return a;
}
}

here the function returns undefined or the element ,