如何使用 C# Selenium 调用 JS onclick 函数和参数

Posted 2023-02-22

【中文标题】如何使用 C# Selenium 调用 JS onclick 函数和参数

【英文标题】：How to Invoke JS onclick function and args using C# Selenium

【发布时间】：2021-04-07 10:46:06

【问题描述】：

我对以下情况有疑问。 我想在我的 C# Selenium 元素上执行一个 JS 点击，但我的点击没有被正确调用，我不理解 ExecuteScript 函数的调用约定以正确发送所需的参数。

这是我试图调用的 JS 函数

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 = '';
            
        
    

这是对 JS 函数的 html 封装调用

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

这是我的 C# 尝试执行单击以选择正确的选项卡，但 driver.ExecuteScript 在 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" );

任何帮助或提示将不胜感激。 谢谢。

【问题讨论】：

为什么不点击实际元素：buttonToClick.Click();？

【参考方案1】：

IWebElement.Click() 方法应该触发一个真正的点击事件，这将导致clickTab JavaScript 函数被执行。尝试单击“tab-2”列表项。您可能需要添加显式等待以确保一切正常：

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

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

由于您尝试“单击”的 <li> 标记具有 HTML 标记 ID，因此您可以使用 Selenium 和 By.Id(...) 定位器策略定位此元素。

wait.Until(d => tab.Click()); 部分将尝试单击选项卡 20 秒。如果点击成功，它将停止等待。如果单击在 Selenium 中引发异常，它将等待一些毫秒数，然后再尝试再次单击。这可以防止 C# 代码和 Web 浏览器之间的竞争条件。有时一个元素在 Selenium 可以找到它的同一时刻是不可点击的。如果在网页上播放由其他操作触发的动画，就会发生这种情况。