Scribd
Upload
19 views

UDEMY_SK_SelectorsHub Tutorial- A Free Next Gen XPath & Locators Tool

The document is a tutorial for SelectorsHub, a browser extension that aids in writing, updating, verifying, and generating locators for web elements. It outlines various features, including support for nested iframes, shadow elements, and SVG elements, as well as tools like a smart editor and error handling. Additionally, it provides links to resources and test automation frameworks available on GitHub.

Uploaded by

abhimanyu thakur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

UDEMY_SK_SelectorsHub Tutorial- A Free Next Gen XPath & Locators Tool

The document is a tutorial for SelectorsHub, a browser extension that aids in writing, updating, verifying, and generating locators for web elements. It outlines various features, including support for nested iframes, shadow elements, and SVG elements, as well as tools like a smart editor and error handling. Additionally, it provides links to resources and test automation frameworks available on GitHub.

Uploaded by

abhimanyu thakur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

====================================================

Tutor: Sanjay Kumar


Reference: UDEMY
Course: SelectorsHub Tutorial- A Free Next Gen XPath &
Locators tool
====================================================
1. Document prepared by
a. Rajat Verma
i. Github Profile: https://github.com/rajatt95

ii. Github Page: https://rajatt95.github.io

iii. LinkedIn: https://www.linkedin.com/in/rajatt95

iv. Topmate: https://topmate.io/rajatt95

v. Telegram: https://t.me/rajatt95

vi. Instagram: https://www.instagram.com/rajattvermaa95

vii. Youtube: https://www.youtube.com/@rajatt95


—------------------
2. Test Automation Frameworks available on Github
a. WEB

i. Selenium WebDriver + Java

ii. Cypress + (Javascript and Typescript)

iii. Playwright + (Javascript and Typescript)


b. MOBILE

i. Appium + Java
c. API

i. Rest Assured + Java

ii. Requests + Python


-------------------------------------------------------------------------------------------------------------------------------

1
—------------------
3. Documents:

a. Github repository: https://github.com/rajatt95/Documents

b. Google Drive:
https://drive.google.com/drive/folders/1tne9pZjgWvfrS0l9tVHs6k1jnQHpTLoA

4. Last worked on this Document:


a. Nov 26, 2022

—------------------

=======================================================================

1. Links:
a. https://selectorshub.com/
b. https://selectorshub.com/xpath-and-cssselector-functions/

=======================================================================

1. Features:
a. Driver command Feature
b. Multi XPath and POM
i. Page Object Model
c. Shadow DOM
d. iFrame
e. SVG Elements
f. Error handling
g. Convert XPath into CSS selector

—------------------

-------------------------------------------------------------------------------------------------------------------------------

2
-----------------------------------------
========1_Introduction to SelectorsHub & Installation==========
-----------------------------------------

1. SelectorsHub:
a. It is a Browser Extension.
b. Helpful to write, update, verify and generate the Locators.
c. Advanced features:
i. Nested iframes
ii. Shadow elements
iii. SVG elements
iv. Context menu support
v. Smart Editor
vi. Error handling
2. Except for the Safari browser,
a. Just add it as an Extension
b. Restart the Browser
c. Start using it.

—--------------------

1.

—------------------
-------------------------------------------------------------------------------------------------------------------------------

3
—------------------

2.

3.

—------------------

-------------------------------------------------------------------------------------------------------------------------------

4
-----------------------------------------
========2_SelectorsHub Incredible Innovative Features==========
-----------------------------------------

1. Smart Editor (Automatically generated suggestions)


a. XPath

b. CSS:

-------------------------------------------------------------------------------------------------------------------------------

5
—------------------

c. XPath axes:

----------------------------------------------------------------------
1. Save XPaths for future use:
a. Max -> 10 Locators can be saved.

b.

c.

—------------------

-------------------------------------------------------------------------------------------------------------------------------

6
—------------------

d.

----------------------------------------------------------------------
2. Smart Editor (Toggle)
a. You can turn it on/off
----------------------------------------------------------------------
3. Case insensitive Selectors

a.
----------------------------------------------------------------------
4. Attribute Filter feature:

a.
b. First preference will be the User provided value, then, it will go
i. Text -> id -> class -> name -> placeholder (must be Enabled)

-------------------------------------------------------------------------------------------------------------------------------

7
—------------------
5. Driver command Feature:

a.

b.

c.

—------------------

-------------------------------------------------------------------------------------------------------------------------------

8
—------------------
6. Multi XPath and POM
a. Get the XPath for all required elements in single shot

b.
—------------------

c.

—------------------

-------------------------------------------------------------------------------------------------------------------------------

9
—------------------

d. All the Locators are captured

—------------------

e. Copy all the XPaths in one shot:

—------------------
f. You can even export it as well

—------------------

-------------------------------------------------------------------------------------------------------------------------------

10
—------------------
g. Page Object Model

Copied content:

@FindBy(xpath="//body") private WebElement home


@FindBy(xpath="//a[normalize-space()='Certificate']") private WebElement certificate
@FindBy(xpath="//a[normalize-space()='Blogs/Videos']") private WebElement blogs/Videos
@FindBy(xpath="//a[normalize-space()='Sponsors']") private WebElement sponsors
@FindBy(xpath="//a[normalize-space()='More']") private WebElement more

NOTE: These names are automatically generated by SelectorHub


—------------------

7. Debugger

a.
b. Click on the Debugger -> do the operation (click/mouse hover/fill data) on
web page -> It will pause the screen after 5 seconds

—------------------

-------------------------------------------------------------------------------------------------------------------------------

11
—------------------

c.
—------------------

8. Double Quotes feature

a.

b.

-------------------------------------------------------------------------------------------------------------------------------

12
—------------------

c.
----------------------------------------------------------------------
9. Expand view::

a.
----------------------------------------------------------------------
10. Default settings:

a.
----------------------------------------------------------------------
11. Shadow DOM:
a. XPath does not support this; you have to go with the cssSelector
b. SelectorsHub will give the script; you simply need to copy it and proceed

c.

-------------------------------------------------------------------------------------------------------------------------------

13
—------------------

d.
e. Nested Shadow:

-------------------------------------------------------------------------------------------------------------------------------

14
—------------------
12. iFrame

a.
b. SelectorsHub only tells us that this element is in iFrame

c.

—------------------

-------------------------------------------------------------------------------------------------------------------------------

15
—------------------
d. Nested iFrames:

e. //This element is inside 2 nested frames.


XPath frame1 = //iframe[@src='MultipleFrames.html'];
XPath frame2 = //iframe[normalize-space()='<p>Your browser does not support
iframes.</p>'];
XPath inspectedElement = //input[@type='text'];
----------------------------------------------------------------------
13. SVG Elements

a.

b. XPath will have this pattern for SVG elements :

-------------------------------------------------------------------------------------------------------------------------------

16
—------------------
14. Error handling

a.

b.

c.

d.
e.
—------------------

15. Context Menu - Right click


a. You can customize the Context menu as well

-------------------------------------------------------------------------------------------------------------------------------

17
b.
—------------------

16. Convert XPath into cssSelector


a. Even if you give a full XPath of an element, SelectorsHub will give you the best

—------------------

-------------------------------------------------------------------------------------------------------------------------------

18
-----------------------------------------
========3_Why SelectorsHub?==========
-----------------------------------------

-----------------------------------------
========4_SelectorsHub for Safari==========
-----------------------------------------

-----------------------------------------
========5_SelectorsHub Certification==========
-----------------------------------------

=======================================================================

=======================================================================

-------------------------------------------------------------------------------------------------------------------------------

19
1. Documents

a. Github repository: https://github.com/rajatt95/Documents

b. Google Drive:
https://drive.google.com/drive/folders/1tne9pZjgWvfrS0l9tVHs6k1jnQHpTLoA

2. To connect

a.
=======================================================================

=======================================================================

-------------------------------------------------------------------------------------------------------------------------------

20

You might also like