如何在 VBA 中使用 Selenium 在动态网页中查找元素？

Question

我正在尝试使用 VBA 中的 Selenium 浏览此网页：https://www.familysearch.org/search/collection/1401638/。我使用 Chrome 作为浏览器并检查以查看页面中的元素。我不熟悉 javascript，但我是 VBA 专家。我可以浏览页面上看似静态的元素，例如单击右上角的登录按钮。但是我还没有弄清楚如何与具有标签 Search Collection 的中心的表单进行交互。

这是我目前的代码：

Sub WebScraper()
    Dim FSBrowser As New WebDriver
    Dim FSWebElements As WebElements

    FSBrowser.Start "chrome", "https://www.familysearch.org/search"
    FSBrowser.Get "/collection/1401638/"        ' United States Census, 1850
    
    FSBrowser.FindElementById("signInLink").Click
    
    'FSBrowser.FindElementById("userName").SendKeys ("xxxx")
    'FSBrowser.FindElementById("password").SendKeys ("xxxx")
    'FSBrowser.FindElementById("login").Click

    FSBrowser.Quit
End Sub

我想在出生地文本框中输入“弗吉尼亚”，然后点击搜索。

在 Inspect 中呈现的完整 HTML 代码真的很长，因为有相当多的表单元素。这是来自 javascript 和两个元素的表单信息：

<fs-search-form mobile-breakpoint="500">
<form id="form" method="get" class="search-form " action="/search/record/results">
<input type="text" class="fs-field-group__input" name="birthLikePlace" id="birthLikePlace">
<button type="submit" class="fs-button fs-button--recommended">Search</button>

这似乎是一项简单的任务，但我显然遗漏了一些东西。有人可以告诉我那是什么吗？看起来通过名称或birthLikePlace 的 Id 查找元素会起作用，但它不起作用。

编辑： 似乎 shadow-root 在这个问题上发挥了重要作用。它被标记为打开，但我怀疑还有更多我没有看到的内容。以下是birthLikePlace 的完整部分：

<sf-search-field-group field-list="[&quot;birthLikePlace&quot;, &quot;birthLikeDate&quot;]" trigger-id="birth">
   #shadow-root (open)
      <style> ... </style>
      <div class="field-section" visible="">
         <h2 class="section-header fs-h5">KEY: null (en)</h2>
         <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
         <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
         <div class="trigger-group shown active flexible-container" for="birth">
            <legend role="button" class="closer " for="birth" aria-label="Hide search fields for birth"> </legend>
            <slot></slot> </div> </div>
   <sf-search-field field-id="birthLikePlace" field-type="place">
      #shadow-root (open)
         <style> ... </style>
         <span class="field" visible="" field-id="birthLikePlace">
            <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
            <span class="event-place flex-item">
               <label for="birthLikePlace_place">Birthplace</label>
               <span class="fs-field-group">
                  <input type="text" class="fs-field-group__input" name="birthLikePlace" id="birthLikePlace">
                  <span class="fs-field-group__attachment fs-tooltip">
                     <span class="fs-tooltip__trigger">
                        <input type="checkbox" name="birthLikePlace.exact" id="birthLikePlaceexact">
                        <label aria-label="Match birthplace exactly" for="birthLikePlaceexact"></label> </span>
                     <span class="fs-tooltip__body" role="tooltip">::before Match birthplace exactly ::after</span> </span> </span> </span>
               <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
               <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
               <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
               <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
               <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
               <dom-if style="display: none;"><template is="dom-if"></template></dom-if> 
         </span>
   </sf-search-field>
   <sf-search-field field-id="birthLikeDate" field-type="year"> ... </sf-search-field>
</sf-search-field-group>

Answer 1

假设 HTML 与您显示的一样，然后 SendKeys 使用出生地的 id 输入，然后按类定位相邻按钮

FSBrowser.FindElementById("birthLikePlace").SendKeys "Virginia"
FSBrowser.FindElementByCss("#birthLikePlace + fs-button").Click

如果 HTML 在您提供的示例中显示的方式不平坦，您可能需要使用更独特的类，例如

FSBrowser.FindElementByCss(".fs-button--recommended").Click

或者也许是一个属性

FSBrowser.FindElementByCss("[type=submit]").Click

真正取决于第一个匹配项的位置是必需的。无法从小的 html 示例中看出这就是为什么我最初使用锚定到 id 的选择器（希望是唯一的 id）。