HomeSelenium

Selenium Locators – Using disabled, enabled and checked in CSS Selectors

Selenium Locators – Using disabled, enabled and checked in CSS Selectors

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

In the previous article, I have practically demonstrated using the following sibling (+) in the CSS Selectors.

In this article, I am going to explain the usage of disabled, enabled and checked in CSS Selectors.

Let’s get started.

Selenium Locators – Using disabled, enabled and checked in CSS Selectors

Follow the below steps to practice using the disabled, enabled and checked in CSS Selectors:

1) Open http://omayo.blogspot.com/ in Chrome Browser, where ChroPath is already installed (Refer ChroPath installation in Chrome Browser here and its usage in Chrome Browser here ) as shown below:

Relative XPath - More complex application

 

2) Open ‘ChroPath’ functionality as shown below in the Chrome Browser:

Relative XPath - ChroPath

 

 

3) Select ‘CSS Sel’ option from the ‘Selectors’ dropdown as shown below:

Relative CSS Selectors - CSS Sel

4) Let’s locate any tag (i.e. UI element) which is in a disabled state on the page using the below CSS Selector:

*:disabled

Note: * in the above CSS Selector stands for any tag

Let’s execute the above CSS Selector in the ChroPath and observe that all the UI elements on the page in the disabled state got located as shown below:

CSS Selectors - disabled

5) Let’s locate any tag (i.e. UI element) which is in an enabled state on the page using the below CSS Selector:

*:enabled

Note: * in the above CSS Selector stands for any tag

Let’s execute the above CSS Selector in the ChroPath and observe that all the UI elements on the page in the enabled state got located as shown below:

CSS Selectors - enabled

6) Let’s locate any tag (i.e. Radio buttons or Checkbox options on the page) which are in selected state using the below CSS Selector:

*:checked

Note: * in the above CSS Selector stands for any tag

Let’s execute the above CSS Selector in the ChroPath and observe that all the Radio buttons and checkbox options on the page in the selected state got located as shown below:

CSS Selectors - selected

Here concludes this article on using disabled, enabled and checked in CSS Selectors.

In the next article, I will explain why XPath Expressions are more powerful than CSS Selectors.

Next Steps:

  • > To learn more about Selenium, continue to the next post (Click on Next Post link below)
  • > Check complete Selenium Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning 🙂

About Me > Arun Motoori

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

If you like this article, share it on LinkedIn using the below button:

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *