Styjun

I think I understand that in Protractor,

$(selector1).$(selector2)

is generally equivalent to:

$(selector1 selector2)

Is there a reason to prefer one over the other, perhaps efficiency? My inclination is that the combined 2nd version is doing a single search, whereas the original version is doing multiple searches which sounds less efficient. However, when I read about how CSS actually performs, scanning the entire dom for each additional term in the expression (and doing it right-to-left starting with "key selector"), I wonder whether the code underneath Protractor makes it more efficient to first perform a simple selector to reduce the search space, depending on how the dotted ".$()" works when appended to a previous one.

And would the answer to this question change if comparing:

$$(multiCss).$(singleCss)

vs

$(multiCss singleCss)

And if there are no efficiency or correctness issues involved, is one form considered more readable than the other? This might be leaning into the area of opinion based answers, but I ask as a matter of whether one or the other is considered canonical style. If it's just a personal opinion and not a matter of canonical style, then forget this part of the question.

I found this to be extremely interesting. Please note that this is NOT A CANONICAL ANSWER

This is only a collection of data from some tests that I ran regarding this subject. I will likely run further tests when I have a few hours to spare to properly setup a clean testing environment, but this is all I had time to do right now.

For my test, I was navigating to a page, then running an expect() on 10 separate elements to validate their text. This was locally hosted so internet speed did not play a factor. I ran the test 5 times with the elements selected like $().$(), and then 5 more like $('CSS CSS'). I then repeated the test in headless mode to see if I would get different results.

$().$() No Headless Times:

1) 16.062

2) 16.297

3) 15.029

4) 15.773

5) 16.699

Average: 15.972

$().$() Headless Times:

1) 14.705

2) 15.081

3) 15.806

4) 14.944

5) 14.997

Average: 15.107

$('CSS CSS') No Headless Times:

1) 16.172

2) 15.556

3) 16.604

4) 16.706

5) 15.733

Average: 16.154

$(CSS CSS) Headless Times:

1) 15.288

2) 15.136

3) 15.11

4) 15.152

5) 14.805

Average: 15.098

Like you, I expected $().$() to be faster, and while this was true for non headless in my tests, not in any considerable way. Headless times ran basically the same speed regardless of how you did the selectors. The only useful take away from this data is that a potential difference in performance depending on selectors is small enough to not make noticeable difference, and would need to be tested on a much larger scale to possibly start seeing significantly different times. For sure something I want to look into more when I have enough free time to set up a properly large test case.