Finding elements

Question

I need some help with finding the elements using webdriver.

1. On the webpage this is the label 'Password'

< div _ngcontent-c1="" class="form-group text-left"> < label _ngcontent-c1="">Password</label >

2.On the webpage this is the textbox for 'Password'

< input _ngcontent-c1="" class="form-control ng-untouched ng-pristine ng-invalid" formcontrolname="Password" placeholder="" type="password" autocomplete="off" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAXFJREFUOBGVVDGKwkAUfZHFaBBS2riQSrC18QJpAvbeYAVbD6DxFm4TELyA1R7BKmUgjRa7pAwELKKF2XljEuMSN/HDZOb//96b+X+GKLZtW0mSrMV4Rw1TFOVbwD6Wy+UX4Y1XyCSkG31yTaNArZ1v8Nu3yGkUE1VrTdPQ7/cfYC8JGIYB0zTLBVqtVp5QVRWiWblfzOXBdPHGeTweYzgcYrvdIgxDzGYzBEEAx3Eecn/J9F8qoUxAWSwWCRM8ZhzHEsMSzudzGT6PiRJ/hDPNT5CRiagiEyOusiemtewBA//ZZDLBYDDIIavVCtfrVYrUEmi324iiCPv9XoqQnFkjfduZXzpToNlsykdUJBNMgWmViO/78DwPuq7DsizwQWV2fy1ZJJ2z26Hb6XRwOp0wGo2kwG63g+u6ElmrB/P5XApQ6HK54HA4pNsATwV4z+lVYbPZoNvtys6zHDaURsxTAZFnb/ij6R2PR3AUjWRifgHmko6KAvVfRAAAAABJRU5ErkJggg=="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"/>
</div >

3. On the webpage this is the button 'Login'

   < div _ngcontent-c1="" class="text-right col-xs-4 col-sm-4 col-md-4 login-submit no-side-padding"> < button _ngcontent-c1="" class="btn btn-outline-primary btn-lg" tabindex="4" type="submit" disabled="">Login< /button > </ div>

Answer 1

I would've used relative XPath. You can read about it here: https://www.guru99.com/xpath-selenium.html

In your case it would be:

1. //input[@class="form-control ng-untouched ng-pristine ng-invalid" ]
2. //input[@formcontrolname = "Password" and type="password"] (or use only one property)
3. //div[contains(text(), "Login")] OR //div[contains(@class, "login-submit")]

Answer 2

Password field:

//input[@formcontrolname="Password"]

Button:
//div[contains(text(), "Login")] <- make sure it's under <div> and not cause I see you end your tag with </button>

Answer 3

except "" attribute, you can use other attributes, "" attributes are dynamic

Answer 4

The best way to check if some locator actually finds element is to open developer console (for Chrome is F12) and in console tab enter locator from previous comments (xpath or css) by typing:

xpath: $x("xpath_locator")

css: $$("css_locator")

Note: If you use double quotes inside brackets around locator, single quotes must be used inside locator itself and vice versa...

Answer 5

As per my experience in my quality assurance services we can also use below methods to locate element.

Using xpath and cssSelector:

Xpath for label 'Password':

String xpath = //label[contains(text(),'Password')]

CSS Selector for textbox 'Password':

String css = input[formcontrolname*='Password']

// Here the * after formcontrolname denotes 'contains' which is denotes that find the formcontrolname that contains value 'Password'

CSS Selector for button 'Login':

String css = button[type*='submit']

CssSelector is preferred more than XPath as it takes less time than XPath.