Element Spotter – Tool to Identify Web Elements using Selenium

0
35

Introduction

Element Spotter is a small utility which will allow users to search for an element easily on Web browser.

Background

This utility uses JavaScript along with the Selenium to highlight elements from website. Also, it will fetch all the possible interactive elements from website. Further, we can generate POM of these elements using this utility.

This utility purely focuses to increase the speed of automation scripting.

Development is still in progress.

How to Use It

There are two sections for this utility.

Browser Launcher

This is used to launch a browser. We will be using browser launched through utility for further activities.

Dropdown has a list of browsers. Click on Launch button will open selected browser.

Element Spotter

  1. Identifier Dropdown – List of all selenium identifiers, i.e., ClassName, Id, LinkText, etc. Also some custom identifiers for angularJs are also listed.
  2. Value Text Box – Enter value for selected identifier here.
  3. Test Button – Click on this button will highlight element on browser resp to the selected identifier and value.
  4. Generate Button – Click on this button will list down all possible elements along with identifier and value.
  5. Element List Box – All elements from current web site are listed here after click on generate button.

Steps For Execution

  1. Open Utility.
  2. Select Firefox from dropdown and click on Launch button
  3. Firefox will be launched -> Navigate to facebook.com
  4. Go to “Element Spotter” tab
  5. In Identifier dropdown, Select identifier “Name”
  6. In Value Text box, Enter value firstname
  7. Click on “Test Button”
  8. First Name Text box will be highlighted. Refer to Screenshot 1
  9. Also, Selenium command is generated in Console Text box below
  10. Click on Generate button – Wait for a few seconds. Utility might go in Not Responding state but wait for some time
  11. In Element List box, all possible elements from web page will be generated
  12. Click on item in list box, it will be highlighted in web page if it’s not hidden. Refer to Screenshot 2
  13. Also in POM tab, POM for all elements will be generated

Screenshot 1

Screenshot 2

Notes

  1. Utility may go in not responding state for a few seconds.
  2. It’s not compatible with Internet Explorer and Chrome yet. Will be updating the latest version soon.
  3. Hidden elements and radio button cannot be highlighted.
  4. Upgrading utility to Selenium 3 soon.

LEAVE A REPLY