css selector of an element having an element in its hierarchy with specific attribute

Question

<a id="inbox_row_container_24_112" class="inbox_row_container row_even" href="javascript:void(0)">
   <span id="inbox_message_24_112" class="inbox_message">
   <span id="inbox_message_attributes_24_112" class="inbox_message_attributes">
   <span id="inbox_message_attachment_24_112" class="inbox_message_attachment">*</span>
   <span class="inbox_row_clear"></span>
</a>

In the above, I want to obtain "inbox_row_container_24_112" if it has element with id="inbox_message_attachment_24_112" in its hierarchy.

Can anyone please suggest how to accomplish this ?

score 2 · Answer 1 · answered Jul 14 '14 at 23:15

2

Is there any reason you want to use CSS? This is perfect for xpath;

//a[@id="inbox_row_container_24_112" and span[@id="inbox_message_attachment_24_112"]]

Or if you wanted to lose tag constraints;

//*[@id="inbox_row_container_24_112" and *[@id="inbox_message_attachment_24_112"]]

Selenium supports Xpath as well as CSS, and you should choose a selector which meets the needs of your situation, and in this case Xpath seems more suitable than CSS

answered Jul 14 '14 at 23:15

Robbie Wareham

3,607
1
17
35

I agree with you. I am going ahead with javascript for now. – Sridevi Yedidha Jul 15 '14 at 18:13

score 1 · Accepted Answer · edited May 23 '17 at 10:32

1

It sounds like you're looking for a parent selector, AKA find $('#inbox_message_attachment_24_112') and go to its parent. Unfortunately, CSS does not have this.

similar question: CSS selector for "foo that contains bar"?

One of the answers suggests using this in jquery:

$('#parent:has(#child)');

I would suggest starting there! :)

edited May 23 '17 at 10:32

Community

1
1

answered Jul 14 '14 at 19:01

Abarnett

277
5
16

using javascript similar to the above. Thanks. – Sridevi Yedidha Jul 15 '14 at 18:13

score 1 · Answer 3 · answered Jul 14 '14 at 22:25

You may consider using Helium - Selenium WebDriver wrapper which offers a jQuery-like selector as part of its API.

Assuming you are using WebDriver in Java, you can try the following code:

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import static com.heliumhq.API.*;

public class MyElementFinder {
    public WebElement findMyElement() {
        startChrome("YOUR-URL-HERE");
        $ inboxMessageAttachment = $("#inbox_row_container_24_112 #inbox_message_attachment_24_112");
        WebElement elem = inboxMessageAttachment.getWebElement();
        do {
            elem = elem.findElement(By.xpath("parent::node()"));
        } while (!elem.getAttribute("id").equals("inbox_row_container_24_112"));
        return elem;
    }
}

Please note that your HTML code is not 100% valid - two of the <span> tags do not have corresponding closing tags </span>. If the HTML code was corrected and looked as following:

<a id="inbox_row_container_24_112" class="inbox_row_container row_even" href="javascript:void(0)">
   <span id="inbox_message_24_112" class="inbox_message"></span>
   <span id="inbox_message_attributes_24_112" class="inbox_message_attributes"></span>
   <span id="inbox_message_attachment_24_112" class="inbox_message_attachment">*</span>
   <span class="inbox_row_clear"></span>
</a>

Then the Helium script would have been much shorter and nicer:

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import static com.heliumhq.API.*;

public class MyElementFinder {
    public WebElement findMyElement() {
        startChrome("YOUR-URL-HERE");
        $ inboxMessageAttachment = $("#inbox_row_container_24_112 > #inbox_message_attachment_24_112");
        return inboxMessageAttachment.getWebElement().findElement(By.xpath("parent::node()"));
    }
}

In the both above examples the findMyElement() method throws an exception of type NoSuchElementException if no such element exists - this can be handled to cover the case when there is no such element present.

Disclaimer: I'm one of Helium's developers

score 0 · Answer 4 · answered Jul 14 '14 at 18:58

0

You can only access the child with CSS:

#inbox_row_container_24_112 > #inbox_message_attachment_24_112

There is no way to obtain the parent once you selected the child, though.
However, using JavaScript this would be an easy problem to solve.

answered Jul 14 '14 at 18:58

Horen

10,510
9
60
105

css selector of an element having an element in its hierarchy with specific attribute

4 Answers4