Trigger a html button inside a web browser control

Question

in my web browser control i am accessing a form:

<form role="form">
    <div class="form-group">
        <input type="text" class="form-control" id="InputEmail1" placeholder="name...">
    </div>
    <div class="form-group">
        <input type="email" class="form-control" id="InputPassword1" placeholder="email...">
    </div>
    <div class="form-group">
        <textarea class="form-control" rows="8" placeholder="message..."></textarea>
    </div>
      <button type="submit" class="btn btn-default">Submit</button>
</form>

How can i trigger this button automatically from vb.net application? how can i set text to the text area? am accessing the text box as follows:

    WebBrowser1.Document.GetElementById("InputEmail1").SetAttribute("value", "Sample")
    WebBrowser1.Document.GetElementById("InputPassword1").SetAttribute("value", "Sample")

i cannot access button and text area since it does not have an id or name? is their any possibility to do like this?

Answer 1

Your elements need to have IDs and if you doesn't have access to the html code you can enumerate elements like this but you must know which element is the right one:

foreach (HtmlElement element in WebBrowser1.Document.Forms[0].All)
{
    if (element.TagName.ToLower() == "textarea".ToLower())
    {
        element.InnerText = "text";
    }
}

for clicking a button try this:

element.InvokeMember("click");

Answer 2

In a lot of web automation, unless you can get the original devs to add ids, you have to navigate the DOM in order to find what you need.

Here is an example of doing that kind of filtering and web automation

var actionPanel = topPanel.insert_Above(40);
var ie = topPanel.add_IE_with_NavigationBar().silent(true); 

var server = "http://127.0.0.1.:8080";

Action<string,string> login = 
    (username, password) => {
                                ie.open(server + "/jpetstore/shop/signonForm.do");
                                ie.field("username",username);
                                ie.field("password",password);
                                ie.buttons()[1].click();  
                            };

Action loginPlaceAnOrderAndGoToCheckout = 
    ()=>{
            ie.open("http://127.0.0.1:8080/jpetstore");
            ie.link("Enter the Store").click();
            //login if needed
            var signOffLink = ie.links().where((link)=> link.url().contains("signonForm.do")).first();
            if(signOffLink.notNull())
            {
                signOffLink.click();
                login("j2ee", "pwd1");
            }           
            ie.links().where((link)=> link.url().contains("FISH"))[0].click();          
            ie.link("FI-FW-01 ").flash().click();           
            ie.links().where((link)=> link.url().contains("addItemToCart"))[0].flash().click();         
            ie.links().where((link)=> link.url().contains("checkout.do"))[0].flash().click();           
            ie.links().where((link)=> link.url().contains("newOrder.do"))[0].flash().click(); 
        };

Action scrollToTotal =  
    ()=>{
            var tdElement = ie.elements().elements("TD").toList().Where((element)=> element.innerHtml().notNull() && element.innerHtml().contains("Total:")).first();
            tdElement.scrollIntoView();                                                                                             
            tdElement.injectHtml_beforeEnd("<h2><p align=right>Look at the Total value from the table above (it should be 18.50)</p><h2>");             
        };

Action<string> exploit_Variation_1 = 
    (payload) => {
                    loginPlaceAnOrderAndGoToCheckout();                             
                    ie.buttons()[1].flash().click();  
                    ie.open(server + "/jpetstore/shop/newOrder.do?_finish=true&" + payload); 
                    scrollToTotal();
                 };

Action<string> exploit_Variation_1_SetTotalPrice = 
    (totalPrice) => { 
                        var payload = "&order.totalPrice={0}".format(totalPrice); 
                        exploit_Variation_1(payload);
                    };

Another option (which I also use quite a lot) is to actually use Javascript to do those actions (which is much easier if jQuery is available (or injected) in the target page).

    [Test] public void Issue_681__Navigating_libraries_views_folders__Clicking_the_icon_doesnt_work()
    {
        var tmWebServices  = new TM_WebServices();            

        Func<string, string> clickOnNodeUsingJQuerySelector = 
            (jQuerySelector)=>
                {           
                    ie.invokeEval("TM.Gui.selectedGuidanceTitle=undefined");
                    ie.invokeEval("$('#{0}').click()".format(jQuerySelector));
                    ie.waitForJsVariable("TM.Gui.selectedGuidanceTitle");
                    return ie.getJsObject<string>("TM.Gui.selectedGuidanceTitle");
                };

        if (tmProxy.libraries().notEmpty())
        {
            "Ensuring the the only library that is there is the TM Documentation".info();
            foreach(var library in tmProxy.libraries())
                if(library.Caption != "TM Documentation") 
                {
                    "deleting library: {0}".debug(library.Caption);
                    tmProxy.library_Delete(library.Caption);
                }             
        }   

        UserRole.Admin.assert();

        tmProxy.library_Install_Lib_Docs();
        tmProxy.cache_Reload__Data();
        tmProxy.show_ContentToAnonymousUsers(true);

        ieTeamMentor.page_Home();        
        //tmWebServices.script_Me_WaitForClose();;
        //ieTeamMentor.script_IE_WaitForComplete();

        ie.waitForJsVariable("TM.Gui.selectedGuidanceTitle");            

        var _jsTree =  tmWebServices.JsTreeWithFolders();
        var viewNodes = _jsTree.data[0].children;               // hard coding to the first library
        var view1_Id    = viewNodes[0].attr.id;
        var view5_Id    = viewNodes[4].attr.id;


        var click_View_1_Using_A    = clickOnNodeUsingJQuerySelector(view1_Id + " a"  );
        var click_View_5_Using_A    = clickOnNodeUsingJQuerySelector(view5_Id + " a"  );
        var click_View_1_Using_Icon = clickOnNodeUsingJQuerySelector(view1_Id + " ins"  );
        var click_View_5_Using_Icon = clickOnNodeUsingJQuerySelector(view5_Id + " ins"  );


        (click_View_1_Using_A != click_View_5_Using_A   ).assert_True(); 

        (click_View_5_Using_A == click_View_1_Using_Icon).assert_False(); // (Issue 681) this was true since the view was not updating
        (click_View_5_Using_A == click_View_5_Using_Icon).assert_True(); 
    }