javascript - Protractor 自定义定位器无法定位元素

Question

我已将自定义数据属性添加到我需要使用 Protractor 识别和交互的元素。该属性是 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，里面有 Home 文本。我向其添加了 data-test-id 属性:

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

这是我的 Protractor 测试:

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);