We Keep Coding

how to dynamically identify which html element on a page

In my application page, have a web table with multiple rows and columns loaded dynamically based on the data added. In a one of the "td" the data will be sometimes a "p" tag or "button" tag (but will look like a link) based on the status of the account on that row. And also I need to click that button to do some additional action. Here i need to validate a case, need to take all the rows and columns data and store it. But while on this particular td, as it varies based on the account status, how can I dynamically check and take the status text like check if it is "button" or "p" control?
Table looks like below
Code for both the rows looks like (sammple)
<td class="Table2Cell account-list-cell va--middle pl--2" tabindex="0" style="width: 24%; min-height: 120px; max-height: 120px;">
<div class="FlexBox FlexBox__direction FlexBox__direction--row FlexBox__justify--start">
<div class="FlexItem FlexItem__align-self--top FlexItem__align-self--base-top">
<svg class="Icon status-action Icon--rotate-0 Icon--size-small-tight" focusable="false" name="icon-alert-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin-top: 2px;">
<use xlink:href="/static/fonts/icons/icon-defs.svg#alert-circle"></use>
</svg>
</div>
<div class="FlexItem FlexItem__align-self--center FlexItem__align-self--base-center">
<div style="padding-left: 4px;">
<button aria-disabled="false" aria-label="Upload Check Image" class="Button px--0 py--0 Button--link" formnovalidate="" type="button" style="min-height: 0px; line-height: 16px; margin-bottom: 5px; margin-top: 5px;">
<span class="Button__text Button__text--link">Upload Check Image</span>
</button>
<p class="text--dark text--small">Action Required
</p>
</div>
</div>
</div>
</td>
=============
<td class="Table2Cell account-list-cell va--middle pl--2" tabindex="-1" style="width: 24%; min-height: 120px; max-height: 120px;">
<div class="FlexBox FlexBox__direction FlexBox__direction--row FlexBox__justify--start">
<div class="FlexItem FlexItem__align-self--top FlexItem__align-self--base-top">
<svg class="Icon status-verified Icon--rotate-0 Icon--size-small-tight" focusable="false" name="icon-checkmark-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin-top: 2px;">
<use xlink:href="/static/fonts/icons/icon-defs.svg#checkmark-circle"></use>
</svg>
</div>
<div class="FlexItem FlexItem__align-self--center FlexItem__align-self--base-center">
<div style="padding-left: 4px;">
<p class="text--regular flex-grow--0">Verified</p>
<p class="text--dark text--small">Status
</p>
</div>
</div>
</div>
</td>
any help on this?

Comma in css selectors button, p.text--regular return both or existing one element. Using the css selector you'll get button or p. Parent element should be a row element. Use it to get an element and check the tag.
WebDriverWait wait = new WebDriverWait(driver, 5);
WebElement statusElement = wait.until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("button, p.text--regular")));
String tag = statusElement.getTagName();

Both Action Required and Verified, Status is in P tag. However there's a difference between Action Required p tag and that is it has a preceding-sibling (button) that has text Upload Check Image.
I have a work around for this Problem (Only cons is that it has a bad time complexity) :
use findElements() instead :
2 cases :
Let's say for most of the time you see Action Required the do this :
The below code is for a particular td not a list of tds
if(driver.findElements(By.xpath("//span[text()='Upload Check Image']")).size() > 0 ){
// do what ever you wanna do here when **Action Required** is visible in UI.
}
When most of the time it is Verified :
if(driver.findElements(By.xpath("//p[contains(#class, 'text--
regular') and text() = 'Verified']")).size() > 0 ){
// do what ever you wanna do here when **Verified** is visible in
UI.
}

Selenium - How to get following sibling?

So I want to target a textbox that appears in a list that comes after the label "First Name" and send a first name to the box, but can't seem to be able to target the textBox...
What I've tried:
WebElement firstNameLocTry = driver.findElement(By.xpath("//label[text()='First Name']/following-sibling::div"));
firstNameLocTry.sendKeys(firstName);
What the li look like:
<li class="WPTO WKVO" role="presentation" data-automation-id="formLabelRequired">
<div class="WBUO WETO WDUO">
<label id="56$551056--uid24-formLabel" data-automation-id="formLabel" for="56$551056--uid24-input">First Name</label>
<div class="WEUO wd-c8594868-6b31-4526-9dda-7d146648964b" aria-hidden="true">First Name</div>
</div>
<div data-automation-id="decorationWrapper" id="56$551056" class="WFUO">
<div class="WICJ">
<div class="WMP2 textInput WLP2 WJ5" data-automation-id="textInput" id="56$551056--uid24" data-metadata-id="56$551056" style="visibility: visible;">
<input type="text" class="gwt-TextBox WEQ2" data-automation-id="textInputBox" tabindex="0" role="textbox" id="56$551056--uid24-input" aria-invalid="false" aria-required="true">
</div>
</div>
</div>
</li>
Any reason my sendKeys just leads to Element not interactable?

The attached HTML code Produce below out put
With the given XPath points to the second "First Name" Div [below pic], when you perform sendKeys, it is obvious that the error "Element not interactable" will be thrown.
Try with below two Xpaths,
1. //label[text()='First Name']//parent::div/following-sibling::div
2. //label[text()='First Name']//parent::div/following-sibling::div//input

Please use following xpath:
//div[text()='First Name']
or try:
//*[contains(text(),'First Name')]

org.openqa.selenium.ElementNotVisibleException: element not interactable while trying to click an element through selenium

I am trying to click Add New button. But it is throwing an error, saying org.openqa.selenium.ElementNotVisibleException: element not interactable
<div id="left-tabs-example-pane-metastore" aria-labelledby="left-tabs-example-tab-metastore" role="tabpanel" aria-hidden="false" class="fade tab-pane active in">
<div class="title col-sm-12"><button class="custom-btn create-new-button" style="float: right;">Add New</button></div>
<div class="test_table custom-test_table">
<div class="divTable">
<div class="divTableHeading">
<div class="row" style="margin: 0px 3px; border-bottom: 1px solid rgb(221, 221, 221); padding: 15px;">
<div class="col-sm-3">Name</div>
<div class="col-sm-3">Created by</div>
<div class="col-sm-3">Created on</div>
<div class="col-sm-2">Status</div>
<div class="col-sm-1">Actions</div>
</div>
</div>
<div class="divTableBody">
<div class="row" style="margin: 0px 3px; border-bottom: 1px solid rgb(221, 221, 221); padding: 15px;">
<div class="col-md-3" title="beta-stage-metastore" style="text-overflow: ellipsis; display: inline-block; white-space: nowrap; overflow: hidden;">beta-stage-metastore</div>
<div class="col-md-3">betaorg-admin</div>
<div class="col-md-3">9th February at 13:17 hrs</div>
<div class="col-md-2" style="overflow-wrap: break-word;">STOPPED</div>
<div class="col-sm-1">
<span class="dropdown custom_dropdown option-custom_dropdown" style="border-right: none;">
<img src="images/more.png">
<ul class="dropdown-menu">
<li><a>Start</a></li>
</ul>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I have tried following:
driver.findElement(By.cssSelector(".custom-btn.create-new-button")).click();
Xpath for Add New button generated using chrome extension is:
/html/body/div[#id='app']/div[#class='_loading-overlay']/main/div[#class='container-fluid search_table_container']/div[#class='col-md-12 test_tab_wrapper']/div[#class='test_subtab_container']/div[#id='left-tabs-example']/div[#class='col-sm-12'][2]/div[#class='tab-content']/div[#id='left-tabs-example-pane-resources']/div/div[#class='workflowtab_box']/div[#class='row vertical_tab_panel_container']/div[#id='left-tabs-example']/div[#class='col-sm-9']/div[#class='tab-content']/div[#id='left-tabs-example-pane-metastore']/div[#class='title col-sm-12']/button[#class='custom-btn create-new-button']

Basically, there are four reasons why an element is not interactable.
1) Timing - the time it takes for elements to load. For this, you need to check how to use implicit an explicit wait
2)Check if the element is in a frame. For this, switch to the frame.
3) Incorrect locator
4) Wrong implementation of responsiveness. This still stems from no 3). Some websites have only one code turned on for mobile and web versions. So, the element will have more than one instance when you check the xxxxx.size. You will have to search through the list for the one whose display != none. Then, you can append the position of the element to your xpath or whatever locator you are using. E.g. xxxx/yyyyy/zzzz[3] if the position is 4 in the list.
Use this code for java,
Assumptions
a)the locator type is id
b)name of the list is nameOfYourElements
List nameOfYourElements = wd.findElements(By.id("nameOfYourID"));
System.out.println(nameOfYourElements.size());

To click on the element with text as Add New you can use either of the following solutions:
cssSelector:
driver.findElement(By.cssSelector("div.tab-content>div#left-tabs-example-pane-metastore>div.title>button.custom-btn create-new-button")).click();
xpath:
driver.findElement(By.xpath("//div[#class='tab-content']/div[#id='left-tabs-example-pane-metastore']/div[contains(#class, 'title')]/button[#class='custom-btn.create-new-button' and text()='Add New']")).click();

Please give some wait time to webdriver to visible the element.Please try this.
WebDriverWait wait = new WebDriverWait(driver, 40);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div/button[#class='custom-btn create-new-button']"))).click();

Try the xpath: driver.findElement(By.xpath("//button[text()='Add New']"));
Please check if the element is in an iframe or not. If yes, then you need to first switch to the iframe and then click on the element, for switching to the iframe, you can refer to: How to handle iframe in Selenium WebDriver using java
If its not in an iframe then you can directly click on the element using the above mentioned xpath.

How to click dynamic element inside span class

I'm pretty new in Selenium and UI automation. Have some problem with clicking on a dynamic element inside span class. So this id everytime changes for each of 3 drop-down elements. So each class for each this element the same which is create the problem as well.
So I need change the value for id="react-select-2585057--value-item"
<div class="field loan-selection">
<label class="field__body">
<div class="field__label">Verwendung
<!-- -->
</div>
<div class="field__control">
<div class="Select customSelect has-value Select--single">
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-2585057--value">
<div class="Select-value">
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2585057--value-item">Freie Verwendung</span>
</div>
<div aria-expanded="false" aria-owns="" aria-activedescendant="react-select-2585057--value" aria-disabled="false" class="Select-input" role="combobox" style="border:0;width:1px;display:inline-block" tabindex="0"></div>
</span>
<span class="Select-arrow-zone">
<span class="Select-arrow"></span>
</span>
</div>
</div>
</div>
</label>
</div>

As per the HTML to invoke click() on the element with dynamic id as id="react-select-2585057--value-item" assuming this element will always be a descendent of the node <div class="field__label"> you need to induce WebDriverWait for the desired element to be clickable and you can use the following solution:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[#class='field loan-selection']//div[#class='field__label' and contains(., 'Verwendung')]//following::div[1]//span[#class='Select-value-label' and starts-with(#id,'react-select-')]"))).click();

Selenium - Find element using xpath or cssSelector

I need to click on or find element "Compute vmSwitch". I tried many ways using xpath (class & contains), cssSelector as well, but could not able to locate element:
driver.findElement(By.xpath("//span[contains(#class,'nopadding vm-create-text-style-3 block-with-text-4 ng-binding') and contains(text(), 'Compute vmSwitch')]")).click();
The code is given below:
<div class="w-full"><br>
<img class="img-responsive center-block m-t-47" src="/src/icon/background/create_vm_img5.png">
<div class="col-md-12 m-t-md wordwrap">
<p class="nopadding vm-create-text-style-3 block-with-text-4 ng-binding">
Compute vmSwitch</p>
</div>

Why do you try with the span tag?
If this is your html:
<html>
<head></head>
<body>
<div class="w-full">
<br>
<img class="img-responsive center-block m-t-47" src="/src/icon/background/create_vm_img5.png">
<div class="col-md-12 m-t-md wordwrap">
<p class="nopadding vm-create-text-style-3 block-with-text-4 ng-binding"> Compute vmSwitch</p>
</div>
</div>
</body>
</html>
you could try:
WebElement elem2= driver.findElement(By.xpath("//div[#class='w-full']"));
elem2.findElement(By.xpath(".//p[text()=' Compute vmSwitch']")).click();