CODEWITHSUNDEEP
automated-testscypresswebdriver-io
Sayantan Ghosh
Sayantan Ghosh

Reputation: 338

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

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.

Upvotes: 0

Views: 478

Answers (2)

Mike G.
Mike G.

Reputation: 3950

The exact analog to

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

can be achieved with xpath selector

$("[data-testid='nav-bar']").$("./*[descendant-or-self::*[contains(text(), 'Search Box')]]").click();

It looks a bit ugly though, consider adding a custom command that would mimic Cypress's contains:

// put this to `before` hook in your wdio.conf.js
browser.addCommand('cyContains', function(text) {
  this.waitForExist()
  return this.$(`./*[descendant-or-self::*[contains(text(), '${text}')]]`)
}, true)

$("[data-testid='nav-bar']").cyContains("Search Box").click();

P.S. Check out the selector in the browser console right on this page, paste in the browser console

$x("//span[descendant-or-self::*[contains(text(), 'Search Box')]]")

Upvotes: 0

pavelsaman
pavelsaman

Reputation: 8322

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');
// ...

Upvotes: 1

Related Questions