HomeSelenium

Selenium Locators – Using Following Sibling in CSS Selectors

Selenium Locators – Using Following Sibling in CSS Selectors

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

In the previous article, I have practically demonstrated the usage of not in CSS Selectors.

In this article, I am going to practically demonstrate the usage of the following sibling (+) in CSS Selectors.

Let’s get started.

Selenium Locators – Using the Following Sibling in CSS Selectors

Follow the below steps to practice using the following sibling (i.e. Plus Symbol: + ) 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 following sibling p tag of the p tag having the id attribute value as ‘para1’ using the CSS Selectors.

We can locate the p tag having the id attribute value as ‘para1’ using the below CSS Selector:

p[id=’para1′]

Now, append the following sibling plus symbol (i.e. +) to locate the p tag which is the following sibling to the above CSS Selector located p tag as shown below:

p[id=’para1′]+p

Let’s execute the above CSS Selector in the ChroPath and observe that the p tag which is the following sibling of p[id=’para1′] tag will be located as shown below:

CSS Selectors - following sibling p tag

6) Let’s locate the following sibling (i.e. any tag)  of the head tag using the CSS Selectors.

We can locate the head tag using the below CSS Selector:

head

Now, append the following sibling plus symbol (i.e. +) to locate any tag which is the following sibling to the above CSS Selector located head tag as shown below:

head+*

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

Let’s execute the above CSS Selector in the ChroPath and observe that the body tag which is the following sibling of head tag will be located as shown below:

CSS Selectors - following sibling head

7) Let’s locate the following sibling (i.e. any tag)  of the title tag using the CSS Selectors.

We can locate the title tag using the below CSS Selector:

title

Now, append the following sibling plus symbol (i.e. +) to locate any tag which is the following sibling to the above CSS Selector located title tag as shown below:

title+*

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

Let’s execute the above CSS Selector in the ChroPath and observe that the script tag which is the following sibling of title tag will be located as shown below:

CSS Selectors - following sibling title script tag

Here concludes this article on using following sibling + in CSS Selectors.

In the next article, I will practically demonstrate locating disabled, enabled, selected UI elements using 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 *