CSS Selector: ID in Selenium IDE

CSS Selector: ID

The id attribute is used to identify the web element uniquely in the web pages.

Syntax of ID Attribute: 

[HTML tag][#][Value of ID attribute]

The hash sign (#): it is mandatory while using the ID attribute to create a CSS Selector.

Always remember that the prefix with ‘css=’ is usedto specify a CSS Selector in the target text box of Selenium IDE.

We will take an example of Email text box present in login form at facbook.com

  • The email text box has an id attribute whose value defined as an id=email.
  • ID attribute and value can be used to create a CSS Selector to access the email textbox.
  • Launch the Firefox browser.
  • And type https://www.facebook.com in Google search box; it will redirect you to the Facebook login page.
  • When we are inspecting the web element of an email text box, and its html tag value is input, and the value of id attribute is email.
CSS Selector ID

To verify the locator:

  • Open the Test Script Editor Box in Selenium –IDE and click on the command text box.
  • And write command as:

Command =verify element present

Value = css=input#Email

CSS Selector ID 1
  •  Click on the Find button.
  • To verify that the value of a locator is correct or not, you can also check in the browser that the Email Text box is highlighted or not.
CSS Selector ID 2