How do I access WebdriverIO element methods in CodeceptJS helper?

Question

I am using CodeceptJS along with WebDriverIO for writing E2E tests in my Angular App.

My Angular app has some web components with shadow DOM. What I want is to get a reference to elements inside shadow roots and perform certain actions like click, check text etc.

However, I am not sure how to get access to the WebDriverIO API which then I can use to access the shadow roots. As I understand, CodeceptJS on it's own does not provide an abstraction layer to access elements with shadow roots, which is why I am trying to use WebDriverIO. WebDriverIO had a function that can be used to access elements inside shadow roots (https://webdriver.io/docs/api/element/shadow$.html)

Here's my setup:

codecept.conf.js

exports.config = {
  output: './report/e2e',
  helpers: {
    WebDriver : {
      smartWait: 5000,
      url: 'http://localhost:4200',
      browser: "chrome",
      restart: false,
      windowSize: "1920x1680",
      timeouts: {
        "script": 60000,
        "page load": 10000
      }
    }
    DomHelper:{
      require: './e2e/src/helpers/dom.helper.js'
    }
  },
  include: {
    I: './e2e/src/steps_file.js'
  },
  mocha: {},
  bootstrap: null,
  teardown: null,
  hooks: [],
  gherkin: {
    features: './e2e/src/features/**/*.feature',
    steps: ['./e2e/src/step_definitions/basic.steps.js']
  },
  plugins: {
    screenshotOnFail: {
      enabled: true
    },
    wdio: {
      enabled: true,
      services: ['selenium-standalone']
    }
  },
  tests: './e2e/src/**/*.test.js',
  name: 'test-app'
};

score 0 · Answer 1 · answered Nov 12 '19 at 07:59

You can access WebdriverIO browser commands in a custom CodeceptJS helper like this:

class MyHelper extends Helper {

  async accessWd() {
    const browser = this.helpers.WebDriver.browser;
  }
}

module.exports = MyHelper;

If you want to access WebdriverIO element methods, you need to select the desired element.

The result / return value will have the methods available.

How do I access WebdriverIO element methods in CodeceptJS helper?

1 Answers1