Below is the element description:
<div class="css-control-textinput-122aa"><input type="text" aria-required="true" disabled="" required=""</div>
In the above class is having name css-control-textinput-122aa, but here 122aa is not fixed value, it gets changed. So how do I find the element using className starting with css-control-textinput only?
Below the code I tried, but it's not working:
@FindBy (className = "css-fauxcontrol-textinput-^")
List<WebElement> dataSourceName;
className needs full class. For partial class name you can use cssSelector
@FindBy (css = "[class^='css-fauxcontrol-textinput-']")
List<WebElement> dataSourceName;
Or xpath
@FindBy (xpath = "//div[starts-with(@class, 'css-control-textinput-')]")
List<WebElement> dataSourceName;
Possibly there is an issue with the HTML you have shared. The <input> tag should have been closed by a > and the actual HTML must have been:
<div class="css-control-textinput-122aa"><input type="text" aria-required="true" disabled="" required=""></div>
In this cases, simply identifying the <div> may not help us but we need to traverse till the child <input> node and you can use either of the following solutions:
css:
@FindBy (css = "div[class^='css-control-textinput-']>input[type='text']")
List<WebElement> dataSourceName;
xpath:
@FindBy (xpath = "//div[starts-with(@class,'css-control-textinput-')]/input[@type='text']")
List<WebElement> dataSourceName;
Note: If your usecase is to find an element, you won't need a List but a WebElement
