SuperSelector – A JavaScript GUI tool to generate CSS selectors


Introduction

SuperSelector is a lightweight JavaScript GUI tool to help you generate ‘smart’ CSS selectors by simply Ctrl + Clicking anywhere on a web page.

SuperSelector

 

What makes it cool?

  • Easy to use – Ctrl + Click!
  • Very accessible (available as a bookmarklet to add to your bookmark bar)
  • Highly configurable – manually and programmatically
  • Always returns a correct result

The Problem

Testing through the browser DOM is difficult.

Automated browser tests which interact with the DOM require you to have a (reliable) way to identify all the elements on the page that you care about.

The problem is that this form of testing is ‘flaky’ by definition, as you are testing further up the testing pyramid.

Testing Pyramid

The higher up the pyramid we test, the more expensive and unreliable our tests become.

It is unrealistic to expect the HTML of a website or a web application to have ID values for each of the handles your test may need. Having better element selectors in your tests can save you hours of time in test maintenance.

In web development and in this particular type of browser testing, a large amount of time often goes into querying DOM elements via the browser console and then translating that into test code or analyzing a test failure and then trying to run the same selector manually to get more information.

The time spent on these activities add up.

Use class names and IDs, XPaths are bad

Class names and IDs help our selectors in our test code be more readable (whether it’s in JavaScript or in Java using WebDriver).

XPaths should be avoided at all costs as they are the most brittle means to identify web elements.

Example: The wikipedia text logo element found on www.wikipedia.org

Wikipedia DOM 

XPath Selector: /html/body/div/img

CSS Selector: document.querySelectorAll(“.central-textlogo img”);

One of the biggest motivations behind SuperSelector is to encourage better use of selectors in browser testing.

Where ‘better’ is defined by reliability and readability.

From the example above, the CSS selector is far more meaningful to me than the XPath selector. If somewhere down the line a parent div element was added, the XPath selector would break, but the CSS selector would still work.

An example using SuperSelector

1. Go to a web page or web application

Wikipedia

2. Launch the SuperSelector bookmarklet from your browser toolbar

bookmarklet

3. Ctrl + Click  on the wikipedia text logo element

Wikipedia text logo

4. Styling applied to the target element and the selector is generated

Generated selector

Who would use SuperSelector?

  • Any developer/QA working on automated tests which involve the DOM
    • E.g. Selenium/WebDriver tests
  • UX / Web Designers who are interesting in styling a webpage/app
  • Anyone looking to teach someone about how CSS selectors work and understanding the DOM tree

How does it work?

A quick high-level overview on the algorithm:

  • The target element is captured on the Ctrl + Click
  • SuperSelector traverses up the DOM tree querying both the current location’s parent element and the global document (DOM)
    • We’re interested to see if the target element has an ID
    • Whether it has a class/tag which is unique to the global document
    • Whether it has a class/tag which is unique to it’s parent
    • Fall back to using ‘nth-child’ selector as a last resort
    • etc
  • Continue to build up a selector string until we find one which is able to return the original target element
  • Return this to the user

Get source on GitHub

SuperSelector github source code

Try it now!

Github demo page and bookmarklet

Related Posts with Thumbnails

12 Comments

  • Cory says:

    This is exactly what I was looking for, thanks!!

  • bP says:

    So this doesn’t work on Mac because ctrl+click is like a right-click.

    • Priyank Vyas says:

      Firstly, thanks for your interest! I haven’t had much time to improve on it as I’d like but I’ve put in a quick patch which should hopefully allow Mac users to use it through ‘cmd + click’ in the mean time.

    • Tim says:

      For MAC : use command + click

  • Harish Nair says:

    An awesome tool for those looking to automate their test cases using any automation tool.

  • Ramakrishnan says:

    - Excellent article, thank you very much for sharing the experience and for the tool !

    A. Whenever the tool is not triggered on a certain webpage (for unknown reason), the specific webpage I save it offline

    B. Open the offline webpage and then use the “Superselector”

    • ramakrishnan says:

      the tool fail to intialize for example in an https page : )). These page could be saved offline and the tool triggered

      Cheers

  • RalphF says:

    How do I install your tool? I dragged your link to my bookmark bar in Chrome and clicked on it but nothing happened…

  • domo says:

    does not work on gmail ,googleplus

  • remember you’re looking to get the disk to get the slot, so jiggle away.
    While it wouldn’t run Crysis with everything max-ed
    out it may handle Quake 4 on wide-screen resolution with a few tweaking so gaming
    performance is respectable or else impressive with an all-in-one system.
    In case your company is changing their primary address, your rental company will assist you
    to move and set up all of your rental equipment
    in the new address.

  • There are various methods for getting the mba degrees prefer that distance mba education in india lets students to
    earn degrees and knowledge everywhere you look inside the world.
    Onne off the inventions that iis making the biggest waves of difference
    in today’s society is the computer system. The first advantage being which you can hear
    and see the keyboard you’re just about to buy.

  • There are needless to say, numerous free applications on the market that
    work to generate this easier; however, many have to be
    paid for. A well equipped provider commonly has a team of trained technicians available to assist you in case there is any technical difficulties.
    That was the dimensions determined hence the next decision was what processor to
    order.

Leave a Comment

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image