CSS Selector: Substring Matching Selenium WebDriver

In this tutorial, we will learn how to identify the web element using the substring method.

A Sub-string contains three methods for identifying the web element uniquely.

The sub-string methods are as follows:-

  • Contains (*)
  • Starts with (^)
  • Ends with ($)
Selector Substring Matching

Let us discuss these following method to give you a complete understanding:

Contains (*):

The Contains method is used to identify the web element using * (i.e., asterisk) symbol.

The Syntax of contains method:

Tagname[attribute*=’partial Attribute value’]

Where,

 [*]=the asterisk symbol is used to identify that the particular attribute contains any value or not.

Let us take one example to give you a better understanding of Contains() method using * symbol, and we created a sample test script which is as follows;

Steps Actions Input Expected Result
1. Open the Google Chrome browser.   The Google Chrome browser should be opened.
2. Navigate to the Rediff login page. https://mail.rediff.com/cgi-bin/login.cgi The Rediff login page must be displayed.
3. Identify the username text box and pass the value. xyz11@radiff.com The username text box should be identified, and the value should be entered.
4. Identify the password text box and pass the value. admin@12 The Password text box should be identified, and the value should be entered.
5. Identify and click on the go button.   The go button should be clicked.
6. Close the browser.   The browser should be closed.
  • Firstly, we have to Launch Eclipse and open the existing test suite new_test, which we have created in earlier session of the WebDriver tutorial.
  • Then, right-click on the new_test folder and create a new Class File from New à Class.
Selector Substring Matching 1
  • And give your Class name as Sub_string and click on the Finish button.
Selector Substring Matching 2

Step1:

  • To access the Google Chrome browser first, we need to download the chrome driver and set the system property for the chrome driver.
  • We have already discussed this in the previous sessions of the tutorial.
  •  And you can also refer to the given link “Working with Chrome browser” for a better understanding that how we downloaded it and set the System property for it.

Step2:

  • After that, we will navigate to the given URL.

The sample code for the navigation of the desired URL:

Step3:

 For locating the username text box of the Rediff login page,

  • First, right-click on the username text box and select the Inspect Element.
Selector Substring Matching 3
  • The developer tool window will be launched, with all the specific codes used in the development of the username text box.
Selector Substring Matching 4

Where the tag name value is input, and the value of its id attribute is login1.

While using the Contains() method, we will take the partial value of the id attribute, i.e.,“logi.”               

Here the sample code,

Step4:

For locating the password text box of the Rediff login page,

  • Right-click on the password text box, and select the Inspect Element field.
Selector Substring Matching 5
  • The developer tool window will be launched with all the specific codes used in the development of the password text box.
Selector Substring Matching 6

Where the tag name value is input, and the value of its id attribute is password.

While using the Contains() method,we will take the partial value of the id attribute, i.e., “passwo.”

Here the sample code,

Step5:

To identify the Go button of the Rediff login page,

  • First, we will right-click on the Go button and select the Inspect Element.
Selector Substring Matching 7
  • The developer tool window will be launched with all the specific codes used in the development of the Go button.
Selector Substring Matching 8

Where the tag name value is input, and the value of its name attribute is proceed.

While using the Contains() method,we will take the partial value of its name attribute, i.e., “proc.”

Here the sample code,

Step6:

 In the last step, we are closing the existing browser.

Our final test script look like this:

To run the test script in Eclipse, right-click on the code and then select Run as Java Application.

The above test script will launch the Google Chrome browser and automate all the test scenarios, as shown below:

Selector Substring Matching 9

Starts with (^):

The Starts-with is used to identify the web element using ^ (i.e., carat) symbol.

The Syntax of starts-with:

Where

 [^]=the carat symbol is used to identify the web element with its starting value.

Let us take one example to give you a better understanding of the starts-with method using ^ symbol, we created a sample test script which is as follows;

Steps Actions Input Expected Result
1. Open the Google Chrome browser.   The Google Chrome browser should be opened.
2. Navigate to the Facebook login page. https://www.facebook.com The Facebook login page must be displayed.
3. Identify the First-name text box and pass the value. First-name=Hello The First-name text box should be identified, and the value should be entered.
4. Identify the Surname text box and pass the value. Surename=world The Surname text box should be identified, and the value should be entered.
5. Close the browser.   The browser should be closed.

Follow the same Step1 as we did in the Contains() method.

Step2:

After that, we will navigate to the given URL.

The sample code for the navigation of the desired URL:

Step3:

 For locating the First-name text box of the Facebook login page,

  • First, right-click on the First-name text box and select the Inspect Element field.
Selector Substring Matching 10
  • The developer tool window will be launched with all the specific codes used in the development of the First-name text box.
Selector Substring Matching 11

Where the tag name value is input and the value of its name attribute is firstname.

While using the starts-with method, we will take the starting value of the name attribute, i.e., “first.” 

Here the sample code,

Step4:

For locating the surname text box of the Facebook login page,

  • Right-click on the surname text box and select the Inspect Element field.
Selector Substring Matching 12
  • The developer tool window will be launched with all the specific codes used in the development of the surname text box.
Selector Substring Matching 14

Where the tag name value is input and the value of its name attribute is lastname.

While using the starts-with method,we will take the starting value of the id attribute, i.e., “last.”

Here the sample code,

Step5:

 In the last step, we are closing the existing browser.

Our final test script look like this:

To run the test script in Eclipse, right-click on the code, and then select Run as Java Application.

The above test script will launch the Google Chrome browser, and automate all the test scenarios, as shown below:

Selector Substring Matching 15

Ends with ($):

The ends-with is used to identify the web element using $ (i.e., dollar) symbol.

The Syntax for ends with:

Where

[$]=the dollar symbol is used to identify the web element with its ending value.

To give you a better understanding of ends-with method using $ symbol, we created a sample test script which is as follows;

Steps Actions Input Expected Result
1. Open the Google Chrome browser.   The Google Chrome browser should be opened.
2. Navigate to the Google search home page. https://www.google.com The Google search home page must be displayed.
3. Identify the Google search text box and pass the value. Tutorialandexample.com The Google search text box should be identified, and the value should be entered.
4. Identify and click on the google search button.   The Google search button should be identified, and the button should be clicked.
5. Close the browser.   The browser should be closed.

Follow the same step1 of contains() method.

Step2:

  • After that, we will navigate to the given URL.

The sample code for the navigation of the desired URL:

Step3:

 For locating the Google search text box of the Google home page,

  • First, right-click on the Google search text box and select the Inspect Element field.
Selector Substring Matching 16
  • The developer tool window will be launched with all the specific codes used in the development of the Google search text box.
Selector Substring Matching 17

Where the tag name value is input, and the value of its class attribute is gLFyf gsfi.

While using the ends-with method, we will take the ending value of the class attribute, i.e., “fi.

Here the sample code,

Step4:

For locating the Google Search button of the Google home page,

  • Right-click on the Google search button and select the Inspect Element field.
Selector Substring Matching 18
  • The developer tool window will be launched with all the specific codes used in the development of the Google search button.
Selector Substring Matching 19

Where the tag name value is input, and the value of its name attribute is btnK.

While using the ends-with method,we will take the ending value of the name attribute, i.e.,“nK.”

Here the sample code,

Step5:

 In the last step, we are closing the existing browser.

Our final test script look like this:

To run the test script in Eclipse, right-click on the code and then select Run as Java Application.

The above test script will launch the Google Chrome browser and automate all the test scenarios, as shown below,

Selector Substring Matching 20

Pin It on Pinterest

Share This