Understanding customized XPaths

The structure of a customized XPath is given as follows: //*[@Attribute = 'Value'].

Here, // indicates that the entire DOM will be searched. We will understand some important XPaths with the help of http://www.freecrm.com:

Mentioned below are some of the commonly used strategies.

• Using the name attribute: //*[@name='username']. This searches the DOM for an element for which the name value is username. This is the login field on the landing page. 
• Using the name and type attributes: //*[@type='password'][@name='password']. In the DOM, the password field on the screen can be identified using just the name field. Just for the sake of demonstrating multiple attributes, I have taken the type attribute also. The need for multiple attributes arises when a unique element cannot be found using just one attribute.
• Using the contains clause: //*[contains(@type,'password')]. This searches for an element whose type attribute contains the text password.
• Using starts-with: //*[starts-with(@name,'user')]. This XPath will find the username field again but this time based on the starting text present in the name attribute.
• Using the following node: //*[@name='username']// following the :: input. This XPath searches for input tags which follow the username field. The boundary of this search is the container element within which the username lies. Since there is a password textbox and Login button following the username and the username, password, and Login button are inside a form, it identifies the password textbox and Login button.
• Using the node: //*[@value='Login']// preceding the :: input. This will provide the username and password textboxes.
• Using the onclick attribute: //a[contains(@onclick,'html/entlnet/userLogin.html')]. This is a very common case and is used when we have anchor tags without an ID or name and just an onclick attribute that has a JavaScript function called onclick()={function content}. In this case, the anchor tag can be structured as <a onclick='window.open("http://boot1/html/entlnet/userLogin.html")'>Login</a>.

• Using the ExtJs qtip attribute: //*[@*[local-name()='ext:qtip'][.='Account Number']]. With the growing popularity of ExtJs for developing web apps, it is necessary to have something to identify common ExtJs attributes. One ExtJs attribute is qtip. Here we are finding an element with the qtip Account Number.
• Using and: //input[@class='textboxes' and @name='firstName']. In this case, an input element with the class attribute as textboxes and name as firstName will be located. Both conditions in and must be satisfied.
• Using or: //input[@class='textboxes' or @name='firstName']. In this case, an input element with the class attribute as textboxes or name as firstName will be located. Either of the conditions in and must be satisfied.