automated tests - What is the cypress cy.contains() equivalent in webdriverio?

Question

I have mainly worked with cypress previously for e2e automated testing, I have now started working on webdriverIO. So for a cypress command such as

cy.get("[data-testid='nav-bar']").contains("Search Box").click();

What would be the equivalent for this in webdriverIO? I have tried the following approach in a PageObject Model.

class HomePage extends Page {
    get navBar() {
      return browser.$("[data-testid='nav-bar']");
    }
    
    openSearchBox() {
      this.navBar().click('//*[text="Search Box"]');
    }
}

However, this approach does not seem to work, any help on this would be appreciated.

Answer 1

Leaving Page Objects asside for now, you'd type this in WebdriverIO:

const bar = $('[data-testid='nav-bar']');
expect(bar.getText()).toInclude('Search Box');
bar.click();

You can use chai for the assertion instead of Jest Matchers:

const expectChai = require('chai').expect;
// ...
expectChai(bar.getText()).to.have.string('Search Box');
// ...