Locating Strategies- (By CSS- Sub-String Matches)

In this section, you will learn how to locate a particular web element using CSS - Sub-String Matches Technique.

WebDriver provides an interesting feature of allowing partial string matches using ^, $ and*.

1. Starts with (^):

To select and locate a web element, we would use ^ which means 'starts with'.

Follow the steps given below to locate the Textbox using partial string matching technique.

• Open URL: https://www.testandquiz.com/selenium/testing.html
• Right click on the Textbox on the sample web page and select Inspect Element

• It will launch a window containing all the specific codes involved in the development of the Text box.

• Take a note of its tag and id attribute.

The Java Syntax for locating a web element through CSS - Sub-String Matches Technique using ^ operator is written as:

driver.findElement(By.cssSelector("Tag[attribute^=prefix of the string]"))

Therefore, for locating the Text box on the sample web page we will use the input tag along with the id attribute:

driver.findElement(By.cssSelector("input[id^='fna']"))

Similarly, for locating the Submit button on the sample web page we will use the button tag along with the id attribute:

driver.findElement(By.cssSelector("button[id^='idOf']"))

We have created a sample script for you to get a better understanding of how to locate a web element through CSS - Sub-String Matches Technique using ^ operator.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class SampleFive {

	public static void main(String[] args) {
		
        // System Property for Chrome Driver 
		System.setProperty("webdriver.chrome.driver","D:\\ChromeDriver\\chromedriver.exe");

      	// Instantiate a ChromeDriver class. 	
		WebDriver driver=new ChromeDriver();

      	// Launch Website
		driver.navigate().to("https://www.testandquiz.com/selenium/testing.html"); 

	// Click on the textbox and send value
		driver.findElement(By.cssSelector("input[id^='fna']")).sendKeys("JavaTpoint JMeter Tutorial");
			 
	// Click on the Submit button using click() command
	driver.findElement(By.cssSelector("button[id^='idOf']")).click();
		
	// Close the Browser
        driver.close();
		 

	}

}

2. Ends with ($):

To select and locate a web element, we would use $ which means 'ends with'.

Follow the steps given below to locate the Textbox using partial string matching technique.

• Open URL: https://www.testandquiz.com/selenium/testing.html
• Right click on the Textbox on the sample web page and select Inspect Element

• It will launch a window containing all the specific codes involved in the development of the Text box.

• Take a note of its tag and id attribute.

The Java Syntax for locating a web element through CSS - Sub-String Matches Technique using $ operator is written as:

driver.findElement(By.cssSelector("Tag[attribute$=suffix of the string]"))

Therefore, for locating the Text box on the sample web page we will use the input tag along with the id attribute:

driver.findElement(By.cssSelector("input[id$='me']"))

Similarly, for locating the Submit button on the sample web page we will use the button tag along with the id attribute:

driver.findElement(By.cssSelector("button[id$='on']"))

We have created a sample script for you to get a better understanding of how to locate a web element through CSS - Sub-String Matches Technique using $ operator.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class SampleSix {

	public static void main(String[] args) {
		
        // System Property for Chrome Driver 
		System.setProperty("webdriver.chrome.driver","D:\\ChromeDriver\\chromedriver.exe");

      	// Instantiate a ChromeDriver class. 	
		WebDriver driver=new ChromeDriver();

      	// Launch Website
		driver.navigate().to("https://www.testandquiz.com/selenium/testing.html"); 

	// Click on the textbox and send value
		driver.findElement(By.cssSelector("input[id$='me']")).sendKeys("JavaTpoint Data Structure Tutorial");
			 
	// Click on the Submit button using click() command
	driver.findElement(By.cssSelector("button[id$='on']")).click();
		
	//  Close the Browser
        driver.close();
		 

	}

}

3. Contains (*):<

To select and locate a web element, we would use * which means 'sub-string'.

Follow the steps given below to locate the Textbox using partial string matching technique.

• Open URL: https://www.testandquiz.com/selenium/testing.html
• Right click on the Textbox on the sample web page and select Inspect Element

• It will launch a window containing all the specific codes involved in the development of the Text box.

• Take a note of its tag and id attribute.

The Java Syntax for locating a web element through CSS - Sub-String Matches Technique using * operator is written as:

driver.findElement(By.cssSelector("Tag[attribute*=sub-string]"))

Therefore, for locating the Text box on the sample web page we will use the input tag along with the id attribute:

driver.findElement(By.cssSelector("input[id*='id']"))

We can also use 'contains()' in place of * operator

driver.findElement(By.cssSelector("input:contains('id')"))

We have created a sample script for you to get a better understanding of how to locate a web element through CSS - Sub-String Matches Technique using $ operator.

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class SampleSeven {

	public static void main(String[] args) {
		
        // System Property for Chrome Driver 
		System.setProperty("webdriver.chrome.driver","D:\\ChromeDriver\\chromedriver.exe");

      	// Instantiate a ChromeDriver class. 	
		WebDriver driver=new ChromeDriver();

      	// Launch Website
		driver.navigate().to("https://www.testandquiz.com/selenium/testing.html"); 

	// Click on the textbox and send value
		driver.findElement(By.cssSelector("input[id*='id']")).sendKeys("JavaTpoint C++ Tutorial");
			 
	// Close the Browser
        driver.close();
		 

	}

}



Next TopicLocating Strategies- By CSS



← prev next →