无法点击元素，而且量角器控制台中没有显示错误

Question

我有一个带十字图标的按钮，我正在尝试单击它。下面是我的量角器代码：

browser.sleep(5000);
removepersona.isPresent().then(function(displayed){
if(displayed){
removepersonaval.click();

其中元素的xpath为：

button: var removepersona= element(by.css('ul[class="tags"] li'));
cross icon: var removepersonaval= element(by.css('ul[class="tags"] li 
span'));

这是HTML代码：

<ul _ngcontent-c5="" class="tags">
<!----><li _ngcontent-c5="">BIKER&nbsp;
<span _ngcontent-c5="">×</span>
</li>
`enter code here`</ul>

Answer 1

我知道问题出在哪里！即使你可以看到按钮，实际可点击的元素可能是0像素大小，量角器只点击大小大于0的可见元素。

所以你需要使用JS脚本。在代码中定义此操作

/**
*  Clicks on passed element by injecting js click() in the context of window
*  @param {ElementFinder}      $element                        Locator of element
*  @param {number}             [timeout=timeouts.ms1000]       Time in ms (med. is 1000ms)
*  @return {promise.Promise}
*/
jsClick: ($element, timeout = timeouts.ms1000) =>
browser.wait(
protractor.ExpectedConditions.presenceOf($element),
timeout,
"waitThenClickScript on " + $element.locator()
).then(() => browser.executeScript(
"arguments[0].click();",
$element.getWebElement()
))

它将等待elem的出现，然后在浏览器控制台中注入代码以单击elem。所以只要做

jsClick(removepersona);

当你不想知道某个东西是否可见，并且无论如何都想点击一个元素时(不需要向下滚动页面直到它可见(，也可以使用它。另一方面，不要完全依赖它，因为protr点击是UI验证的一部分

Answer 2

定位器看起来不错。

执行console.log并检查是否为displayed is true。

removepersona.isPresent().then(function(displayed){
if(displayed) {
console.log("displayed"); 
removepersonaval.click();
}else{
console.log("Not displayed"); 
}  
})