We can use the combination of attributes in CSS selector statements to make the CSS more specific.
Using the combination of attributes in CSS statements will be explained in the below steps:
1. Open http://book.theautomatedtester.co.uk/chapter1 in Firefox Browser
2. Select HTML tab in FireBug options as shown below:
3. Right click on the 'Check box' option and select 'Inspect Element with FireBug' as shown below:
4. Ensure that the html code related to the Inspected Check box option got high lighted under the HTML tab as shown below:
5. Observe that the high lighted Check Box html code has two attributes, i.e. type and name as shown below:
6. So now lets use both the attributes in CSS selector Statement to locate the check box option of the page by following the next steps.
7. Select 'Firepath' tab, select 'CSS' option and enter the CSS Statement input[type='checkbox'][name='selected(1234)'] as shown below and click on 'Eval' button:
8. Observe that the check box option is high lighted on the page as shown below:
So to conclude we have used multiple conditions in CSS statement to use more than one attributes.
When to use more than one attributes in CSS Statements?
Case 1:
There may be cases where the elements cant be located using the single attribute, then we have to use more than one attributes in the CSS statements to identify the elements.
Case 2:
And also we can use more than one attributes in the CSS Statements even if the element can be located using a single attribute. By doing this our confidence on the CSS selector Statement in locating the elements increases. The more the attributes in CSS selector Statements, the more confident we will be that the CSS selector Statement will locate the elements without failure.
Please comment below to feedback or ask questions.
CSS selector Optimization Strategy Three - Use Relative CSS Statements instead of Absolute CSS Statements will be explained in the next post.
