While we have seen the power of AngularJS (which looks very promising ), it seems like this framework is a good candidate for our future implementations. At the time of writing this article (April 29th, 2013), we are already using this framework on top of TeamMentor Tbot page.
Something took my attention while I was trying to add some browser automation test to this Tbot page. I was trying to use jQuery selectors to interact with DOM elements on a page that does not have a reference to jQuery.
The funny part of this story, is the fact that some jQuery selectors worked on Firefox Console, even when we are missing jQuery reference from the page. To give you an example, this is the jQuery selector to find Tbot title :
Note that we are finding the element given the class, and as you can see here, we were able to find that element:
But we are interested on apply a jQuery selector that returns the DOM element, so our best candidate is using jQuery .get DOM Element Method.
Following with jQuery documentation, you can read that .get “Retrieve the DOM elements matched by the jQuery object.” and this is what we are interested on.
But since we don’t have jQuery referenced on that page, we get an error when trying to apply get method: TypeError: $(…).get is not a function
Using FireQuery Firefox addon we confirm that our page does not have jQuery referenced:
The addon adds the latest version of jQuery to the page :
Now, the jQuery selector returns the DOM element (which can be used to convert it to a IWebElement).
So it seems like the idea behind using jQuery selectors on a page/site that relies on jQuery is not that bad (because easily you can find DOM elements), but considering that you can have mixed frameworks (and it’s worth to reference StackOverflow question How do I “think in AngularJS” if I have a jQuery background?) then it would be better on to think about other options like CSS selectors, which appart from being a W3C recommendation, they provide a more generic approach to find DOM Elements.