CODEWITHSUNDEEP
seleniumselenium-webdriverxpathcss-selectorswebdriverwait
Max_431
Max_431

Reputation: 23

Identify an element with in an angular website using Selenium

I'm trying automate an Angular application. The only drawback I have at the moment is that I don't want to use Protractor, I want to automate using Selenium/Eclipse. I have tried it but the problem is that locator keeps changing whenever I rerun the test. I have browsed through the net and found no concrete solution to this. Snippet of one field in the websites:

<input _ngcontent-wle-c93="" formcontrolname="FirstName" mattooltip="Enter First Name" maxlength="50" matinput="" placeholder="First Name" class="mat-input-element mat-form-field-autofill-control ng-tns-c47-3 ng-pristine ng-invalid ng-touched" cdk-describedby-host="" id="mat-input-0" aria-invalid="true" aria-required="false" aria-describedby="mat-error-0">

id="mat-input-0" keeps changing

Upvotes: 0

Views: 2577

Answers (2)

undetected Selenium
undetected Selenium

Reputation: 193088

To identify the element you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

  • Using and XPATH:

    new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[contains(@class, 'mat-input-element') and @formcontrolname='FirstName'][@placeholder='First Name']"))).click();

  • Using and CSS_SELECTOR:

    WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.mat-input-element[formcontrolname='FirstName'][placeholder='First Name']"))).click()

  • Note : For python clients you have to add the following imports :

    from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

Upvotes: 0

Alin Stelian
Alin Stelian

Reputation: 897

For your element, you have a couple of options to access it

<input _ngcontent-wle-c93="" formcontrolname="FirstName" mattooltip="Enter First Name" maxlength="50" matinput="" placeholder="First Name" class="mat-input-element mat-form-field-autofill-control ng-tns-c47-3 ng-pristine ng-invalid ng-touched" cdk-describedby-host="" id="mat-input-0" aria-invalid="true" aria-required="false" aria-describedby="mat-error-0">

Let's take it one by one

CSS_SELECTOR

drive.findElement(By.cssSelector("input[formcontrolname='FirstName'][placeholder='First Name']"));

XPATH

drive.findElement(By.xpath("//input[contains(@placeholder,'First Name')]"));

or

drive.findElement(By.xpath("//input[contains(@formcontrolname,'FirstName')]"));

or both

drive.findElement(By.xpath("//input[contains(@formcontrolname,'FirstName') and (@placeholder, 'FirstName')]"));

same for CSS_SELECTOR - I've shown to you the code with both, but you can access it even by specifying one attribute for your input element

Upvotes: 2

Related Questions