title: Select html input element in ant-select
body: <p>I want to input some text into an Ant Select field within a modal in test cafe.</p>
  
  <p>This is the HTML I'm working with:<a href="https://i.stack.imgur.com/zCPTM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zCPTM.png" alt="htmlForProject"></a>  I open two modals in the test, so the one I'm interested in is the second one.  Currently, I've tried the following to identify it but each time I run the test in test cafe I'm told <code>The element that matches the specified selector is not visible.</code> on the line <code>.typeText(LayerNameInputForDeletion, layerName, { replace: true })</code>:</p>
  
  <pre><code>/*
  goal: open layer adding modal, close it by 
  hitting OK, thus accepting the current settings.
  Then open layer deleting modal and remove the new layer
   */
  test('Can open and accept default layer adding pop up', async t =&gt; {
  
      let layerName = "MyGreatLayer";
  
      ...
  
      //open second modal
      await t
          .click('#LayerDeletingPopUpButtonID');
  
      //select layer delete OK button
      const LayerDeletingModalOKButton = Selector('div.ant-modal').nth(1)
          .find('div.ant-modal-footer')
          .find('button.ant-btn-primary');
  
      //XXX this selector fails to find the element
      //select the input field from ant Select to enter layer name
      const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
          .find('div.ant-modal-body')
          .find('input.ant-select-search__field');
  
      //click the OK button from the second modal after typing in the layer name
      await t
          .expect(LayerDeletingModalOKButton.with({visibilityCheck: true}).exists)
          .ok({timeout: 30000})
          .hover(LayerDeletingModalOKButton)
          //this typing step fails to find the element
          .typeText(LayerNameInputForDeletion, layerName, { replace: true })
          .click(LayerDeletingModalOKButton);
  });
  </code></pre>
  
  <p>This selector fails to find the input field in the ant-Select field:</p>
  
  <pre><code>const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
      .find('div.ant-modal-body')
      .find('input.ant-select-search__field');
  </code></pre>
  
  <p>I've tried a few different selectors to no avail:</p>
  
  <p>Something more specific:</p>
  
  <pre><code>const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
      .find('div.ant-modal-body')
      .find('div.ant-select-selection__rendered')
      .find('div.ant-select-search')
      .find('input.ant-select-search__field');
  </code></pre>
  
  <p>The exact path given when I select "copy selector" from the "inspect" page in Chrome:</p>
  
  <pre><code>const LayerNameInputForDeletion = Selector('body &gt; div:nth-child(9) &gt; div &gt; 
      div.ant-modal-wrap &gt; div &gt; div.ant-modal-content &gt; 
      div.ant-modal-body &gt; div &gt; div &gt; div &gt; 
      div.ant-select-search.ant-select-search--inline &gt; div &gt; input');
  </code></pre>
  
  <p>A combination of above approaches:</p>
  
  <pre><code>const LayerNameInputForDeletion = Selector('div.ant-modal').nth(1)
          .find("div.ant-modal-content &gt; 
                 div.ant-modal-body &gt; div &gt; div &gt; div &gt; 
                 div.ant-select-search.ant-select-search--inline &gt; 
                 div &gt; input");
  </code></pre>
  
  <p>What am I missing here? How can I select that element to type into?</p>