HomeSelenium

Selenium Locators – Using not in CSS Selectors

Selenium Locators – Using not in CSS Selectors

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

In the previous article, I have practically demonstrated using Starts With (^), Ends With ($) and Contains (*) in the CSS Selectors.

In this article, I am going to practically demonstrate using not in CSS Selectors.

Let’s get started.

Selenium Locators – Using not in CSS Selectors

Follow the below steps to practice using not in CSS Selectors:

1) Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Chrome Browser, where ChroPath is already installed (Refer ChroPath installation in Chrome Browser here and usage in Chrome Browser here ) as shown below:

I have taken a very basic Web Application for demonstration as shown in the below screenshot to make your learning easy:

Absolute XPath - Opening Basic Application

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

Absolute XPath - Open ChroPath

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

Relative CSS Selectors - CSS Sel

4) Expand all the tags on the left side (i.e. <head> and <body> tags) as shown below:

Relative CSS Selectors - expand tags

5) Let’s locate the p tag having the id attribute value as ‘para1’ and class attribute value as ‘main’ using the CSS Selectors as shown below:

p[id=’para1′][class=’main’]

The above CSS Selector will locate the paragraph tag having id=’para1′ and class=’main’.

Both the id attribute value and class attribute value in the above CSS Selector should match with the UI element properties, then only the UI element will be located.

Let’s execute the above CSS Selector in the ChroPath and observe that the p tag having both id attribute value as ‘para1’ and class attribute value as ‘main’ got located as shown below:

CSS Selectors - p id class

6) Now, Let’s locate the p tag having the id attribute value as ‘para2’ and class attribute value as ‘sub’ using the CSS Selectors as shown below:

p[id=’para2′][class=’sub’]

The above CSS Selector will locate the paragraph tag having id=’para2′ and class=’sub’.

Both the id attribute value and class attribute value in the above CSS Selector should match with the UI element properties, then only the UI element will be located.

Let’s execute the above CSS Selector in the ChroPath and observe that the p tag having both id attribute value as ‘para2’ and class attribute value as ‘sub’ got located as shown below:

CSS Selectors - p id class sub

7) Now, let’s use the not in the above CSS Selectors.

Let start by locating all the p tags on this page, other than the p tags having id attribute value as ‘para1’ by using the below CSS Selector:

p:not([id=’para1′])

Let’s execute the above CSS Selector in the ChroPath and observe that all the p tag on the page other than the ones having id=’para1′ got located as shown below:

CSS Selectors - no p id para1

8) Let’s locate the p tags in the page, which don’t have id as ‘para2’ and has the class attribute value as ‘main’ using the CSS Selectors as shown below:

The below CSS Selector will locate the p tags on the page which don’t have the id attribute value as ‘para2’

p:not([id=’para2′])

To the above CS Selector, we need to append [class=’main’] to locate the p tags on the page that have the class attribute value as ‘main’ and at the same time which don’t have the id as ‘para2’. Following is the required CSS Selector:

p:not([id=’para2′])[class=’main’]

Let’s execute the above CSS Selector in the ChroPath and observe that all the p tag on the page having the class attribute value as ‘main’ and not having the id attribute value as ‘para2’ got located as shown below:

CSS Selectors - p class main not id para2

9) Let’s locate the p tags in the page, which don’t have id as ‘para1’ and don’t have the class attribute value as ‘main’ using the CSS Selectors as shown below:

The below CSS Selector will locate the p tags on the page which don’t have the id attribute value as ‘para2’

p:not([id=’para1′])

To the above CS Selector, we need to append :not([class=’main’]) to locate the p tags on the page that don’t have the class attribute value as ‘main’ and at the same time which don’t have the id as ‘para1’. Following is the required CSS Selector:

p:not([id=’para1′]):not([class=’main’])

Let’s execute the above CSS Selector in the ChroPath and observe that all the p tag on the page not having the class attribute value as ‘main’ and not having the id attribute value as ‘para1’ got located as shown below:

CSS Selectors - p not class main not id para1

Here concludes this article on using not in CSS Selectors.

In the next article, I will practically demonstrate locating sibling tags in 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 *