Selenium with Javascript – WebElements, Tags, Attributes

by

WebElements, Tags, Attributes

We are going to discuss about WebElements, Tags, Attributes in this session.

WebElements

Let’s talk about the WebElement first.

If suppose, we have to login to our email or any eCommerce Website, then we need to enter username and password in the respective fields and then, we need to click on the login button. So, this username and password field and login button are nothing but WebElements.

There are many types of WebElements for a Website, but we will talk about only the important ones.

Type of WebElements

  1. Paragraph
  2. Button
  3. Link
  4. Input Field
  5. Text Area
  6. checkbox
  7. Dropdown
  8. radio button
  9. Image
  10. Heading

So, every WebElement will have 2 types of Attributes.

  1. Mandatory Attributes
  2. Optional Attribute

Mandatory Attributes are also called Tags. So, Let’s talk about Tags first.

Tags

Now, Let’s talk about Tags. As we have already seen that there are many types of WebElements like If you are in the market for superclone Replica Rolex , Super Clone Rolex is the place to go! The largest collection of fake Rolex watches online!

Type of WebElements.

  1. Paragraph
  2. Button
  3. Link
  4. Input Field
  5. Text Area
  6. checkbox
  7. Dropdown
  8. radio button
  9. Image
  10. Heading

Now, If we want to know, which element is a dropdown, which element is Button, which element is Link, which element is input Field. Then we need to take help of tags.

So, the tags is a type of attributes, which helps us in identifying the type of element. Tags give identity to an element. This is a reason, tags are called Mandatory Attributes of an Element.

Now, Let’s see that what is a tag for an Element

Type of Tags

  1. Paragraph – p
  2. Button – button
  3. Link – a
  4. Input Field – input
  5. Text Area – textarea
  6. checkbox – input
  7. Dropdown – Select
  8. radio button – input
  9. Image – img
  10. Heading – h1, h2, h3, h4, h5, h6

You would have noticed, that there are some WebElements with same tag name like Input field, checkbox, and radio button have same tag name i.e input, So how can we differentiate between them. We will see that, when we will discuss attributes of the WebElement.

How can we get the tag for an Element in a Website, So, Let’s see this in a Website. Inspect any element in the website, and that’s it, We can get the tag of that Web Element.

So, In our examples, We had seen that

Syntax for Tags

paragraphs were written like this <p> </p>
buttons were written like this <button> </button>
Link was written like this <a> </a>
Input field was written like this <input> </input>
Dropdown was written like this <select> </select>
Image was written like this <img> </img>
Heading was written like this <h1> </h1>, <h2> </h2>

So, these greater than and less than signs called html tags. so, tags are always written inside html tags.

There are 2 types of html tags

  • Opening tag – Start tag
  • Closing tag – End tag

So, tags will always be written inside opening tag and closing tag

Opening tag is written like – <p>, <button>, <a>, <input>, <select>
Closing tag is written like – </p>, </button>, </a>, </input>, </select>

So, this is it about Tags.

Now, Lets talk about Attributes.

Attributes

Attributes are called, Optional Attributes as well. Attributes provides extra information about the WebElement. Attributes are always written inside the opening tags. A WebElement can have multiple Attributes.

Attributes are made up of 2 parts

  1. Name of the Attributes – Case Insensitive
  2. Value of the Attributes – Case Insensitive

Type of Attributes

  1. id
  2. name
  3. class
  4. type
  5. href
  • id is the name of the attribute and there will be some value associated with that.
  • name is the name of the attribute and there will be some value associated with that.
  • class is the name of the attribute and there will be some value associated with that.
  • type is the name of the attribute and there will be some value associated with that.
  • href is the name of the attribute and there will be some value associated with that.

Now, Let’s see this in the website.

Syntax for Attrbibutes

As we know that the attributes are always written inside the opening html tag of the tag. So, the syntax for the attributes could be like this.

  1. <a href=”https://qpdemoecommerce.com/index.php/product/air-max-training-shoes/” class=”ast-loop-product__link”>

How to find out the attribute for an Element – If you want to find out the attribute for an Element, then you need to inspect Element, and then you will be able to find out the attribute for that Element.

Importance of tags and attributes

Now, the question comes, why should we read about tags and attributes of an element, and the answer is, “in order to locate an element in our test automation, we need to know about tags and attributes of an element.”

Sometimes, the common locators like, id, className, name, doesn’t work and it becomes difficult to locate an element using these locators, So, We should use xpath and cssSelector to locate the element, and if we know about tags and attribute of an element, then we can easily write xpath and cssSelector.

Summary

We have covered below topics in this session

  1. WebElements
  2. Type of WebElements
  3. Tags
  4. Type of Tags
  5. Syntax for Tags
  6. Attributes
  7. Type of Attributes
  8. Syntax for Attrbibutes
  9. Importance of tags and attributes

Leave a Comment