Javascript 单击使用Selenium的伪元素

我试图使用Selenium单击：：after伪元素。我意识到这不能通过WebDriver直接实现，但似乎无法找到一种使用Javascript实现的方法

下面是DOM的外观：

<em class="x-btn-split" unselectable="on" id="ext-gen161">
    <button type="button" id="ext-gen33" class=" x-btn-text">
        <div class="mruIcon"></div>
        <span>Accounts</span>
    </button>
    ::after
</em>

其中我得到了这个错误：

System.InvalidOperationException: 'unknown error: arguments[0].click is not a function
  (Session info: chrome=59.0.3071.115)
  (Driver info: chromedriver=2.30.477700 (0057494ad8732195794a7b32078424f92a5fce41),platform=Windows NT 6.1.7601 SP1 x86_64)'

我还尝试使用Selenium中的Actions类将鼠标移动到左手边，类似于。我认为这可能是因为我不知道偏移量是在什么地方测量的，而且文档似乎没有给出任何指示。我认为它是以像素为单位的

Actions build = new Actions(Session.Driver);
build.MoveToElement(FindElement(By.Id("ext-gen33"))).MoveByOffset(235, 15).Click().Build().Perform();

这个尝试似乎点击了某个地方，因为它没有给出错误，但我不确定在哪里

如果有帮助的话，我正在尝试用c#实现Salesforce（服务云）的自动化

---

也许有人能提供一个解决方案

我在为Salesforce编写Selenium测试时遇到了同样的问题，并通过使用操作直接控制鼠标解决了这个问题

此按钮的包装表硬编码宽度为250px，您已经发现了这一点。要定位鼠标的位置，可以使用

contextClick（）

方法，而不是

Click（）。

它模拟鼠标右键，因此将始终打开浏览器菜单

如果您这样做：

Actions build = new Actions(Session.Driver);
build.MoveToElement(FindElement(By.Id("ext-gen33"))).ContextClick().Build().Perform();

您将看到鼠标移动到WebElement的中间，而不是左上角（我认为它也会这样）。由于该元素的宽度是恒定的，我们可以将鼠标向右移动

250/2-1

，它将工作：） 代码：

---

对于那些试图在Python中实现这一点的人，解决方案如下：

elem=驱动程序。
动作链（驱动程序）。使用偏移量（元素，249,1）将元素移动到元素。单击（）。执行（）

基本上，这里我在DOM中查找我的元素并分配给WebElement。然后向WebElement传递方法move_to_element_，并将_offset作为参数

我从开发人员工具中获得了元素的px值

PS：使用此导入-从selenium.webdriver.common.action\u导入ActionChains

您可以在此处阅读有关Action chain类及其方法的更多信息，将\u移动到\u元素\u，并使用\u偏移量：

---

希望这能有所帮助。

Maciej的上述答案适用于WebDriver，但不适用于针对Firefox V.56的RemoteWebDriver（Selenium 3.12.0）。我们需要一个同时适用于本地和远程的解决方案。最后使用键盘快捷键调用导航菜单下拉菜单。作为一个额外的好处，这也消除了使用偏移的需要

String navigationMenuDropdownShortcutKeys = Keys.chord(Keys.ESCAPE, "v");

new Actions(driver)
 .sendKeys(navigationMenuDropdownShortcutKeys)
 .perform();

---

我将提供一个可能适用于某些场景的替代方案，至少对我来说是这样，并且通过JS脚本在使用selenium的任何语言中都相对容易实现

在我的场景中，有一个：：after伪元素，包含按钮的功能。此按钮包含在相对于其下另一个元素的位置

因此，我做了以下工作：

得到我能得到的元素，在这个问题中，场景就是那个跨度

获取元素的坐标

计算与要单击的伪元素的该元素相关的坐标

点击这些坐标

这是我使用perl编写的代码，但我相信在任何语言中都可以做到这一点：

my $script="
function click_function(x, y)
{
    console.log('Clicking: ' + x + ' ' + y);

    var ev = new MouseEvent('click', {
        'view': window,
        'bubbles': true,
        'cancelable': true,
        'screenX': x,
        'screenY': y
    });

    var el = document.elementFromPoint(x, y);

    el.dispatchEvent(ev);
}

var element = document.getElementById('here_put_your_id'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
               document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?            

    document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;
console.log('Coordiantes: ' + elementLeft + ' ' + elementTop)

click_function(elementLeft*1.88, elementTop*1.045) // here put yor relative coordiantes
    ";
    $driver->execute_script($script);

---

在阅读了大量文章和博客之后，我找到了确定如何在Selenium中检测DOM中伪元素的方法。并根据特定条件验证是否存在

步骤1

找到包含伪元素的父元素的路径，并在findElement下传递，如下所示

WebElement pseudoEle = driver.findElement(path);

步骤2

String display = ((JavascriptExecutor)getWebDriver()).executeScript("return window.getComputedStyle(arguments[0], ':after').getPropertyValue('display');",pseudoEle).toString();

在上面的代码行中，将所需的伪代码传递到“：after”（在我的示例中，我正在查找“after”）的位置，并根据伪代码更改的属性值是否存在（在我的示例中，它是“display”）

注意：当伪元素存在时，javascript代码返回“Block”，然后我将其保存在display字段中。并根据场景使用它

为您的案例确定正确属性值的步骤

检查滤芯

导航到伪代码的父元素

在“样式”选项卡下，找出字段（绿色），该字段的值在伪代码存在和不存在时发生变化

---

我相信这会在很大程度上帮助你。非常感谢您的支持，希望我能发布更多这样的解决方案

---

谢谢

单击伪元素附加到的元素，我们可以尝试另一种方法，例如图像识别向下箭头并单击。我们可以用sikuli来完成。我们需要下载库并使用它；Pattern Image1=新模式（“D:/>sikulimages/SignupClick.png”）；scr.单击（Image1，true）；其中image1是被裁剪的下拉列表。@guest271314我已经尝试过了，但没有那么简单，然后按钮的左侧被单击，因此我的问题就出现了。我需要单击右侧。@Jand据我所知，无法通过编程方式将

DOM

事件分派到CSS伪元素或伪类。@santhoshkumar有趣的解决方案。Sikuli网站没有列出它是用c#编写的。您能解释一下esc+v是如何选择菜单的吗？如果它起作用，那么它将非常有用。请解释一下。它确实有效：-）试试看。默认情况下，Salesforce允许许多键盘快捷键。这只是调用组合键来下拉菜单。这是SalesForce的快捷方式，明白了吗。我的问题是一般性的，不是针对SalesForce的。谢谢

WebElement pseudoEle = driver.findElement(path);

String display = ((JavascriptExecutor)getWebDriver()).executeScript("return window.getComputedStyle(arguments[0], ':after').getPropertyValue('display');",pseudoEle).toString();