您如何等待动态 Web 表格中的元素？答案

【问题标题】：How do you wait for an element in a dynamic web table?您如何等待动态 Web 表格中的元素？
【发布时间】：2019-01-10 10:02:08
【问题描述】：

我在搜索框中输入一个值，然后 Web 表开始根据搜索加载其值。我没有转到新页面，页面本身也没有令人耳目一新，这意味着我们仍然在同一页面上。我想等待表的值加载而不必专门说“等待 X 秒”，我想在元素加载后立即获取它们。我该怎么做？

理想情况下，应该加载表中的所有值，但现在我只是试图等待表中的第一个元素：

WebElement element =  (new WebDriverWait(driver, 10)).until(ExpectedConditions.elementToBeClickable(By.xpath("//*[@id=\"TableBox-react-component-2dd9bf99-63cb-4c78-9e0d-bed81526e7e5\"]/div/div[2]/table/tbody/tr[1]/td[1]/a")));

这只是在 10 秒后给我一个错误，因为它无法找到该元素。这是使用 Selenium 2，chromedriver。

提前致谢！

编辑：

HTML 结构：

<head>...</head>
<body class="class-name" style>
  <div class="main">...</div>
  <script src="src-of-script"></script>
  <div class>
    <header class="page-header" uk-grid uk-panel uk-panel-box">...</header>
    <div class="teaching">
      <script type="application/json" class="js-react-on-rails-component" data-component-name="TableBox" data-dom-id="TableBox-react-component-*dynamic id*">
      <div id="TableBox-react-component-*dynamic id*>
        <div data-test="table-box" class="search-table-container">...</div>

【问题讨论】：

我很确定问题出在您使用的定位器上 - 它看起来像是从浏览器生成的（而且这些都是非常脆弱的），另外还有一个 @987654323 @ 属性的值几乎可以肯定是动态的。这意味着在每个页面加载中，实际定位器都会有所不同，因此您的等待将失败。添加 HTML 源代码，我们将帮助您构建更可靠的源代码。
@TodorMinakov 感谢您抽出宝贵时间回复我的问题。我认为您所说的内容是正确的，当我重新加载页面时，表格会获得一个新的 ID。所以，每次我运行我的程序时，它都会输入错误的表 ID。表的 ID 在分页期间不会改变 - 这很好。但是，那我该如何定位桌子呢？是否可以从表格上方的行中的 JavaScript 属性“data-dom-id”中获取 id？

标签： java selenium selenium-webdriver web-scraping selenium-chromedriver

【解决方案1】：

您可以将 try 和 catch 与递归函数一起使用。使用 try 和 catch 块创建一个方法，其中在 try 块中，放置 Thread.sleet(seconds);然后调用 findElement。在 catch 中再次调用该函数。我遇到了在指定时间动态生成的 toast 消息的问题，并通过这种方法解决了

【讨论】：

感谢您的评论，但不确定这是否可行。正如我所提到的，我使用 WebDriverWait 和 10 秒超时，所以我不相信这与我必须等待更长时间有关。

【解决方案2】：

考虑到元素的 id 是动态的 - 它们的后缀在每次页面加载时都会发生变化，您可以尝试使用基于它们的常量部分的定位器。为此，xpath 函数contains() 非常方便。此定位器将选择您示例中的最后一个 <div>：

//div[@class="teaching"]/div[contains(@id, "TableBox-react-component")]/div[@data-test="table-box"]

匹配/返回的元素将是 <div>，其属性 data-test 等于“table-box”（表达式中的最右边），其父元素是带有 id 属性的 <div>在其值中具有“TableBox-react-component”。带有 id 的 <div> 必须有一个 <div> 父级，其类值为“teaching”。
在获得属性的确切常量部分之前，可能需要多次跟踪和错误，但这就是这里的想法。

一旦确定了定位器的这一部分，您必须将元素追加到<table> 和<td> 到它，以获取实际的目标html 元素。

【讨论】：