量角器自定义定位器无法定位元素

Question

我已将自定义数据属性添加到我需要使用量角器识别和交互的元素。属性是 data-test-id。我在 conf.js 的 onPrepare 回调中创建了一个自定义定位器来检测元素。如下：

onPrepare: function () {
    by.addLocator('testId', function(value, parentElement) {
      parentElement = parentElement || document;
      var nodes = parentElement.querySelectorAll('[data-test-id]');
      return Array.prototype.filter.call(nodes, function(node) {
        return (node.getAttribute('[data-test-id]') === value);
      });
    });
  }

我的 angular 应用程序有一个 h1，里面有文本主页。我给它添加了 data-test-id 属性：

<h1 data-test-id="test-element">Home</h1>

这是我的量角器测试：

test.js:

describe('Navigate to the website.', function() {
    it('Should have the Heading as Home', function() {
        browser.get('http://localhost:8888/#/');
        browser.waitForAngular();

        var textValue = 'Home';
        var heading = element(by.testId('test-element'));

        expect(heading.getText()).toEqual(textValue);
    });
});

conf.js:

exports.config = {
  //directConnect: true,
  seleniumAddress: 'http://localhost:4444/wd/hub',
  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },

  // Spec patterns are relative to the current working directly when
  // protractor is called.
  specs: ['test.js'],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },

  onPrepare: function () {
    by.addLocator('testId', function(value, parentElement) {
      parentElement = parentElement || document;
      var nodes = parentElement.querySelectorAll('[data-test-id]');
      return Array.prototype.filter.call(nodes, function(node) {
        return (node.getAttribute('[data-test-id]') === value);
      });
    });
  }
};

当我运行样本测试时，出现以下错误：

1) Navigate to the website. Should have the Heading as Home
Message: NoSuchElementError: No element found using locator: by.testId("test-element")

我做错了什么？我该如何解决这个问题并使其正常工作？

Answer 1

当您获取属性时，您应该要求 data-test-id 而不是 [data-test-id]。看起来像是复制粘贴错误。

替换：

return (node.getAttribute('[data-test-id]') === value);

与：

return (node.getAttribute('data-test-id') === value);

Answer 2

我也遇到了同样的问题，下面的解决方案解决了我的问题：

by.addLocator('lid', function(value, parentElement) {
        var nodes;

        if(parentElement)
            nodes =  parentElement.querySelectorAll();
        else
            nodes = document.querySelectorAll('body *');


        return Array.prototype.filter.call(nodes, function(node) {
            if( node.hasAttribute("lid") && node.getAttribute('lid') === value)
                return node;
        });
    });

querySelectorAll() 需要将输入作为 'tag'，如果没有发送 parentElement，则它会查询 'body' 标签下的所有标签，否则查询来自 parentElement 的所有元素。之后遍历所有元素并检查属性 'lid' 是否存在。如果存在验证该值，如果该值是所需值则它 returns 那个元素。

量角器自定义定位器无法定位元素

Protractor custom locator fails to locate the element

javascript

selenium

end-to-end

angularjs

protractor