In CSS Selector, we can use [attribute='value'] to locate the elements by the specified attributes.
Examples:
p[id='para1'] -> Locates the paragraph element which has the attribute id value as 'para1'
p[class='sub'] -> Locates the paragraph element which has the attribute class value as 'sub'
[id='para1'] -> Locates the element which has the attribute id value as 'para1'
[class='sub'] -> Locates the element which has the attribute class value as 'sub'
Lets Implement This:
Locate the paragraph text element on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the id attribute value as 'para1' 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='para1'] into the text box as shown below and click on 'Eval' button:
3. Observe that the paragraph text element containing the specified id value is highlighted on the page as shown below:
Now lets locate the element on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the id attribute value as 'para1' 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='para1'] into the text box as shown below and click on 'Eval' button:
3. Observe that the element containing the specified id value is highlighted on the page as shown below:
Now lets locate the paragraph element on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the class attribute value as 'sub' 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='sub'] into the text box as shown below and click on 'Eval' button:
3. Observe that the paragraph text element containing the specified class value is highlighted on the page as shown below:
Now lets locate the element on the http://compendiumdev.co.uk/selenium/basic_web_page.html containing the class attribute value as 'sub' 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='sub'] into the text box as shown below and click on 'Eval' button:
3. Observe that the element containing the specified class value is highlighted on the page as shown below:
By using [attribute='value'] in CSS path, we have located the elements having the specified attributes.
Please comment below to feedback or ask questions.
Using dot in CSS path to select an element with a specified class will be explained in the next post.
Using dot in CSS path to select an element with a specified class will be explained in the next post.
