363. Using [attribute] to select all the element containing the specified attribute

We can locate the elements which contain attributes like id and class by using [attribute] in CSS path.

Example:

[id]  -> Locates all the elements containing the id attribute
p[id] -> Locates all the paragraph elements containing the id attribute
[class]  -> Locates all the elements containing the class attribute
p[class]  -> Locates all the paragraph elements containing the class attribute

Lets Implement This:

Locate all the elements on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the id attribute by following the below steps:

1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path [id] into the text box as shown below and click on 'Eval' button:

3. Observe that all the elements containing the id attribute got highlighted on the page as shown below:

Now lets locate all the paragraph elements on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the id attribute by following the below steps:

1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path p[id] into the text box as shown below and click on 'Eval' button:

3. Observe that all the paragraph elements containing the id attribute got highlighted on the page as shown below:

Now lets locate all the elements on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the class attribute by following the below steps:

1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path [class] into the text box as shown below and click on 'Eval' button:

3. Observe that all the elements containing the class attribute got highlighted on the page as shown below:

Now lets locate all the paragraph elements on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the class attribute by following the below steps:

1. Open http://compendiumdev.co.uk/selenium/basic_web_page.html in Firefox Browser
2. Click on the 'Firepath' tab, select the CSS option, enter the CSS path p[class] into the text box as shown below and click on 'Eval' button:

3. Observe that all the paragraph elements containing the class attribute got highlighted on the page as shown below:

So using [attribute] notation in CSS path, we can locate all the elements on the page containing the specified attribute.

Please comment below to feedback or ask questions.

Locating first child, last child and nth child with CSS path will be explained in the next post.