Minor error in trying to simulate MouseLeftDown-MouseLeftUp event in CefSharp browser control

Question

Hello,

I am using the CefSharp webbrowser control. I will explain what I am trying to do:

1. I load in the URL: "https://uniswapv3.flipsidecrypto.com"
2. I find the control which is a SLIDER handle by classname "irs-handle from" successfully! (See red arrow in the image below)
3. I now find the X and Y coordinate for this SLIDER successfully!
4. Now I want to simulate a MouseLeftDown click on this X and Y coordinate, --- and DRAG this SLIDER to the right a bit by calling the MouseLeftUp event with a new X coordinate.

When executing the code. This SLIDER is actually clicked on because the slider changes value a bit. So this part is successful. But it seems that the MouseLeftUp event with the new X coordinate doesn't release the slider to the right.

This is the slider I am trying to move in the URL (The round green handle, - where the red arrow(1,773) in the image below in pointing to)

(As seen in the end of the post I have posted an image of the MouseLeftDown/MouseLeftUp events. Somehow the website will not post the question if I post that code as it is)

I wonder what I could be missing. It has to be a minor detail missing? This is how I try to drag the slider to the right: (+5 to +100)

         //Now click and drag slider to the right  
         MouseLeftDown(int.Parse(coordx) + 5, int.Parse(coordy) + 5);  
         MouseLeftUp(int.Parse(coordx) + 100, int.Parse(coordy) + 5);  

Thank you!

    private void button1_Click(object sender, EventArgs e) { new Thread(moveSlideControl).Start(); }  
  
    void moveSlideControl()  
    {  
        var scriptTask = browser.EvaluateScriptAsync(@"  
                            var play = document.getElementsByClassName('irs-handle from')[0]  
                            function findPos(obj)  
                            {  
                                var curleft = 0;  
                                var curtop = 0;  
  
                                if (obj.offsetParent)  
                                {  
                                    do  
                                    {  
                                        curleft += obj.offsetLeft;  
                                        curtop += obj.offsetTop;  
                                    } while (obj = obj.offsetParent);  
  
                                    return { X: curleft,Y: curtop};  
                                }  
                            }  
                            findPos(play)"  
).ContinueWith(x =>  
{  
    // 2. Continue with finding the coordinates and using MouseClick method   
    // for pressing left mouse button down and releasing it at desired end position.  
    var responseForMouseClick = x.Result;  
if (responseForMouseClick.Success && responseForMouseClick.Result != null)  
{  
    var xy = responseForMouseClick.Result;  
    var json = JsonConvert.SerializeObject(xy).ToString();  
    var coordx = json.Substring(json.IndexOf(':') + 1, 3);  
    var coordy = json.Substring(json.LastIndexOf(':') + 1, 3);  
  
        //Now click and drag slider to the right  
        MouseLeftDown(int.Parse(coordx) + 5, int.Parse(coordy) + 5);  
    MouseLeftUp(int.Parse(coordx) + 100, int.Parse(coordy) + 5);  
}  
});  

Answer 1

When executing the code. This SLIDER is actually clicked on because the slider changes value a bit.

I'm afraid not.

If this slider is indeed clicked, then when our mouse moves left and right, the slider will move with it, even if we did not click the slider (because we have clicked through the code).

But the current code does not seem to have this behavior, I still need to click on this slider and then move left and right.

After some testing, I found the cause of the problem.

The Y value of the position we need to pass to SendMouseClickEvent is shown in image 1. It is the position of the slider relative to the control. As we slide the wheel, it will change.

But the Y value obtained by the current JS code is shown in image 2. The position of the slider relative to the top of this website is fixed (as long as we don’t change the size of the page, if we adjust the page very narrowly,

Then the control will move down because of the re-formatting of the page).

So this code does not actually click the slider, which leads to the current confusion.

To capture the slider accurately, I modified the code. After clicking the button, hover the cursor on the slider, and then you can see the slider move with the execution of SendMouseMoveEvent.

    public Form1()  
    {  
        InitializeComponent();  
    }  
    private ChromiumWebBrowser browser;//CefSharp brows  
    private void Form1_Load(object sender, EventArgs e)  
    {  
        browser = new ChromiumWebBrowser("https://uniswapv3.flipsidecrypto.com")  
        {  
            Dock = DockStyle.Fill,  
        };  
        this.Controls.Add(browser);  
    }  
    private void button1_Click(object sender, EventArgs e) { new Thread(moveSlideControl).Start(); }  
    void moveSlideControl()  
    {  
        //I did it deliberately, it cannot be submitted when S*leep() is included in the code, you should delete the *.  
        Thread.S*leep(2000);  
         
        Point ptCursor = new Point(0, 0);  

        this.Invoke(new Action(() =>  
        {  
            ptCursor = Cursor.Position;  
            ptCursor = PointToClient(ptCursor);  
        }));  
        MouseLeftUp(ptCursor.X, ptCursor.Y);  
    }  
            private void MouseLeftUp(int v1, int v2)  
    {  
        var host = browser.GetBrowser().GetHost();  
        host.SendMouseClickEvent(v1, v2, MouseButtonType.Left, false, 1, CefEventFlags.None);  

        for (int i = 0; i < 7; i++)  
        {  
            v1 = v1 + i * 2;  
            host.SendMouseMoveEvent(v1, v2, false, CefEventFlags.LeftMouseButton);//Move the mouse  
            Thread.S*leep(1000);  
        }  
    }  

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.