javascript - 如何访问 CodeceptJS 帮助程序中的 WebdriverIO 元素方法？

Question

我正在使用 CodeceptJS 和 WebDriverIO 在我的 Angular 应用程序中编写 E2E 测试。

我的 Angular 应用程序有一些带有影子 DOM 的网络组件。我想要的是获取对影子根内元素的引用并执行某些操作，如单击、检查文本等。

但是，我不确定如何访问 WebDriverIO API，然后我可以使用它来访问影子根。据我了解，CodeceptJS 本身不提供抽象层来访问具有影子根的元素，这就是我尝试使用 WebDriverIO 的原因。 WebDriverIO 有一个函数可以用来访问影子根内的元素(https://webdriver.io/docs/api/element/shadow$.html)

这是我的设置:

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'
};

Answer 1

您可以像这样在自定义 CodeceptJS 帮助程序中访问 WebdriverIO 浏览器命令:

class MyHelper extends Helper {

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

module.exports = MyHelper;

如果要访问 WebdriverIO 元素方法，则需要选择所需的元素。

结果/返回值将具有可用的方法。