Locating an element by id

Question

What is the difference between the following location techniques?

1. element(by.id(\"id\"));
2. element(by.css(\"#id\"));
<

Answer 1

Identifying differences would be pretty tough. Here are few things that i found -

executeScript() schedules a command to execute JavaScript as a string in the context of the currently selected frame or window. Though this is fast, readability of code is low.

element() function in turn resolves to findElement() function which schedules a command to find the element on the DOM. Improved readability.

From performance perspective according to me, here are the rankings in ascending order starting with the fastest and all of them were close to each other with differences in few milliseconds -

1 - browser.executeScript("return document.getElementById('id');");
2 - browser.executeScript("return document.querySelector('#id');");
3 - element(by.id("id"));
4 - element(by.css("#id"));
5 - element(by.xpath("//*[@id='id']"));

The reason for the javascript executeScript() being so fast is because the command its executed on DOM directly with no conversions. This link justifies their rankings between each other.

The remaining protractor specific element() locators are slow as protractor needs to convert the commands to get the web-elements using findElement() function. Getting element by id is faster than using css and xpath (This is also dependent on how the locators are being used and often can change based on usage).

NOTE: The above performance analysis was the average of many tests that i ran locally on my machine, but it can differ based on system tasks that internally affect running the test scripts.

Hope it helps.