CefSharp网页元素点击

Question

我正在尝试对某些页面元素（如 btn 或链接）进行简单的点击。

我编写了 2 个通过 xpath 和 CSS 选择器单击的函数。

这两个功能在浏览器的开发者控制台中都可以完美运行，但在 CEF 中部分不起作用。

• 代码完美地点击来自开发者控制台和 Cef 的简单链接
• 代码完美地点击了来自开发者控制台的确切按钮，但不会从 CEF 中点击。出于某种原因，它只是忽略它......

怎么会这样？js代码完全一样！...

    public void Click(string xpath)
    {
        var js = "document.evaluate(\"" + xpath + "\", document, null, XPathResult.ANY_TYPE, null).iterateNext().click();";

        EvaluateJavascript(js);
    }

    public void ClickCss(string css)
    {
        var js = "document.querySelector('"+ css + "').click()";

        EvaluateJavascript(js);
    }


    public async Task EvaluateJavascript(string script)
    {
        JavascriptResponse javascriptResponse = await Browser.GetMainFrame().EvaluateScriptAsync(script);

        if (!javascriptResponse.Success)
        {
            throw new JavascriptException(javascriptResponse.Message);
        }
    }

细节：

使用的点击代码：

_browser.ClickCss("#upload-container a");

再一次：相同的 js 代码在浏览器开发控制台中完美运行，但由于某种原因在 CEF 中不起作用。

顺便说一下，我已经在 Chrome 中测试了 JS 代码。所以 WebEngine 在这两种情况下都是一样的。

PS：也适用于我模拟将某些特定文件拖放到某些特定 Web 元素的过程。但是我没有找到任何关于此的信息，不适用于 Cef，不适用于 Js，不适用于 JQuery ... =(

Answer 1

问题在于 JS 代码的安全限制。

问题的解决方法是：

1. 使用 JS 代码获取按钮/链接的坐标

2. 使用 CEF 模拟点击操作：

   public void MouseClick(int x, int y)
   {
       Browser.GetBrowser().GetHost().SendMouseClickEvent(x, y, MouseButtonType.Left, false, 1, CefEventFlags.None);
       Thread.Sleep(15);
       Browser.GetBrowser().GetHost().SendMouseClickEvent(x, y, MouseButtonType.Left, true, 1, CefEventFlags.None);
   }
   

Answer 2

上面的答案工作正常。我只是想添加一些我认为非常重要的信息......

获取 DOM 元素的位置，并模拟鼠标单击（和移动）：

// get button's position
string jsonString = null;
var jsReponse = await chromiumWebBrowser1.EvaluateScriptAsync(
@"(function () {
    var bnt = document.getElementById('pnnext');
    bnt.focus();
    var bntRect = bnt.getBoundingClientRect();
    return JSON.stringify({ x: bntRect.left, y: bntRect.top });
})();"
);
if (jsReponse.Success && jsReponse.Result != null)
    jsonString = (string)jsReponse.Result;

// send mouse click event
if (jsonString != null)
{
    var jsonObject = JObject.Parse(jsonString);
    var xPosition = (int)jsonObject["x"] + 1;  // add +1 pixel to the click position
    var yPosition = (int)jsonObject["y"] + 1;  // add +1 pixel to the click position

    var host = chromiumWebBrowser1.GetBrowser().GetHost();
    host.SendMouseMoveEvent(xPosition, yPosition, false, CefEventFlags.None);
    Thread.Sleep(50);
    host.SendMouseClickEvent(xPosition, yPosition, MouseButtonType.Left, false, 1, CefEventFlags.None);
    Thread.Sleep(50);
    host.SendMouseClickEvent(xPosition, yPosition, MouseButtonType.Left, true, 1, CefEventFlags.None);
}

1 -到目前为止，获取 DOM 元素在 CefSharp 上的位置的最佳方法是执行自定义 JavaScript并解析结果。这就是上面代码第一段的目的。它通过元素的 ID（如加载网页的 HTML 结构中所定义）获取元素，然后获取其相对于视口的位置，最后将其返回给 C# 代码。回到C#，我们使用Newtonsoft 的JObject.Parse方法来解析它。

2 - 单击发生在指定的x坐标y处，但了解该坐标相对于浏览器组件窗口（视口）非常重要。因此，如果您的网络浏览器组件很高100px，并且您发送一个单击命令来y协调，因为150px单击将发生在网络浏览器之外，因此不在网页中。

3 - 查看点击是否真正被执行以及具体在哪里执行的一个技巧是将其从 更改MouseButtonType.Left为MouseButtonType.Right。这样做，如果网页没有限制，你将能够看到“鼠标右键菜单”。如果您点击外部，您很可能会在操作系统上看到一个“鼠标右键菜单” ^{（这里是 Windows，我可以看到我用这个技巧点击了组件外部）}。

4 - 有时（特别是在反爬虫环境中）还需要模仿鼠标移动。SendMouseMoveEvent我使用第一行所示的方法来完成此操作。

5 - 如果您的组件中加载了一个非常高的页面，并且您需要单击真正超出组件边界的按钮，则需要滚动网页。您可以像上面的示例代码一样执行一些 JavaScript，或者您可以使用下面的代码来执行此操作：

模拟鼠标滚动（鼠标滚轮事件）：

// send scroll command
// (mouse position X, mouse position Y, how much to scroll X, how much to scroll Y, events)
chromiumWebBrowser1.GetBrowser().GetHost().SendMouseWheelEvent(10, 10, 0, -100, CefEventFlags.None); 
Thread.Sleep(300);

参数中最大的部分是不言自明的，但这里最重要的部分是第三个和第四个参数，它们分别是“X 滚动多少”和“Y 滚动多少”。要向下滚动，只需使用负值，向上滚动，只需使用正值。在上面的代码中，它水平（x轴）不滚动任何内容（零像素），垂直向下（y轴）滚动 100px。

您可以在 a 中使用此代码loop来滚动您需要的量。我将它与 JavaScript 代码结合使用来检索按钮的位置，检测它是否位于视口上，或者是否需要再次发送滚动事件。