XPath, CSS Selector, Web,DOM, SelectorsHub & TestCase Studio

1. Comparison between different platform to verify xpath like DevTools (ctrl+f), console and SelectorsHub

2. Realtime example to prove the concept

1. Realtime example how to write and verify XPath in SelectorsHub

2. Learn all the smart editor features of SelectorsHub

Get your SelectorsHub Pro Free Account from Below Link-

https://selectorshub.com/how-to-get-free-trial-account-without-entering-card-details/

Attribute Preference while writing XPath

• Predefined Stable Attribute

• id

• Placeholder

• Title

• Name

• Value

• Aria-label

• Alt

• For

• data-label

• Difference between / and //

• Difference between text(), . (dot) and normalize-space()

• How to write XPath to get all elements which has the text

• How to write Relative XPath with Parent without using Axes methods of XPath

• Difference between //* and //tagname and which one should we use
  

  Important Info-

  • Pseudo Element

  • Comment

  • Input Box where we can’t enter value

  • Style Element

  • Script Tag

  • . DOM, complete document

  • // Invalid XPath

  • /. DOM, complete document

  • /* html node

• How to write case insensitive XPath

• Learn to write XPath based on attribute presence.

• How to write XPath based not matching value

• What is the difference between != and not() function

In this lecture, you will learn to write unique relative xpath to other element using axes based functions of xpath.

Formula
xpath/axesMethod::tagname

Axes Methods

• parent::

• ancestor::

• following-sibling::

• preceding-sibling::

• following::

• descendant

• ..

• child::

In this lecture, you will learn to write-

• XPath for Web Tables

• XPath for all the columns values with respect to header

• XPath for last row

• XPath for last column value

• What is cssSelector?

  • cssSelector is the address of an element.

  • There are multiple ways to write an cssSelector.

• Type of cssSelector

  There is nothing like types. It is depends on our writing pattern.

• CSS vs cssSelector

• XPath vs cssSelector

Write cssSelector using cssSelector functions

• #idValue

• .classValue

• tagName[attributeName=’attributeValue’]

• tagName[attributeName$=’ending value of attributeValue’]

• tagName[attributeName^=’starting value of attributeValue’]

• tagName[attributeName*=’substring of attributeValue’]

• Case Insensitive i
  
  $ ends with

  ^ starts with

  * contains

In this lecture you will learn to write

• Unique Relative cssSelector with Parents

• Relative cssSelector using axes types functions

• More useful cssSelector functions like > , ~ , + etc.
  
  useful cssSelector Functions

  
  

  • The (space) combinator selects nodes that are descendants of the first element.

  • The > combinator selects nodes that are direct children of the first element.

  • The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent.

  • The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent.

  • :first-child, :last-child, :nth-child(), :nth-last-child(), :first-of-type, :last-of-type
    
    The :first-of-type represents the first element of its type among a group of sibling.
    The :last-of-type represents the last element of its type among a group of sibling elements.

SVG Elements

• Doesn’t support standard XPath Format

• //svg - invalid xpath

• Supported svg XPath syntax-
  //*[local-name()='svg']
  //*[name()='svg']

• All other selectors supports SVG as standard

iframe Elements and iframe

1. iframe (same origin iframe)

2. Nested iframe

3. Cross Origin iframe

Shadow DOM Elements

1. Shadow DOM (open)

2. Nested Shadow DOM (open)

3. Closed Shadow DOM

4. Shadow DOM inside iframe

5. iframe inside shadow dom

6. nested shadow DOM inside iframe

7. closed shadow DOM inside iframe

8. SVG elements inside Shadow DOM

Note: Shadow DOM doesn’t support XPath. All other selectors can be used to access shadow DOM elements.

• What is SelectorsHub

• How to install it

• How to use it

SelectorsHub Features-

• Smart Editor

• Error Handling

• Save selectors

• Case Insensitive Selector

• Generate Selector with desired attribute

• Generate Selector with command

• Generate Selector/Code for multiple elements

• Generate Selector with “ double quotes

• Customise UI

• Reset settings to Default

More innovative and time saver features of SelectorsHub

• Generate Selector with command

• Generate Selector/Code for multiple elements

• Automatically generate the locators page for POM framework

• Generate Selector with “ double quotes. Very helpful for Playwright users.

• Personalise SelectorsHub UI

• Reset settings to Default

How to inspect Dynamic/Invisible Dropdown Elements and generate XPath for them

• Dynamic dropdown Elements which doesn’t disappear on right click.

• Dynamic dropdown elements which disappear on right click.

• Load spinner

• Verifying multiple XPaths

• Verifying all XPaths of script in one shot.

• Verifying all XPaths of a locator page in seconds.

• Auto generate Axes based relative XPath. XPath relative to other element.

• How to generate and copy XPath, selectors without opening the SelectorsHub

• Copy XPath, selectors from the context menu just by right click on the web element.

  
  

Handle and automate all these below scenarios automatically using SelectorsHub and complete hours of task just in seconds.

iframe Elements and iframe

1. iframe (same origin iframe)

2. Nested iframe

3. Cross Origin iframe
   

SVG Elements

• Doesn’t support standard XPath Format

• //svg - invalid xpath

• Supported svg XPath syntax-
  //*[local-name()='svg']
  //*[name()='svg']

• All other selectors supports SVG as standard

  
  

Shadow DOM Elements

1. Shadow DOM (open)

2. Nested Shadow DOM (open)

3. Closed Shadow DOM

4. Shadow DOM inside iframe

5. iframe inside shadow dom

6. nested shadow DOM inside iframe

7. closed shadow DOM inside iframe

8. SVG elements inside Shadow DOM

Note: Shadow DOM doesn’t support XPath. All other selectors can be used to access shadow DOM elements.

Selenium 4 relative locators

• above()

• below()

• near()

• toLeftOf()

• toRightOf()

Ex- driver.findElement(with(By.tagName("input")).above(email));

Learn about Non Interactable Elements

Elements for which XPath can be written but action can’t be performed.

Elements for which XPath can’t be written

• Elements for which html DOM is not available

• Web Browser based popup

• Canvas elements

• Form Validation & info message tooltip

Misconceptions

• I write my own XPath & don’t use any XPath tool

• DevTools gives the right info about XPath & Selectors

• We shouldn’t use XPath Plugin

Certification