Protractor 自定义定位器 : Not available in production, 但在本地主机上工作绝对正常

Question

我在 Protractor 中添加了一个自定义定位器，下面是代码

const customLocaterFunc = function (locater: string, parentElement?: Element, rootSelector?: any) {
  var using = parentElement || (rootSelector && document.querySelector(rootSelector)) || document;
  return using.querySelector("[custom-locater='" + locater + "']");
}

by.addLocator('customLocater', customLocaterFunc);

然后，我在 protractor.conf.js里面配置了它文件，在 onPrepare像这样的方法:

...
onPrepare() {
    require('./path-to-above-file/');
...
}
...

当我在本地主机上运行我的测试时，使用 browser.get('http://localhost:4200/login') ，自定义定位器功能绝对正常。但是当我使用 browser.get('http://11.15.10.111/login') ，相同的代码无法定位元素。

Please note, that the test runs, the browser gets open, user input gets provided, the user gets logged-in successfully as well, but the element which is referred via this custom locator is not found.

仅供引用，11.15.10.111 是部署应用程序的远程机器(虚拟机)。因此，简而言之，自定义定位器在本地主机上按预期工作，但在生产中失败。

Answer 1

我找到了解决这个问题的方法，我使用了 data- HTML 中自定义属性的前缀。使用它我也可以在生产版本中找到该自定义属性。

This is an HTML5 principle to prepend data- for any custom attribute.

除此之外，我犯的另一个错误是选择器的名称。在我的代码中，选择器名称以驼峰命名 (loginBtn)，但在生产版本中，它被替换为 loginbtn(所有小写)，这就是为什么我的自定义定位器无法在生产版本中找到它的原因。