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.