使用Protractor无法定位并点击Angular自定义组件NanoAddNewButton

我来帮你搞定这个定位「Add New」按钮的难题，结合你给出的组件代码和DOM结构，这里有几个实用的解决方案：

• 利用组件的class属性精确定位
  你的<nano-add-new-button>组件带有nano-bc-green和hover-effect类，结合组件标签和class写CSS选择器，能避免和页面上其他同名组件冲突，定位更精准：

  clickAddNewBtn() {
    console.log("Click on Add New button.");
    return element(by.css('nano-add-new-button.nano-bc-green')).click();
  }
  

• 通过内部文本内容定位
  组件内部的<span>包含「Add New」文本，你可以直接定位绑定了点击事件的父组件本身（更推荐，因为点击事件是绑定在<nano-add-new-button>上的）：
  用XPath定位组件的写法：

  clickAddNewBtn() {
    console.log("Click on Add New button.");
    return element(by.xpath("//nano-add-new-button[.//span[contains(normalize-space(text()), 'Add New')]]")).click();
  }
  

  这里用normalize-space是为了处理文本中的换行或多余空格，避免因为格式问题导致匹配失败。如果想直接定位span，也可以用这个XPath：//nano-add-new-button//span[contains(normalize-space(text()), 'Add New')]

• 添加等待条件确保元素可交互
  很多时候定位失败是因为组件还没完成渲染，元素暂时不可点击。你可以结合Protractor的ExpectedConditions来等待元素就绪后再点击：

  import { ExpectedConditions as EC } from 'protractor';
  
  clickAddNewBtn() {
    console.log("Click on Add New button.");
    const addNewBtn = element(by.css('nano-add-new-button.nano-bc-green'));
    // 等待5秒，直到元素可点击（超时可根据实际情况调整）
    browser.wait(EC.elementToBeClickable(addNewBtn), 5000);
    return addNewBtn.click();
  }
  

另外，你之前用XPath出错大概率是因为语法问题或者元素还未加载，试试上面带normalize-space的XPath写法，再配合等待条件，应该能解决问题。

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