WebdriverIO 函数重用模式

Question

我正在从 Selenium 过渡到 WebdriverIO，我运行在函数可重用性方面遇到了一些困难。让我举个例子：

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

假设我有一个导航栏，上面有 3 links。当我登陆此页面时，我想检查每个 link 是否存在。我的函数可能看起来像这样：

class LoginPage extends Page {

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


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

这很好，除了我必须为 Accounts 和 Packages 再写 2 个 getter，所以我的 class 看起来像这样：

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

在这一点上，我的焦虑开始了，我开始考虑如何重用 isTabDisplayed 函数，在其中我可以将字符串传递给 getter 我的选项卡名称或其他东西沿着那条线。

不幸的是，getters 不接受参数，到目前为止我还没有在 google 上找到任何可以帮助我解决这个问题的资源（最常见的是页面对象模型，它不似乎无法解决这个问题）

我的思维过程是否与我在 UI 测试中争取可重用代码不一致，或者我没有在谷歌上搜索正确的模式？

Answer 1

WebdriverIO 中的页面对象只是普通的 ES6 类。查看有关 ES6 类的文档，了解如何创建可以将参数传递给的函数。

话虽这么说，但您在这里所做的并无必要。与其创建引用 getter 的函数，不如直接在测试中引用 getter？

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

确实没有理由为此创建包装函数。

WebdriverIO 函数重用模式

WebdriverIO function reusability pattern

webdriver-io

reusability

ui-testing