如何获取清除输入字段的 CSS 选择器？答案

【问题标题】：How to get CSS selector for the clear input field?如何获取清除输入字段的 CSS 选择器？
【发布时间】：2021-10-09 08:08:07
【问题描述】：

如何获取用于清除输入字段内文本的“X”元素的 CSS 选择器：

HTML 在这里：

<div class="input-group search-in-card border-bottom-0 border-right">
  <input class="form-control ng-valid ng-dirty ng-touched" type="search" placeholder="Search">
  <div class="input-group-append">
    <span class="input-group-text">
      <fa-icon class="ng-fa-icon" icon="search">
        <svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="svg-inline--fa fa-search fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>
      </fa-icon>
    </span>
  </div>
</div>

我正在尝试使用 Selenium 来单击它，但似乎无法在 HTML 中找到它。当字段中没有输入文本时，前端看起来像这样，但 HTML 中没有可见的变化：

【问题讨论】：

你能分享一个指向那个页面的链接吗？
不，这是出于商业目的。
它是浏览器特定的清除图标吗？因为，我在代码中找不到相关的html。你能在其他浏览器中查看吗？
好的，我明白了。我很确定元素会根据其他元素的状态在页面上出现和消失。这样当搜索字段为非空时，就会出现 X 元素。我遇到过很多次。
@AbinThaha 你在做某事。 :) 它存在于 Chrome 中，但不存在于 Firefox 中。

标签： html css selenium css-selectors automated-tests

【解决方案1】：

input[type = 'search']::-webkit-search-cancel-button{
    color: green;
    background-color: red;
    outline: 1px solid red;
    border: 1px solid red;
    -webkit-appearance: none;   
    height: 10px;
    width: 10px;
/*  position: absolute;
    right: 0; */
    border-radius: 50%;

}



.input::-webkit-search-cancel-button:after{
    content: "✖️";
    color: green;
/*  outline: 1px solid red; */
/*  border: 1px solid red; */
    position: absolute;
    top: 50%;
    left: 50%;
    tranform: translate(-50%, -50%);
}

这就是它在 css 中的样式。 ::-webkit-search-cancel-button 是持有价值的东西。但我不确定如何使用 selenium 选择它。

【讨论】：

【解决方案2】：

如果您需要从搜索栏中删除文本，您不仅可以通过单击 X 来完成。以下方式选择在搜索字段中输入的所有文本，然后通过在键盘上点击 Delete btn 将其删除：

driver.findElement("your search bar selector here").sendKeys(Keys.chord(Keys.CONTROL, "a" + Keys.DELETE));

或者直接点击X：

我怀疑这是您的 X 元素的选择器：

"span[class='input-group-text'] [icon='search']"

所以试试这个：

driver.findElement(By.cssSelector("span[class='input-group-text'] [icon='search']")).click();

更新：

要断言 X 的可见性/不可见性，请执行以下操作：

WebElement xButton = driver.findElement(By.cssSelector("span[class='input-group-text'] [icon='search']"));
    
    AssertTrue(xButton.isDisplayed());
    // Or
    AssertFalse(xButton.isDisplayed());

【讨论】：

谢谢，但我知道要删除文本，我只是希望能够断言 x 的可见性/不可见性。
@MateMrše 好的，我已经更新了关于如何断言它的答案。看看吧。