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



  • 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



Suggested Topics

  • 2
  • 2
  • 2
  • 1
  • 2