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() {

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', () => {

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

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.

  • 1
    What's the issue with this Approach
    – PDHide
    Commented Feb 19, 2020 at 22:39
  • I was thinking it was brittle because of the order of the rows matter. Also, wasn't sure if there was to much logic in the test instead of the page object.
    – dman
    Commented Feb 20, 2020 at 0:17

1 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


a= $$("something")
(for i of a){
return a;

here the function returns undefined or the element ,

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.