CSS Selector: Sub String in Selenium IDE

CSS Selector: Sub String

CSS Selector Sub-string is used to match a partial string to locate a particular web element.

  • There are three ways to match a substring using a CSS Selector.
  • Match a prefix
  • Match a suffix
  • Match a substring

Now we will discuss each of them in details with an example,

MATCH A PREFIX:

  • It will access a particular string using a ‘match a prefix’.

Syntax of Prefix:

css= [HTML tag]{[attribute^=prefix of the string]}.

[^]: It is a symbolic notation to match a string using a prefix.

A prefix of the string: matching operation performed based on a string.

  • For example, we will define the CSS Selector for the Email text box of a Facebook login page as css=input#email[name^='em']
CSS SELECTOR SUB STRING
  • Click on the Find button to verify whether the defined CSS Selector locates the desired element or not.
CSS SELECTOR SUB STRING 1

MATCH A SUFFIX:

  • It will access a particular string using a ‘match a suffix’.

Syntax of Suffix:

css= [HTML tag]{[attribute$=suffix of the string]}

     [$]: This is a symbolic notation to match a string using a suffix.

Suffix of the string: matching operation performed based on a string.

  • For example, we will define the CSS Selector for the Email text box of the Facebook login page.

css=input#email[name*='ail']

CSS SELECTOR SUB STRING 2
  • Click on the Find button to verify whether the defined CSS Selector locates the desired element or not.
CSS SELECTOR SUB STRING 3

 MATCH A SUBSTRING:

  • It will access a particular string using a ‘match a substring’.

Syntax of substring:

css=<[attribute*=sub string]>

[*]:It is Symbolic notation to match a string using substring.

Substring: matching operation is performed based on a string

  • For example, we will define the CSS Selector for the Email text box of the Facebook login page as css=input#email[name*='ail']
CSS SELECTOR SUB STRING 4
  • Click on the Find button to verify whether the defined CSS Selector locates the desired element or not.
CSS SELECTOR SUB STRING 5