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

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

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