选择在 HTML 中不可见的动态元素答案

【问题标题】：Selecting dynamic element which is not visible in HTML选择在 HTML 中不可见的动态元素
【发布时间】：2014-08-12 17:36:51
【问题描述】：

我在选择元素时遇到问题，因为它会在用户从下拉列表中选择选项时动态生成。

例如，用户从下拉列表中选择“菜单集”，完成后，工具栏上会出现“新建”按钮 (ID:d_toolbar_toolbar)

这取决于选择，并且当我使用 I.E. 检查它时不会出现在 html 中。开发者工具。

我查看了网页的源代码，并找到了下面的内容，它似乎是根据选择使用 Javascript 将其动态添加到工具栏上的

<table border="0" cellspacing="2" width="100%" height="100%">
<tr>
<td height="24">
<?XML:NAMESPACE PREFIX="TBNS" /><?IMPORT NAMESPACE="TBNS"  IMPLEMENTATION="/webctrl_client/1_0/toolbar.htc" />
<TBNS:Toolbar id="d_toolbar_toolbar" class="standarddarkrow" oncheckchange="javascript:toolbarButtonClicked('{0}','{1}','False',-1,13, true, 'd:toolbar:toolbar')" oncheckchange="JScript:if (event.srcNode != null) __d_toolbar_toolbar_State__.value+=((event.srcNode.getAttribute('selected')=='true')?'+':'-')+event.flatIndex+';';" onbuttonclick="JScript:if (event.srcNode != null) if ((event.srcNode.getType() != 'checkbutton') || (event.srcNode.getAttribute('_autopostback') != null)) if (getAttribute('_submitting') != 'true'){setAttribute('_submitting', 'true');try{__doPostBack('d$toolbar$toolbar',event.flatIndex);}catch(e){setAttribute('_submitting', 'false');}}" onwcready="JScript:try{__d_toolbar_toolbar_State__.value = ''}catch(e){}" defaultstyle="color:black;border:solid 1px #E0E3EA;background:#E0E3EA;padding:0px;" hoverstyle="border:solid 1px #416791;background:#E0E3EA;margin:0px;padding:0px;" selectedstyle="color:black;border:solid 1px #E0E3EA;background:#E0E3EA;padding:0px;" style="border-width:0px;font-family:Tahoma;font-size:8pt;">
<TBNS:ToolbarButton ID="New" imageUrl="http://www.starchef.net/skins/default/new.gif"  onkeydown="if (event.keyCode==13){event.returnValue=false}">New</TBNS:ToolbarButton>

我尝试通过 ID 进行选择 New，但这没有奏效，我想我需要选择 d_toolbar_toolbar 元素，然后做进一步的事情来选择 New，但我不知道如何。

【问题讨论】：

尝试在 Goole Chrome 和 jQuery 上调试它。
有什么网址可以查吗？
如你所说，元素是动态创建的，尝试从它的静态父元素遍历到它并检查。
本站只兼容IE。而且我无法发布完整的网址，因为它需要登录凭据。有没有办法可以使用 xpath 或 css 选择？
//TBNS，看看你能不能找到它们。 2）如果是这样，那么尝试//TBNS[@ID="New"]...如果不是，那么我会尝试找到它所在的特定单元格，然后执行/TBNS[2]。 3）如果这仍然不起作用，那么我建议使用/following-sibling::TBNS 方法。如果可以进一步帮助您，访问这一页会很棒，但我知道这里存在专有内容限制。请回复您的结果。

标签： c# html selenium

【解决方案1】：

您必须测试应用程序的特定“状态”。这意味着您将需要保存特定地图并根据下拉选择值测试它们的存在/不存在。这就是包装器或各种层很重要的地方，因为直到它因为找不到某些东西而引发错误时才会知道。一个验证成功错误的函数被抛出，然后返回一个布尔值是我发现的最好的方法。

//if (dropdown option value == x)
    if (ElementExists(By.XPath(xpathHiddenElement))
      //log what you want to or do some other check
    else
      //log what you want to or do some other check

public bool ElementExists(By by)
{
    try
    {
        IWebElement element = driver.FindElement(by);
        return true;
    }
    catch (NoSuchElementException)
    {
        return false;
    }
}

就我个人而言，我做的远不止这些，但我通常会涉及多个层次和复杂性以及错误处理和结果。这是一个简单的示例，可以在不破坏测试的情况下查找元素是否存在。

【讨论】：

我只是想导航到新按钮并单击它以导航到下一个屏幕，据我所知，这是standarddarkrow" starchef.net/skins/default/new.gif" onkeydown="if (event.keyCode==13){event.returnValue=false}">New 上面的代码是不是让我选择这个？
按钮的地图位于xpathHiddenElement 位置。这将告诉您该按钮是否存在而不会终止您的测试。然后，如果它返回 true，那么您可以执行单击它。如果它是假的，你可以改变你的下拉选择，让你知道按钮在那里，然后点击它。
如果您需要在xpathHiddenElement 中使用的实际选择方面的帮助，那么提供更多的 html 会有所帮助...您可以删除内容并仅提供标签结构一些可识别的属性。
我已经用完整的 HTML 编辑了原始帖子，谢谢。
不幸的是，这些都不起作用，在与同事交谈后，我们确定如何做到这一点的唯一方法是选择主要元素，然后使用 new Actions(_driver); actions.Click(element).MoveByOffset(-450, 0).Click().Build().Perform();手动移动并选择按钮。

【解决方案2】：

由于这些元素在 DOM 中不存在，因此通过选择主元素然后使用 movebyoffset 动作点击来解决。

    public void ClickNewMenuSet()
    {
        var element = _driver.FindElement(By.Id(("d_toolbar_toolbar")));
        var actions = new Actions(_driver);
        actions.Click(element).MoveByOffset(-450, 0).Click().Build().Perform();
    }

【讨论】：