How to Invoke JS onclick function and args using C# Selenium

user_14696083 0
Viewed 134

I have a problem with the following situation. I want to execute a JS Click on my C# Selenium Element but my click is not being properly invoked, I dont understand the call convention on the ExecuteScript function to properly send the needed arguments.

This is the JS Function I am trying to invoke

function clickTab(obj, conteudo, e)
{
    var sel;
    if(e.target)//Firefox
    {
        sel = e.target.id;
    }
    else//IE
    {
        sel = e.srcElement.id;
    }
    var count = obj.childNodes.length;
    for(i = 0; i < count; i++)
    {
        var node = document.getElementById(obj.childNodes[i].id);
        if(node){
            var numNode = node.id.split('-');
            if(node.id == sel)
            {
                node.className = 'selected';
                var countC = conteudo.childNodes.length;
                for(j = 0; j < countC; j++)
                {
                    var nodeC = document.getElementById(conteudo.childNodes[j].id);
                    if(nodeC){
                        var numNodeC = nodeC.id.split('-');
                        if(numNode[numNode.length-1] == numNodeC[numNodeC.length-1])
                        {
                            nodeC.className = 'selected';                        
                        }
                        else
                        {
                            nodeC.className = '';
                        }
                    }
                }
            }
            else
            {
                node.className = '';
            }
        }
    }
}

This is the HTML wrapper call to the JS Function

<ul id="ctl00_ctl00_tabs" class="tabs" onclick="javascript:clickTab(this, document.getElementById('contents'), event)">
    <li class="selected" id="tab-1" style="position: relative; z-index: 1">Var1</li>
    <li id="tab-2" style="position: relative; z-index: 1">Var2</li>
    <li id="tab-3" style="position: relative; z-index: 1">Var3</li>
</ul>

This is my C# attempt to Execute the click to select the proper tab but the driver.ExecuteScript triggers an exception on driver.ExecuteScript.

IWebElement buttonToClick = driver.FindElement( By.XPath("//ul[ @id='ctl00_ctl00_tabs' and @class='tabs' ]" );
string script = buttonToClick.GetAttribute( "onclick" );
driver.ExecuteScript( script, "tab-2" );

Any help or hint will be greatly appreciated. Thank you.

selenium onclick javascript c#
1 Answers

The IWebElement.Click() method should trigger a real click event, which will cause the clickTab JavaScript function to get executed. Try clicking on the "tab-2" list item. You might want add an explicit wait just to be sure things work:

var tab = driver.FindElement(By.Id("tab-2"));
var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(20));

wait.Until(d => tab.Click());

Since the <li> tag you are trying to "click" has an HTML tag Id, you can locate this element using Selenium with the By.Id(...) locator strategy.

The wait.Until(d => tab.Click()); part will attempt to click the tab for 20 seconds. If the click succeeds, it will stop waiting. If the click throws an exception in Selenium, it will wait some number of milliseconds before attempting to click again. This guards against race conditions between your C# code and the web browser. Sometimes an element is not clickable the same moment that Selenium can find it. This will happen if there are animations playing on the web page triggered by some other action.

user_30922980
Related