Protractor Custom Locator：在生产中不可用，但在本地主机上工作得很好

Question

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

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

不是答案，而是您需要考虑的问题。

我记得添加了这个自定义定位器，遇到了一些问题，意识到它只是一个属性名称...没什么特别的，所以我认为它实际上写起来要快得多

let elem = $('[custom-locator="locator"]')

相当于

let elem = element(by.css('[custom-locator="locator"]'))

比

let elem = element(by.customLocator('locator'))

然后我放弃了这个想法。所以也许你也想走这条路

Answer 2

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

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

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

Protractor Custom Locator：在生产中不可用，但在本地主机上工作得很好

Protractor Custom Locator: Not available in production, but working absolutely fine on localhost

protractor