160
CSS Selector – Sub-string
It allows matching a partial string to locate a particular web element.
There are three mechanisms in which matching of a string can be done using a CSS Selector.
- Match a prefix
- Match a suffix
- Match a sub string
We will look at each mechanism in detail with an example.
1. Match a Prefix
- It allows us to access a particular string using a matching prefix.
- Syntax : css=<HTML tag><[attribute^=prefix of the string]>
- ^ – Symbolic notation to match a string using prefix.
- Prefix of the string – The string based on which match operation is performed.
- For example, we will define the CSS Selector for the “Password” text box of Test and Quiz login page as: css=input#password[name^=’pass’]
- Click on the “Find target in page” button to check whether the defined CSS Selector locates the desired element or not.
2. Match a Suffix
- It allows us to access a particular string using a matching suffix.
- Syntax: css=<HTML tag><[attribute$=suffix of the string]>
- $ – Symbolic notation to match a string using suffix.
- Suffix of the string – The string based on which match operation is performed.
- For example, we will define the CSS Selector for the “Password” text box of Test and Quiz login page as: css=input#password[name$=’ord’]
- Click on the “Find target in page” button to check whether the defined CSS Selector locates the desired element or not.
3. Match a sub string
- It allows us to access a particular string using a matching sub string.
- Syntax: css=<HTML tag><[attribute*=sub string]>
- * – Symbolic notation to match a string using sub string.
- Sub string – The string based on which match operation is performed.
- For example, we will define the CSS Selector for the “Password” text box of Test and Quiz login page as: css=input#password[name*=’word’]
- Click on the “Find target in page” button to check whether the defined CSS Selector locates the desired element or not.
Next TopicLocating by inner text