Selecting Nth-Of-Type in Selenium

Selecting Nth-of-type in selenium

I'm not enirely sure which one you want to select, but you should play around more with the :nth-* pseudo-classes. Here is a CSS selector that selects all 3 c3's using nth-child()

div.c1 div.c3:nth-child(1)

Like i said, you haven't really specified which one you want to select.

but my lack of understanding on nth-of-type is driving me crazy. Can anyone offer insight to why the second 2 don't work or correct my basic lack of comprehension on this selector?

One thing to keep in mind, is all of the :nth-*() pseudo-classes are dependent on their parents. Let me translate your selector:

.c1:nth-of-type(2)

Find anything with a class of c1 that is a second child.

In your case, <body> was most likely the parent, so...

<body>
  <div .c1 />
  <div .c1 /> // it highlights this one, because it's the 2nd child of the type ".c1"
  <div .c1 />
</body>

Now let me explain why your other selectors are not working.

Both .c2:nth-of-type(2) and .c3:nth-of-type(2) are looking at the parent's as well. since you are specifying a parent, it's expecting <body> as the parent. In your case, <body> isn't the parent.. the <div .c1 /> is. In reality, that selector is looking for the DOM -

<body>
  <div .c1 />
  <div .c2 /> // this **would** be the second nth-of-type, but it's not really this way. 
  <div .c1 />
</body>

Play around with the different css selectors and pseudo-classes at http://cssdesk.com it's very helpful to actively experiment on your own. you'll figure it out.

How to use css selector nth-of-type and nth-child to locate element in Python Selenium

For completeness, I have added the </li>, </ul> and </class> tags at the appropriate places and the ideal HTML will be:

<class id="class1">
  <ul>
    <li>
      <strong>section 1</strong>
      <a href="link.com/home1">some link 1</a>
    </li>
    <li>
      <strong>section 2</strong>
      <a href="link.com/home">some link 2</a>
    </li>
  </ul>
</class>
<class id="class1">
  <ul>
    <li>
      <strong>section 3</strong>
      <a href="link.com/home/abc">some link 3</a>
    </li>
    <li>
      <strong>section 4</strong>
      <a href="link.com/home/def">some link 4</a>
    </li>
  </ul>
</class>

To locate the href attribute of section 2 you can use either of the following Locator Strategies:

Using nth-child():

class#class1 > ul li:nth-child(2) a[href$="home"]

Using nth-child():

class#class1 > ul li:nth-of-type(2) a[href$="home"]

Solution

To print the value of the href attribute you can use either of the following Locator Strategies:

Using nth-child():

print(driver.find_element(By.CSS_SELECTOR, "class#class1 > ul li:nth-child(2) a[href$='home']").get_attribute("href"))

Using nth-child():

print(driver.find_element(By.CSS_SELECTOR, "class#class1 > ul li:nth-of-type(2) a[href$='home']").get_attribute("href"))

tl; dr

What is the difference between p:nth-child(2) and p:nth-of-type(2)?

How to get an 'nth-of-type' in Selenium

findElement() is not a Python. Try below instead:

intro_text = hed_dek_wrapper.find_element_by_css_selector('p:nth-of-type(2)')
assert 'Over the past 20 years, we have seen an evolution.' in intro_text.text

How to properly select nth element from the list of elements by CSS selector

You can just use the CSS selector

ul.search-result div.grid--rev

This filters out all the ads. Now you can use code to iterate through the list instead of having to rely on iterating using the locator.

Selenium WebDriver - Finding Elements using cssSelector and nth child

You can generate the css-selector from ul like ul > li:nth-child(1) for home. See below:

driver.findElement(By.cssSelector("ul > li:nth-child(1)")); >> home
driver.findElement(By.cssSelector("ul > li:nth-child(2)")); >> posts
driver.findElement(By.cssSelector("ul > li:nth-child(3)")); >> events

also reachin span is the same:

driver.findElement(By.cssSelector("ul > li:nth-child(1) > a > span")); >> home

Python Selenium get nth parent and nth child

This might help you (assuming that the 2nd parent you referred to is going backwards in heirarchy (higher up the DOM):

browser.find_elements_by_xpath("//*[contains(text(), 'b_Kunden')][1]//parent::div//parent::div")

UPDATE (code per the comment and html block provided by @Liam)

//*[text()='b_Kunden']//ancestor::div//button

Here is the HTML with DOM highlighted to the button. I hope this is what you are looking for.

HTML DOM highlighted snapshot

How to select nested elements using standard CSS selectors (nth-of-type or nth-child) for Selenium?

This works for Selenium WebDriver:

String css = ".myClass";
List<WebElement> list = driver.findElements(By.cssSelector(css));
WebElement e = list.get(n);

It's not ideal, but it works.

Selecting Nth-Of-Type in Selenium