How can I select the job search box in selenium?

Question

I've used selenium before but this search box is posing difficult to select.

<div class="jobs-search-box__input jobs-search-box__input--keyword">
  <button class="jobs-search-box__input-icon" type="button" data-ember-action="" data-ember-action-489="489">
    <li-icon type="search-icon" role="img" aria-label="Search"><svg viewBox="0 0 24 24" width="24px" height="24px" x="0" y="0" preserveAspectRatio="xMinYMin meet" class="artdeco-icon" focusable="false"><path d="M21,19.67l-5.44-5.44a7,7,0,1,0-1.33,1.33L19.67,21ZM10,15.13A5.13,5.13,0,1,1,15.13,10,5.13,5.13,0,0,1,10,15.13Z" class="large-icon" style="fill: currentColor"></path></svg></li-icon>
  </button>

<artdeco-typeahead-deprecated id="ember490" class="ember-view"><artdeco-typeahead-deprecated-input id="ember491" class="ember-view">  <input class="artdeco-typeahead-deprecated-input__ghost-text" placeholder="" aria-label="Search jobs" aria-hidden="true" disabled="" type="text">

<input role="combobox" autocomplete="off" spellcheck="false" aria-autocomplete="list" aria-invalid="false" aria-expanded="false" aria-label="Search jobs" id="jobs-search-box-keyword-id-ember488" placeholder="Search jobs" type="text">
</artdeco-typeahead-deprecated-input>
<!----><!----></artdeco-typeahead-deprecated></div>

I want to be able to send keys. I've been successful in selecting the text box, and my prior searches show up, but then I get an error "element is not interactable", suggesting I need to somehow find the input element.

@QHarr OP wants to `send keys`. Any reason why [tag:css-selectors] should be replaced with [tag:web-scraping]? — undetected Selenium, Apr 27 '19 at 23:07
@QHarr Interacting with the browser through xpath and css is all together a different activity wrt webscraping. What you mentioned is altogether a different opinion sir :) — undetected Selenium, Apr 27 '19 at 23:18

score 2 · Answer 1 · answered Apr 27 '19 at 19:33

I would consider the following css selector. You might not even need the input and simply use [placeholder="Search jobs"]:

input[placeholder="Search jobs"]

With a wait

WebDriverWait(driver,10).until(EC.presence_of_element_located((By.CSS_SELECTOR,'input[placeholder="Search jobs"]')))

score 0 · Answer 2 · answered Apr 27 '19 at 19:33

The desired element is an Ember.js enabled element so to locate the element you have to induce WebDriverWait for the element to be clickable and you can use either of the following Locator Strategies:

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input[id^='jobs-search-box-keyword-id-'][placeholder='Search jobs']"))).send_keys("Greg Black")

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[starts-with(@id, 'jobs-search-box-keyword-id-') and @placeholder='Search jobs']"))).send_keys("Greg Black")

How can I select the job search box in selenium?

2 Answers2