Javascript 如何点击；“取消搜索”；按钮编程？

我有一个

。为了进行UI测试，我想点击“取消搜索”按钮：

此代码段的代码如下所示：

<input type="search" value="user">

取消按钮本身可以通过

：-webkit search Cancel button

pseudo设置样式，但是因为它是pseudo，所以它不是DOM的一部分，我不知道如何访问它。目前只有基于Blink/Webkit的浏览器呈现此按钮，但因为我的标记在CEF应用程序中使用，所以这不是问题

不幸的是，仅将该值设置为空字符串不会触发任何事件。据我所知，点击该按钮会触发“输入”和“搜索”事件，但自己触发它们似乎无法达到UI测试的目的

---

那么，如何使用Selenium或纯Javascript实现这一点呢？

尝试使用.elementFromPoint（x，y）来获得取消按钮

如果（X）在DOM或（我认为）shadowdom中注册，这应该模拟鼠标点击，我相信我昨天在Webkit和Blink浏览器中读到它在shadowdom中

var x=//猜测 var y=//猜测

var searchInput = document.getElementById('mySearchInput');

var searchCancelButton = e.elementFromPoint(x, y);  //  'get' cancel button element

searchCancelButton.click();  

这样，xy坐标应该是输入框的绝对坐标，而不是整个文档的绝对坐标。如果它可以以任何DOM样式访问，如果您可以根据输入框左上角的0,0猜出坐标，那么这应该是可行的

以前尝试过的：

尝试将该值设置为“”，然后使用

。单击（）

DOM元素方法。如果它有一个ID，您可以使用类似于此示例的内容，但是如何“获取”元素或引用它是透明的

var e = document.getElementById('mySearchInput');
e.value = '';
e.click();

---

我仍然不知道如何正确操作（如果有任何答案知道如何使用该按钮，我将不胜感激），但我找到了一个适合我的解决方法

其想法是使用Selenium ActionChains将鼠标指针实际移动到cancel按钮的假定位置，然后单击该位置。因为我不能确定按钮在哪里，我假设点击距离右边框一半高度的点，垂直居中，就可以了

因此，在我的代码中，我使用了与此类似的代码：

def cancel_search(el: WebElement):
    driver = el.parent

    width, height = driver.execute_script(r'''
        const $el = $(arguments[0]);
        return [
            $el.outerWidth(true),
            $el.outerHeight(true),
        ];''', el)

    top = height // 2
    left = width - height // 2 - 1

    ac = ActionChains(driver)
    ac.move_to_element_with_offset(el, left, top)
    ac.click()
    ac.perform()

---

我明白你的意思，你只是想让它不可见吗？@RobM.，抱歉什么？不，我想像用户一样单击它。它是UI的一部分，我为什么要隐藏它？我刚刚尝试过这个，但它不会触发任何事件-更新后的答案是：之所以调用Shadow DOM是有原因的。使用

elementFromPoint

只能找到DOM中已有的内容，而该按钮不存在，因此我的问题是。因此，在本例中，

searchCancelButton===searchInput

，它将不起作用。此外，模拟鼠标事件也不起作用，它似乎想要可信的event.Bummer。我真希望他们能公开这些东西。很好，你可以用CSS来设计它。但是他们为什么不让JS访问它呢？”\_(ツ)_/“谁知道呢