Some jQuery selectors works on Firefox console, even though jQuery hasn’t been referenced

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.

Tbot

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 :

$(‘.alert’)

Note that we are finding the element given the class, and as you can see here, we were able to find that element:

Find 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

ScreenHunter_429 Apr. 29 19.58

Using FireQuery Firefox addon  we confirm that our page does not have jQuery referenced:

jquery

The addon adds the latest version of jQuery to the page :

addon

Now, the jQuery selector returns the DOM element (which can be used to convert it to a IWebElement).

good

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.

Advertisements

About Michael Hidalgo

Michael is a Software Developer Engineer based on San José, Costa Rica. He leads the OWASP Chapter from Costa Rica. You can take a look at my blog at http://blog.michaelhidalgo.info/
This entry was posted in Browser Automation, JQuery, Selenium WebDriver, WebDriver and tagged , , . Bookmark the permalink.

One Response to Some jQuery selectors works on Firefox console, even though jQuery hasn’t been referenced

  1. i think to work with jquery selectors is the bes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s