How can I locate elements using the xpath contains class in selenium?

2.0K Asked by ananyaPawar in QA Testing , Asked on May 9, 2022

I have below two input fields and I have to find their location I can't use class selector cause iI have to identify element based on formcontrolname and ng-invalid class


<input _ngcontent-thn-c28="" formcontrolname="nic_no" igxinput="" type="text" placeholder="00000-0000000-0" class="ng-untouched ng-pristine ng-invalid igx-input-group__input">


<input _ngcontent-thn-c28="" formcontrolname="username" igxinput="" type="text" placeholder="UserName" class="ng-untouched ng-pristine ng-invalid igx-input-group__input">

Therefore I'm using xpath. Below is what I did:
driver.findElement(By.xpath("//div/input[(@formcontrolname='nic_no') and (@class='ng-invalid')]");

driver.findElement(By.xpath("//div/input[(@formcontrolname='nic_no') and (@class='ng-invalid')]"); 
But I'm getting error apparently I have to write all classes name inside @class, like this:
driver.findElement(By.xpath("//div/input[(@formcontrolname='nic_no') and (@class='ng-untouched ng-pristine ng-invalid igx-input-group__input')]");

If I do like above then I won't get errors but I need to use only one class name, cause there are changes more classes may include and reduce from this list of classes.

Answered by Amit raj

You should use xpath contains class:

equals validates the attribute value is exactly equal to the given value. As the attribute class value is "ng-untouched ng-pristine ng-invalid igx-input-group__input" you cannot say @class="ng-invalid"

You should use contains instead

driver.findElement(By.xpath("//div/input[(@formcontrolname='nic_no') and contains(@class,'ng-invalid')]");

Or use CSS:

In css class can be mentioned as tag.classname:

 driver.findElement(By.cssSelector("div>input.ng-invalid[formcontrolname='nic_no']")

If you want to have exact class match :

you can use [attribute='value'] syntax:

 driver.findElement(By.cssSelector("div>input[class='ng-untouched ng-pristine ng-invalid igx-input-group__input'][formcontrolname='nic_no']")

Your Answer

Answer (1)

Ranjana

o locate elements using the XPath contains function with a class attribute in Selenium, follow these steps:

1. Understanding XPath contains Function

The contains function in XPath is useful for finding elements whose attributes include a specific value. This is especially helpful for class attributes, as elements can have multiple classes.

2. Basic XPath Syntax

The syntax for using contains with a class attribute in XPath is:

  //tag[contains(@class, 'class_name')]

Here:

  //tag is the tag name of the HTML element you are looking for (e.g., div, span, a).

@class specifies that you are looking for the class attribute.

'class_name' is the class name you are searching for.

3. Using Selenium to Locate Elements

Here's how you can use this XPath in a Selenium script:

Example in Python:

from selenium import webdriver

  # Initialize the WebDriver (assuming you have the chromedriver in your PATH)driver = webdriver.Chrome()# Open a webpagedriver.get('http://example.com')# Locate an element using XPath with contains and classelement = driver.find_element_by_xpath("//*[contains(@class, 'class_name')]")# Perform actions with the located elementprint(element.text)# Close the WebDriverdriver.quit()Example in Java:javaCopy codeimport org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import org.openqa.selenium.WebElement;import org.openqa.selenium.chrome.ChromeDriver;public class LocateElementExample {    public static void main(String[] args) {        // Initialize the WebDriver (assuming you have the chromedriver in your PATH)        WebDriver driver = new ChromeDriver();        // Open a webpage        driver.get("http://example.com");        // Locate an element using XPath with contains and class        WebElement element = driver.findElement(By.xpath("//*[contains(@class, 'class_name')]"));        // Perform actions with the located element        System.out.println(element.getText());        // Close the WebDriver        driver.quit();    }}

4. Advanced Usage

If you need to be more specific (e.g., selecting a div with a specific class), you can modify the XPath accordingly:

  //div[contains(@class, 'class_name')]

Ensure the class name is correct: Verify that the class name you are using in your XPath exists in the elements you are trying to locate.
Check for typos: Ensure there are no typos in your XPath expression.
Browser compatibility: Ensure your WebDriver (e.g., ChromeDriver, GeckoDriver) is compatible with the browser version you are using.

By following these steps, you should be able to locate elements using the XPath contains function with a class attribute in Selenium.

5 Months