WebdriverIO function reusability pattern

Question

I am transitioning from Selenium to WebdriverIO and I'm running into some difficulty regarding function reusability. Let me demonstrate with an example:

<nav>
  <div><a>Clients</a></div>
  <div><a>Accounts</a></div>
  <div><a>Packages</a></div>
</nav>

lets say I have a navigation bar with 3 links above. When I land on this page, I want to check if each link exists. My function may look something like this:

class LoginPage extends Page {

  get clientsLink() { return $('//a[contains(., "Clients")]'); }


  isTabDisplayed() {
    if (this.clientsLink.isDisplayed()) {
      return true;
    } else {
      false
    }
  }
}

this is fine except I would have to write 2 more getters for Accounts and Packages and so my class would look like this:

class LoginPage extends Page {

  get clientsLink() { return $('//a[contains(., "Clients")]'); }
  get accountsLink() { return $('//a[contains(., "Accounts")]'); }
  get packagesLink() { return $('//a[contains(., "Packages")]'); }

  isClientTabDisplayed(tab) {
    if (this.clientsLink.isDisplayed()) {
      return true;
    } else {
      false
    }
  }

  isAccountsTabDisplayed(tab) {
    if (this.accountsLink.isDisplayed()) {
      return true;
    } else {
      false
    }
  }

  isPackagesTabDisplayed(tab) {
    if (this.packagesLink.isDisplayed()) {
      return true;
    } else {
      false
    }
  }
}

at this point, my anxiety kicks in and I start to think of ways I can reuse the isTabDisplayed function where I can pass a string to the getter with my tab name, or something along the lines of that.

Unfortunately, getters do not accept parameters and so far I have not found any resources on google that can help me to solve this issue (most common being Page Object Model which doesn't seem to address this problem)

Is my thought process out of line that I am striving for reusable code in UI testing or am I not googling for correct patterns?

Answer 1

Page Objects in WebdriverIO are just plain ES6 classes. Have a look through the documentation on ES6 classes to understand how you can create functions that you can pass arguments in to.

Now, that being said, what you're doing here isn't necessary. Instead of creating a function which references a getter, why not just reference that getter directly in your test?

const login = new LoginPage();
const isAccountsTabDisplayed = login.accountsLink.isDisplayed();

There's really no reason to create a wrapper function around this.