如何通过Protractor/WebElement API访问Angular/Polymer应用的DOM属性？

嘿，我完全懂你在操作Angular/Polymer Web Components时的这种困扰——直接用Protractor的WebElement访问自定义属性，确实不像浏览器控制台里$0.selectedItem那样顺手。我给你分享几个更简洁的方案，不用每次都写冗长的executeScript：

1. 用WebElement的getProperty()方法（最推荐） #

Protractor的WebElement其实封装了getProperty()方法，专门用来获取DOM元素的属性（包括Web Component的自定义属性），底层帮你处理了和浏览器DOM的桥接，比手动写executeScript清爽太多：

element(by.css('my-scrollList')).getProperty('selectedItem').then(selectedItem => {
  console.log('选中的项：', selectedItem);
  // 这里可以直接对selectedItem做后续断言或处理
});

2. 封装自定义工具函数（适合频繁使用场景） #

如果你经常需要访问这类自定义属性，可以封装一个小工具函数，避免重复写代码：

function getWebComponentProperty(selector, propertyName) {
  return element(by.css(selector)).getProperty(propertyName);
}

// 调用起来非常简洁
getWebComponentProperty('my-scrollList', 'selectedItem').then(item => {
  // 处理逻辑
});

3. 异步场景下用executeAsyncScript（进阶） #

如果你的selectedItem是异步加载/更新的（比如依赖组件内部的异步操作），可以用executeAsyncScript来等待属性就绪：

browser.executeAsyncScript((selector, propName, done) => {
  const element = document.querySelector(selector);
  // 假设组件会触发selected-changed事件通知属性更新
  if (element[propName]) {
    done(element[propName]);
  } else {
    element.addEventListener('selected-changed', () => {
      done(element[propName]);
    });
  }
}, 'my-scrollList', 'selectedItem').then(selectedItem => {
  console.log('异步获取到的选中项：', selectedItem);
});

为什么直接访问WebElement的属性无效？ #

这里要提一句：Protractor返回的WebElement是一个代理对象，并不是浏览器里真实的DOM元素，所以你没法直接通过.selectedItem访问它的原生DOM属性，必须通过Protractor提供的API（比如getProperty、executeScript）来完成真实DOM环境的属性读取。

内容的提问来源于stack exchange，提问作者JiggyJinjo