How to find out DOM and CSS address to an element for Selenium?

Tags: css,dom,selenium

Problem :

I have a following element (Login box):

<input type="text" style="font-family: Verdana; font-size: 11px; width: 180px;" id="ctl00_Content_ctl00_Login2_UserName" maxlength="50" name="ctl00$Content$ctl00$Login2$UserName">

Because I have a Firebug, if I right click on on the element it gives me XPath address (//*[@id="ctl00_Content_ctl00_Login2_UserName"]).

As per Selenium website, I am suppose to be able to click on the element also by DOM and by CSS. How do I do it? Is there an easy tool (browser add-on) available for this purpose? I just don't want to be limited by id and xpath alone.

Solution :

CSS locator would be


DOM Locator would be


    CSS Howto..

    How to highlight spaces in a tag? (CSS only)

    how to draw a vertical line between two option boxes using css

    How to align div elements while using css tables

    how to get the cssText of external style?

    How to make Bootstrap navbar brand image larger

    How can I use CSS to center text in DIV

    How to exclude specific the form from the css applied to body [duplicate]

    How to change this script into

    How to modify this JQuery CSS into my view?

    How to add custom css responsive in Avada WP Theme?

    How to minified all js and css files using gruntfile.js in sails.js

    How to get all images(overlapping allowed) in one line using css?

    django render_to_response how to send special characters

    How apply css to div in catch statement using jquery

    How to slide a div out

    How to margin div inside other div?

    How can I flip multiple div at same time?

    How to make a Sass mixin declare a non-nested selector on base level?

    how to check css is valid for IE8

    How to make jquery click() work with css button?

    How to change css class according to the name attribute of a parent

    How to concatenate and minify multiple CSS and JavaScript files with Grunt.js (0.3.x)

    How to make text responsive to div size?

    how to create 3 columns in HTML+CSS and group 2 div elements in the third column

    How to make this text bigger?

    How to remove Clear:Both in CSS

    How to add a color transitions in CSS and HTML like the one in the login area of the Instagram app?

    How to give different color to draghandle in RangeSlider

    How to apply CSS to my JQuery Plugin

    How do I filter unwanted CS styles from CS sheet?