解码 CssSelector 语句

Question

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

Answer 1

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