How do I find both Data QA Id and CSS Class in Selenium C# ?
Trying to locate both DataQAid attribute and also see if its class ng-invalid, (Angular Material Textbox Error)
This is what wrote so far, Open to using CssSelector or anything else, instead of Xpath
private By PhoneError => By.XPath("//*[@attr.data-qa='homephone']");
Resource: Find element in Selenium using XPATH or CSS Selector
A working XPath could be :
//div[starts-with(@class,'mat-form-field')]/input[contains(@data-qa,'homephone-update') and contains(@class,'ng-invalid')]
Output : 1 node.
<input _ngcontent-ng-cli-universal-cli matinput formcontrolname="homephoneNumber" placeholder="'HomePhone'" class="mat-input-element mat-form-field-autofill-control ng-tns-c64-42 ng-touched cdk-text-field-autofil)-monitored ng-dirty ng-invalid" maxlength="50" id="mat-input-26" data-placeholder="'Home Phone'" aria-invalid="true" aria-required="false" data-qa=" homephone-update">
I prefer using CSS selectors because of the better support and speed over XPath. I've tested the below with the HTML you provided and it works.
private By PhoneError => By.CssSelector("input[ng-invalid][data-qa='homephone-update']");
You can use and and contains=>
private By PhoneError => By.XPath("//*[@attr.data-qa='homephone' and contains(@class, ‘ng-invalid’)]");
