title: How do I find the elements in a dynamic webpage with Selenium in VBA?
body: <p>I am trying to navigate this webpage using Selenium in VBA: <a href="https://www.familysearch.org/search/collection/1401638/" rel="nofollow noreferrer">https://www.familysearch.org/search/collection/1401638/</a>.  I am using Chrome as the browser and inspect to see the elements in the page.  I am not familiar with javascript, but am expert in VBA.  I am able to navigate the elements that appear to be static on the page, such clicking the sign in button in the upper right.  But I haven't figured out how to interact with the form in the center that has the tag Search Collection.</p>
  <p>Here is the code I have so far:</p>
  <pre><code>Sub WebScraper()
      Dim FSBrowser As New WebDriver
      Dim FSWebElements As WebElements
  
      FSBrowser.Start &quot;chrome&quot;, &quot;https://www.familysearch.org/search&quot;
      FSBrowser.Get &quot;/collection/1401638/&quot;        ' United States Census, 1850
      
      FSBrowser.FindElementById(&quot;signInLink&quot;).Click
      
      'FSBrowser.FindElementById(&quot;userName&quot;).SendKeys (&quot;xxxx&quot;)
      'FSBrowser.FindElementById(&quot;password&quot;).SendKeys (&quot;xxxx&quot;)
      'FSBrowser.FindElementById(&quot;login&quot;).Click
  
      FSBrowser.Quit
  End Sub
  </code></pre>
  <p>I would like to enter &quot;Virginia&quot; in the Birth Place text box and click Search.</p>
  <p>The complete HTML code as rendered in Inspect is really long, since there are quite a lot of form elements.  Here is the form information from the javascript and the two elements:</p>
  <pre><code>&lt;fs-search-form mobile-breakpoint=&quot;500&quot;&gt;
  &lt;form id=&quot;form&quot; method=&quot;get&quot; class=&quot;search-form &quot; action=&quot;/search/record/results&quot;&gt;
  &lt;input type=&quot;text&quot; class=&quot;fs-field-group__input&quot; name=&quot;birthLikePlace&quot; id=&quot;birthLikePlace&quot;&gt;
  &lt;button type=&quot;submit&quot; class=&quot;fs-button fs-button--recommended&quot;&gt;Search&lt;/button&gt;
  </code></pre>
  <p>This seems like a simple task, but I am clearly missing something.  Could someone show me what that is?  It looks like finding the element by name or Id of birthLikePlace would work, but it doesn't.</p>
  <p>Edit:
  It seems that shadow-root has a big part to play in this issue.  It is marked as open, but I suspect there is more to it that I am not seeing.  Here is the complete section for the birthLikePlace:</p>
  <pre><code>&lt;sf-search-field-group field-list=&quot;[&amp;quot;birthLikePlace&amp;quot;, &amp;quot;birthLikeDate&amp;quot;]&quot; trigger-id=&quot;birth&quot;&gt;
     #shadow-root (open)
        &lt;style&gt; ... &lt;/style&gt;
        &lt;div class=&quot;field-section&quot; visible=&quot;&quot;&gt;
           &lt;h2 class=&quot;section-header fs-h5&quot;&gt;KEY: null (en)&lt;/h2&gt;
           &lt;dom-if style=&quot;display: none;&quot;&gt;&lt;template is=&quot;dom-if&quot;&gt;&lt;/template&gt;&lt;/dom-if&gt;
           &lt;dom-if style=&quot;display: none;&quot;&gt;&lt;template is=&quot;dom-if&quot;&gt;&lt;/template&gt;&lt;/dom-if&gt;
           &lt;div class=&quot;trigger-group shown active flexible-container&quot; for=&quot;birth&quot;&gt;
              &lt;legend role=&quot;button&quot; class=&quot;closer &quot; for=&quot;birth&quot; aria-label=&quot;Hide search fields for birth&quot;&gt; &lt;/legend&gt;
              &lt;slot&gt;&lt;/slot&gt; &lt;/div&gt; &lt;/div&gt;
     &lt;sf-search-field field-id=&quot;birthLikePlace&quot; field-type=&quot;place&quot;&gt;
        #shadow-root (open)
           &lt;style&gt; ... &lt;/style&gt;
           &lt;span class=&quot;field&quot; visible=&quot;&quot; field-id=&quot;birthLikePlace&quot;&gt;
              &lt;dom-if style=&quot;display: none;&quot;&gt;&lt;template is=&quot;dom-if&quot;&gt;&lt;/template&gt;&lt;/dom-if&gt;
              &lt;span class=&quot;event-place flex-item&quot;&gt;
                 &lt;label for=&quot;birthLikePlace_place&quot;&gt;Birthplace&lt;/label&gt;
                 &lt;span class=&quot;fs-field-group&quot;&gt;
                    &lt;input type=&quot;text&quot; class=&quot;fs-field-group__input&quot; name=&quot;birthLikePlace&quot; id=&quot;birthLikePlace&quot;&gt;
                    &lt;span class=&quot;fs-field-group__attachment fs-tooltip&quot;&gt;
                       &lt;span class=&quot;fs-tooltip__trigger&quot;&gt;
                          &lt;input type=&quot;checkbox&quot; name=&quot;birthLikePlace.exact&quot; id=&quot;birthLikePlaceexact&quot;&gt;
                          &lt;label aria-label=&quot;Match birthplace exactly&quot; for=&quot;birthLikePlaceexact&quot;&gt;&lt;/label&gt; &lt;/span&gt;
                       &lt;span class=&quot;fs-tooltip__body&quot; role=&quot;tooltip&quot;&gt;::before Match birthplace exactly ::after&lt;/span&gt; &lt;/span&gt; &lt;/span&gt; &lt;/span&gt;
                 &lt;dom-if style=&quot;display: none;&quot;&gt;&lt;template is=&quot;dom-if&quot;&gt;&lt;/template&gt;&lt;/dom-if&gt;
                 &lt;dom-if style=&quot;display: none;&quot;&gt;&lt;template is=&quot;dom-if&quot;&gt;&lt;/template&gt;&lt;/dom-if&gt;
                 &lt;dom-if style=&quot;display: none;&quot;&gt;&lt;template is=&quot;dom-if&quot;&gt;&lt;/template&gt;&lt;/dom-if&gt;
                 &lt;dom-if style=&quot;display: none;&quot;&gt;&lt;template is=&quot;dom-if&quot;&gt;&lt;/template&gt;&lt;/dom-if&gt;
                 &lt;dom-if style=&quot;display: none;&quot;&gt;&lt;template is=&quot;dom-if&quot;&gt;&lt;/template&gt;&lt;/dom-if&gt;
                 &lt;dom-if style=&quot;display: none;&quot;&gt;&lt;template is=&quot;dom-if&quot;&gt;&lt;/template&gt;&lt;/dom-if&gt; 
           &lt;/span&gt;
     &lt;/sf-search-field&gt;
     &lt;sf-search-field field-id=&quot;birthLikeDate&quot; field-type=&quot;year&quot;&gt; ... &lt;/sf-search-field&gt;
  &lt;/sf-search-field-group&gt;
  </code></pre>