Question

我有<input type="search">。出于UI测试的目的，我想点击“取消搜索”按钮：

此代码段的代码就是：

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

取消按钮本身可以通过::-webkit-search-cancel-button伪样式，但由于它是伪的，它不是DOM的一部分，我不知道如何访问它。现在只有基于Blink / Webkit的浏览器呈现此按钮，但由于我的标记在CEF应用程序中使用，因此不是问题。

不幸的是，只是将值设置为空字符串不会触发任何事件。据我所知，点击该按钮会触发“输入”和“搜索”事件，但是自己解雇这些事件似乎会破坏UI测试的目的。

那么，我如何使用Selenium或只是简单的Javascript？

Answer 1

我仍然不知道如何正确地做到这一点（并且会感谢任何知道如何访问该按钮的答案），但我想出了一个对我有用的解决方法。

我们的想法是使用Selenium ActionChains将鼠标指针实际移动到取消按钮的假定位置，然后单击此处。因为我无法确切地知道那个按钮在哪里，我认为点击距离右边界一半高度的点并且垂直居中的点可以工作。

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

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()

Answer 2

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

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

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

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

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

searchCancelButton.click();

这样，xy coords应该是输入框的绝对值，而不是整个文档。如果它可以以任何DOM风格的方式访问，那么这应该可行，如果你可以猜测基于0,0的坐标是输入框的左上角。

之前尝试过：

尝试将值设置为“”然后使用.click() DOM元素方法。如果它有一个ID，你可以使用类似这个例子的东西，但是如何“获得”元素或引用它是透明的。

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

如何以编程方式单击“取消搜索”按钮？

2 个答案: