Click a button in CefSharp browser in Windows Forms
Asked Answered
F

2

6

I'm trying to click a button on a webpage (kahoot.it), and I already know that I probably need to use Javascript for that which is fine, as long as it stays with 1 line of JavaScript because that's easy to implement in WinForms. I don't have much information on the button, only:

<button type="submit" value="Submit" class="enter-button__EnterButton-sc-1o9b9va-0 kxpxeu" data-functional-selector="join-game-pin"><span>Enter</span></button>

Could you guys please help? There's only one button on the page, maybe that helps.

Faxen answered 7/12, 2019 at 21:8 Comment(3)
Do you mean you want to click on the button which is in the web page, using C# code?Slater
Start by reading github.com/cefsharp/CefSharp/wiki/…Jacquelinjacqueline
@RezaAghaei YesFaxen
S
10

You need to write a piece of javascript code and run it when the page loaded.

Run script after page loaded

To run the code after the page loaded, you can use ExecuteScriptAsyncWhenPageLoaded method or you can handle FrameLoadEnd or LoadingStateChanged.

DOM manipulation - find element, set value, click on button

For the javascript code, you can use any of the available javascript functions. for example find the element using getElemenetsByName, getElementsByTagName or getElementById.

After you found the element, you can set its value or for example for a button you can click on it by calling its click() method.

CefSharp Example - Browse a URL, fill an input and click on a button

The following code, adds a ChromiumWebBrowser control to a Form. Then it browses google and fill the search box with a text and clicks on the search button:

//using CefSharp;
//using CefSharp.WinForms;
ChromiumWebBrowser browser;
protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    browser = new ChromiumWebBrowser("https://www.google.com/");
    browser.Dock = DockStyle.Fill;
    Controls.Add(browser);
    var script = @"
            document.getElementsByName('q')[0].value = 'CefSharp C# Example';
            document.getElementsByName('btnK')[0].click();
        ";
    browser.ExecuteScriptAsyncWhenPageLoaded(script);
}

Example 2

In the following example, using ExecuteScriptAsync you can fill the search box with a text and clicks on the search button programmatically:

//using CefSharp;
//using CefSharp.WinForms;
ChromiumWebBrowser browser;
protected override void OnLoad(EventArgs e)
{
    base.OnLoad(e);
    browser = new ChromiumWebBrowser("https://www.google.com/");
    browser.Dock = DockStyle.Fill;
    Controls.Add(browser);
}
private void button1_Click(object sender, EventArgs e)
{
    var script = @"
        document.getElementsByName('q')[0].value = 'CefSharp C# Example';
        document.getElementsByName('btnK')[0].click();
    ";
    browser.ExecuteScriptAsync(script);
}

Note: In your case, for kahoot.it, the script should be:

var script = @"
        document.getElementById('game-input').value = '123';
        document.getElementsByTagName('button')[0].click();
    ";
Slater answered 7/12, 2019 at 22:48 Comment(9)
Thanks a lot! How would I run the same script but trigger it when clicking a button on the WinForms?Faxen
You're welcome. Handle Click event of the button. Then in the event handler, write var script = ...; then browser.ExecuteScriptAsync(script);.Slater
Thank you!! Now I have just one more question. The site doesn't seem to recognize the input in the textbox. When I run the code, it gives me an error that is given when the textbox is empty, however when I manually type it, it gives me another error (Which is okay, and the result I want to have).Faxen
The CefSharp API Doc links as a bit all over the place, three different versions are referenced, none of which is the current version 75.1.x. Also one of the links is for the OffScreen version, not WinForms. For general reference cefsharp.github.io/api contains a list of all API docs, use the version that matches (Docs are version specific).Jacquelinjacqueline
@Jacquelinjacqueline Thanks for checking the links. Feel free to correct them if you know the correct links (I appreciate your contribution). I also will check them as soon as I can :)Slater
@RezaAghaei Links fixed. Overall a very detailed answer :+1:Jacquelinjacqueline
Can we open another Windows Form by clicking on a button (button1_Click in above example) which is part of chromium web? Is this possible with CefSharp?Acridine
what about getting the value of input element using cefsharp? because variable in c# is different context with the JS context am i right... @RezaAghaei?Grammalogue
@Grammalogue I expect you are able to use EvaluateScriptAsync to execute a piece of js code which returns value of an input.Slater
L
1

Changing Target Framework version to 4.7.2 from 4.0 fixed for me True Target Framework Version

Lowe answered 21/1, 2021 at 13:58 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.