Selenium WebDriver-CSS Selector: Substring Matching

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 ($)

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.	[email protected]	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.

• And give your Class name as Sub_string and click on the Finish button.

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.

//SystemPropertyforchromeDriver 
System.setProperty("webdriver.chrome.driver","C:\\Users\\JTP\\Downloads\\chromedriver_win32\\chromedriver.exe");
//create an object forChrome Driver
WebDriverdriver=newChromeDriver(); 

Step2:

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

The sample code for the navigation of the desired URL:

//navigate to the URL
driver.get(“https://mail.rediff.com/cgi-bin/login.cgi”); 

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.

• The developer tool window will be launched, with all the specific codes used in the development of the username text box.

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,

driver.findElement(By.cssSelector("input[id*='logi']")).sendKeys("admin");        

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.

• The developer tool window will be launched with all the specific codes used in the development of the password text box.

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,

driver.findElement(By.cssSelector("input[id*='passwo]")).sendKeys("admin");

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.

• The developer tool window will be launched with all the specific codes used in the development of the Go button.

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,

driver.findElement(By.cssSelector("input[name*='proc']")).click();

Step6:

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

//Close the browser
driver.close();

Our final test script look like this:

package testpackage;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class Sub_string {
public static void main(String[] args) {
//set the system property for chrome driver
System.setPropert("webdriver.chrome.driver", "C:\\Users\\JTP\\Downloads\\chromedriver_win32\\chromedriver.exe");
//creating the object for chrome driver 
WebDriver driver = new ChromeDriver();
//maximize the browser size 
driver.manage().window().maximize(); 
//navigate to the URL
driver.get("https://mail.rediff.com/cgi-bin/login.cgi");
//Identify the username textbox and pass the value
driver.findElement(By.cssSelector("input[id*='logi']")). sendKeys("[email protected]");
System.out.println("username value is entered");
//Identify the password text box and pass the value
driver.findElement(By.cssSelector("input[id*='passwo']")).sendKeys("admin");
System.out.println("password value is entered");
//identify the go button
driver.findElement(By.cssSelector("input[name*='proc']")).click();
System.out.println("go button is cliked");
//close the browser
driver.close();
} 
} 

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:

Starts with (^):

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

The Syntax of starts-with:

Tagname[attribute^ =’Attribute starting value’]

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:

//navigate to the URL
driver.get(“https://www.facebook.com”); 

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.

• The developer tool window will be launched with all the specific codes used in the development of the First-name text box.

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,

driver.findElement(By.cssSelector("input[name^='first']")).sendKeys("hello"); 

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.

• The developer tool window will be launched with all the specific codes used in the development of the surname text box.

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,

driver.findElement(By.cssSelector("input[name^='last']")).sendKeys("world");

Step5:

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

//Close the browser
driver.close(); 

Our final test script look like this:

package testpackage;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class Sub_string {
public static void main(String[] args) throws InterruptedException {
//set the system property for chrome driver
System.setProperty("webdriver.chrome.driver", "C:\\Users\\JTP\\Downloads\\chromedriver_win32\\chromedriver.exe");
//creating the object for chrome driver 
WebDriver driver = new ChromeDriver();
//maximize the browser size 
driver.manage().window().maximize(); 
//navigate to the url 
driver.get("https://www.facebook.com");
//Identify the first name textbox and pass the value
driver.findElement(By.cssSelector("input[name^='first']")).sendKeys("hello");
Thread.sleep(3000);
System.out.println("firstname value is 
entered");  
//Identify the surname text box and pass the value
driver.findElement(By.cssSelector("input[name^='last']")).sendKeys("world");
Thread.sleep(3000);
System.out.println("surname value is 
entered");  
//close the browser
driver.close();
} 
}

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:

Ends with ($):

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

The Syntax for ends with:

Tagname[attribute$ =’value’]

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:

//navigate to the URL
driver.get(“https://www.google.com”); 

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.

• The developer tool window will be launched with all the specific codes used in the development of the Google search text box.

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,

driver.findElement(By.cssSelector("input[class$='fi']")).sendKeys("tutorialandexample.com"); 

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.

• The developer tool window will be launched with all the specific codes used in the development of the Google search button.

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,

driver.findElement(By.cssSelector("input[name$='nK']")).click();

Step5:

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

//Close the browser
driver.close(); 

Our final test script look like this:

package testpackage;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class Sub_string {
public static void main(String[] args) throws InterruptedException {
//set the system property for chrome driver
System.setProperty("webdriver.chrome.driver", "C:\\Users\\JTP\\Downloads\\chromedriver_win32\\chromedriver.exe");
//creating the object for chrome driver 
WebDriver driver = new ChromeDriver();
//maximize the browser size 
driver.manage().window().maximize(); 
//navigate to the url 
driver.get("https://www.google.com"); 
//Identify the google search text box and pass the value
driver.findElement(By.cssSelector("input[class$='fi']")).sendKeys("tutorialandexample.com");
Thread.sleep(3000);
System.out.println(" the value is passed"); 
//Identify and click on the Google search button 
driver.findElement(By.cssSelector("input[name$='nK']")).click();
Thread.sleep(3000);
System.out.println(" search button is clicked ");  
//close the browser
driver.close();
} 
} 

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,