Decoding CssSelector Statements

user_16132574 0
Viewed 35

I'm getting this error:

unable to locate element: {"methode":"css selector","selector":".ftMtypSt-Primary> span"}

Code is being generated by the FireFox Developer Selenium IDE and exported to Python.

driver.find_element(By.CSS_SELECTOR, ".ftMs-input").send_keys("Dan")
driver.find_element(By.CSS_SELECTOR, ".ftMtypSt-Primary > span").click()
driver.find_element(By.CSS_SELECTOR, "li:nth-child(4) > div").click()

I want to be able to decode these parts of the statements: .ftMs-input, .ftMtypSt-Primary > span and li:nth-child(4) > div

firefox-developer-tools selenium-webdriver selenium css-selectors python
1 Answers

The css-selectors can be decoded as follows:

  • .ftMs-input: Within a cssSelector . indicates classname. So .ftMs-input would search for an element with classname as ftMs-input. As an example:

    <input class="ftMs-input" ...>

  • .ftMtypSt-Primary > span: Similarly .ftMtypSt-Primary would search for an element with classname as ftMtypSt-Primary, > indicates immediate descendant, which is a <span> tag. As an example:

    <button class="ftMtypSt-Primary" ...>
  <span>...</span>

  • li:nth-child(4) > div: Similarly li:nth-child(4) would select every <li> element that is the forth child of its parent, > indicates immediate descendant, which is a <div> tag. As an example:

    <ul class="list items" ...>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>
      <div>This node would be selected</div>
  </li>

tl; dr

CSS Selector Reference

user_74294470
Related