0

Some css expressions I see are like this

div > div > span > h1

while others use

div div span h1

What are the advantages / disadvantages to using one approach vs the other?

6

For ones who know xPath > would have pretty much the same meaning as / (slash) and " " (a whitespace) would mean the same as // (double slash).

Hence > takes direct children of an element, but " " takes all the nested elements.

In your example the first query would not necessarily locate the same element that the second would locate because the second one can "jump" over several nested elements unlike the first one.

I believe that the main disadvantage of the second approach is possible performance issue on big documents. Any strict search would give you more performance-effective result than less strict one.

Below is the short example of what would be located by your first query and your second query:

<div>
    <div>
        <span>
            <h1>First and second queries would find this</h1>
            <div>
                <h1>Only second query would find this</h1>
                <h1>and this</h1>
            </div>
        </span>
    </div>
</div>
| improve this answer | |
4

Possibly the largest difference, in automation terms, is how fixed and brittle the locators are.

In the first example - the one with the >'s they effective mean that there must a div, with a div immediately within it, with a span immediately within that (ie no intermediary spans or div or table stuff) with a h1 immediately within that. In these contexts immediately doesn't mean it has to be the first child, just that is has not be moved to any deeper level or within any other elements. This effectively hard-codes the element finder to the current layout of the page.

Using "" (space) however is subtly different. This says that, again there must be a div, but then - somewhere in the DOM that is contained within that div there is another div and then somewhere in the DOM contained within that div is a span and then somewhere in the DOM containing that span is a H1. Whew! What this effectively means is that the layout of the page can change - which is inevitable in most applications over time - without necessarily breaking the automation. This makes the automation more robust and reliable increasing its value. Finding the right combination of selectors that are both specific and general enough can be quite an art.

| improve this answer | |
  • 1
    How about something like .foo>.bar versus .foo > .bar. I wonder what the best practice on this is... – Qasim Jan 7 '19 at 7:08
  • I find .foo>.bar less readable than .foo > .bar and readability is key – Michael Durrant Jan 7 '19 at 11:04
  • Note that the question was about using ">" vs using " " (a space) – Michael Durrant Jan 7 '19 at 11:05
2

'>' For immediate child element

' ' (space) for an child element on any sublevel.

I prefer to use space as it covers both scenarios and less brittle in long time.

From performance perspective as well I think Its good trade off between few milliseconds and a long term stable locator.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.