Tuesday, 7 July 2015

Tweak live pages with some jQuery in the Chrome console

A while ago, our designers showed me a clever trick using jQuery to check the CSS selectors needed for an automation framework I was looking at.

Say for example you're trying to locate the an item in the menu bar on the Microsoft site...

Open up the Inspector panel [Ctrl+Shift+I]
Type $('.menuDrop') into the Console tab and hit enter.

This lists all elements with a class of  "menuDrop".

You can narrow down your selection using further combinations of selectors and use the console to check it without having to wait for a test to spin up and run each time.


Some time later we realised that because the loading graphics on a site we're building are css animations, simply adding the class of "spinner" to something made it rotate. 
Much fun was had with the Inspect Element menu, but there must be an easier way to do it...

Yup. jQuery has an addClass and removeClass method.
Entering $('.btn').addClass("spinner") into the console makes all of the buttons on the page spin.

$('*').addClass("spinner") may have been a step too far... :-/

All fun and games, but I have since found an actual practical use for this!

The same site integrates with a third-party chat system and has the option to disable it across the site. The links and buttons that start a web chat are all wrapped in tags that can be hidden when chat is not available. So rather than toggling an external system or changing things manually, I can use addClass and removeClass to change these elements.

Here's an example block of help text.

In the console, do:
$('.chat').removeClass("enabled");
$('.chat').addClass("hidden");

Anything with a class of 'chat' is updated and I get a list of the elements that were affected.


Chat buttons are hidden. The text still makes sense. To switch back, all i need to do is reverse the commands. Or just refresh the page.

And another handy application for this that I've just discovered. A different project has a list of orders that are selected by checkboxes. The actual users have no need for a (de)select all button, but in testing it's handy to just process a single record. I can toggle all of the checkboxes on the page with:

$('input[type=checkbox]').click();

There are probably hundreds of other uses that I haven't even considered yet!

No jQuery? No problem...

There are various extensions that will allow you to run jQuery against any site. Or you can insert jQuery into the page by pasting these lines into your console:

var jq = document.createElement('script'); jq.src = "http://code.jquery.com/jquery-latest.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); jQuery.noConflict();

No comments:

Post a Comment