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: Cant click first item in dropdown

In my web page I want to click on the txtbox which will drop down a list, and then click on the first option. I can't use the selector option since the it isn't a select type. So I am using the Action in selenium to move my mouse to click. When in the web page if I click over the textbox the dropdown will list the items. But in my selenium code it can find the txtbox element, but when I click it, it can't element in the list. I don't think the list appears when I click on the txtbox. Heres my current code:
Webelement txtbox = driver.findElement(By.xpath("//*[#id=\"lob\"]"));
Webelement inpt =driver.findElement
(By.xpath("/html/body/div[2]/div/div/div/div[2]/div/div/div[1]"));
mouseHoverAction(txtbox);
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.elementToBeClickable(inpt));
Utils.mouseHoverAction(inpt);
public static void mouseHoverAction(WebElement mainElement){
Actions action = new Actions(driver);
action.moveToElement(mainElement).perform();
action.click();
action.perform();
Log.info("Click action is performed on the selected Product Type");
}
In my Log file it never says that the click action was performed but it does say the textbox was found.
Here is the HTML before I click on textbox:
<div class="ant-select margin___3sLIj ant-select-lg ant-select-single
ant-select-show-arrow" name="lineOfBusiness" style="width: 100%;">
<div class="ant-select-selector">
<span class="ant-select-selection-search">
<input id="lob" autocomplete="off" class="ant-select-selection-search-input"
role="combobox" aria-haspopup="listbox" aria-owns="lob_list" aria-autocomplete="list"
aria-controls="lob_list" aria-activedescendant="lob_list_0"
readonly="" unselectable="on" value="" style="opacity: 0;" aria-expanded="false">
</span>
<span class="ant-select-selection-placeholder">Please select one
</span>
</div>
>
Here is HTML after I click drop down and insepct first element in list "Business Enablement"
<div class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft
ant-select-dropdown-hidden" style="min-width: 205px; width: 205px;
left: 182.984px; top: 614.984px;">
<div>
<div role="listbox" id="lob_list" style="height: 0px; width: 0px; overflow: hidden;">
<div aria-label="Business Enablement" role="option"
id="lob_list_0" aria-selected="false">Business Enablement</div>
<div aria-label="Capital Markets" role="option"
id="lob_list_1" aria-selected="false">Capital Markets</div>
</div>
<div class="" style="height: 256px; overflow-y: auto; overflow-anchor: none;">
<div style="height: 480px; position: relative; overflow: hidden;">
<div class="" style="display: flex; flex-direction: column; transform: translateY(0px);
position: absolute; left: 0px; right: 0px; top: 0px;"><div aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-active">
<div class="ant-select-item-option-content">Business Enablement
</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true"
style="user-select: none;"></span>
</div>
<div class="ant-select-item-option-content">Capital Markets
</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true"
style="user-select: none;"></span>
</div>
<div class="ant-select-item-option-content">Caribbean Banking
</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true"
style="user-select: none;"></span>
</div>
<div class="ant-select-item-option-content">Cloud
</div>
<span class="ant-select-item-option-state" unselectable="on" aria-hidden="true"
style="user-select: none;"></span>
</div>
</div>
</div>
</div>
</div>
I need help selecting "Business Enablment"
Extra Pics

This is how you can attempt to try it -
Click the dropdown
Right click on the first element of the dropdown, inspect . After the developer option is open, right click on that element, copy full xpath. Now you will need to tweak the xpath to capture everything from the list. Sometimes you can just use //li and get content of the list or sometimes you will have to add * to either table, tr depending on the xpath
Once you get the xpath to capture the list, store it in List
List brand = driver.findElements(By.xpath("use your custom xpath"));
Iterate through the list and store the text
Search for the value you want to click
Click the element when you find
This is one of the method I have written for my project
public void selectBrand(String Brand) {
List<WebElement> brand = driver.findElements(By.xpath("//li"));// this will store all elements from brands dropdown, again you will need to use your custom xpath
for (WebElement brandlist : brand)
{
String brandName = brandlist.getText();// store all text from dropdown
if (brandName.length() > 1) {
if (brandName.contains(Brand))// search for the value to click
{
brandlist.click();// click
}
}
}
}

Input with select remains empty during automated testing

In my Java/Selenium framework I try to fill in an e-mail address. With manual testing I click the field and a pull down menu is openend. This list is filtered with the values I enter. However with automated testing, this list remains empty.
<div class="k-widget k-multiselect k-multiselect-clearable k-state-hover" unselectable="on" title="" style="">
<div class="k-multiselect-wrap k-floatwrap" unselectable="on">
<ul role="listbox" unselectable="on" class="k-reset" id="create-task-users-list_taglist"></ul>
<input class="k-input k-readonly" style="width: 107.469px;" accesskey="" autocomplete="off" role="listbox" title="" aria-expanded="false" tabindex="0" aria-describedby="create-task-users-list_taglist" aria-owns="create-task-users-list_taglist create-task-users-list_listbox" aria-disabled="false" aria-busy="false">
<span unselectable="on" class="k-icon k-clear-value k-i-close k-hidden" title="clear" role="button" tabindex="-1"></span>
<span class="k-icon k-i-loading k-hidden"></span>
<span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-stretch: 100%; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 23.1px; position: absolute; visibility: hidden; top: -3333px; left: -3333px;">Assign Users</span>
</div>
<select id="create-task-users-list" multiple="multiple" data-placeholder="Assign Users" data-role="multiselect" aria-disabled="false" style="display: none;">
<option value="1001">User #1(user1#mytestapp.com)</option>
<option value="1002">User #2(user2#mytestapp.com)</option>
<option value="1003">User #3(user3#mytestapp.com)</option>
<option value="1004">User #4(user4#mytestapp.com)</option>
<option value="1005">User #5(user5#mytestapp.com)</option>
<option value="1006">User #6(user6#mytestapp.com)</option>
<option value="1007">User #7(user7#mytestapp.com)</option>
</select>
</div>
I perform the same actions with Selenium, but the list is empty. The following statements are used.
//input element
element.click();
element.sendKeys("user2#mytestapp.com");
//Filtered pull down menu
Select select = new Select(element);
select.selectByVisibleText(testElement.getValue());
Another problem is that this website I am using in my test is developed by a third party and I have no influence here. It is used to support my Website under test.
Why is this happening? Why is the list available during manual testing, but not automated? Is there anything I have to change? Is this in the browser startup?
#Edit:
Clearing the browser cache (Chrome) did not help.

This issue was a bug in the application. The reason that values are shown when testing manual, was that the values were available in the cache. By deleting the cache, including storage removal, the same issue occurs as when testing automated.
It has been reported to the third party and will be solved shortly.

Selenium Java to select from drop down menu

I do appreciate there are variants of this question already posted, however, I have read and tried all options from those posts without success. I think there is something within the HTML in my case which is preventing the solutions from working, specifically the css class ui-helper-hidden-accessible.
The following is my HTML
<div id="myform:selectCharacteristic" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all">
<div class="ui-helper-hidden-accessible">
<input id="myform:selectCharacteristic_focus" type="text" autocomplete="off" role="combobox" aria-haspopup="true" aria-expanded="false" />
</div>
<div class="ui-helper-hidden-accessible">
<select id="myform:selectCharacteristic_input" tabindex="-1" data-p-con="javax.faces.Integer" data-p-hl="onemenu">
<option value="1">Hatchback</option>
<option value="2">Estate</option>
<option value="3">Saloon</option>
</select>
</div>
<label id="myform:selectCharacteristic_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all"> </label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right">
<span class="ui-icon ui-icon-triangle-1-s ui-c"></span>
</div>
<div id="myform:selectCharacteristic_panel" class="ui-selectonemenu-panel ui-widget ui-widget-content ui-corner-all ui-helper-hidden ui-shadow">
<div class="ui-selectonemenu-items-wrapper" style="height:200px">
<ul id="myform:selectCharacteristic_items" class="ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset" role="listbox">
<li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Hatchback" tabindex="-1" role="option">Hatchback</li>
<li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Estate" tabindex="-1" role="option">Estate</li>
<li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="Saloon" tabindex="-1" role="option">Saloon</li>
</ul>
</div>
</div>
I have tried a variety of things including
org.openqa.selenium.support.ui.Select.selectByIndex() and org.openqa.selenium.support.ui.Select.selectByVisibleText() as trying to perform a click using Actions and then sending Keys.UP and Keys.DOWN. However these options have not been successful.
I would really appreciate a solution which can select an item from the drop down list starting with only label value. That is, if I want to select "Saloon", I do not necessarily know that it has an index value of 3. Also, the drop down can contain many more options which require a scroll on the drop down menu.
Many thanks

https://prnt.sc/k227pf
in your case "Select" from selenium is not works, because JSF override base select, you need to write your own methods for select dropdown items.http://prntscr.com/k22c9v
it could be something like this:
`
//xpath_for_element_that_can_open_dropdown
#FindBy(xpath = "//div[contains(#class, 'ui-selectonemenu-trigger')]/span")
private WebElement SELECT_CORNER;
//xpath_for_all_elements_indropdownlist
#FindBy(xpath = "//div[#class='ui-selectonemenu-items-wrapper']//li")
private List<WebElement> DROPDORN_LIST_ELEMENTS;
public void selectSomeOption(String dropdownItemToBeSelected){
SELECT_CORNER.click();
for (WebElement dropdownListElement : DROPDORN_LIST_ELEMENTS) {
if (dropdownItemToBeSelected.equals(dropdownListElement.getText())){
dropdownListElement.click();
break;
}
}
}
`

As per the HTML you have provided the options Hatchback, Estate and Saloon seems to be <li> items. To select Saloon you can use the following solution:
driver.findElement(By.xpath("//input[#id='myform:selectCharacteristic_focus']")).click();
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//ul[#class='ui-selectonemenu-items ui-selectonemenu-list ui-widget-content ui-widget ui-corner-all ui-helper-reset' and #id='myform:selectCharacteristic_items']//li[#class='ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all' and #data-label='Saloon']"))).click();

I tried this and it's working fine.
System.setProperty("webdriver.chrome.driver", "chromedriver");
driver = new ChromeDriver();
driver.get("file:///Desktop/test.html");
Thread.sleep(1000);
Select dropdown = new Select(driver.findElement(By.id("myform:selectCharacteristic_input")));
dropdown.selectByVisibleText("Saloon");
Thread.sleep(1000);
This code is selecting the Saloon value from the dropdown.

Retrieving all links within an ordered list using XPath

How can I retrieve a set of links present as list items in an ordered list using XPath? I need to retrieve all sections from a forum with the following html code:
<div id="pagewrapper" class="fixed">
<div id="toplinks" class="toplinks" style="position: relative; top: 145px;">
<div class="above_body" style="height: 210px;">
<div class="body_wrapper">
<div id="breadcrumb" class="breadcrumb">
<div id="pagetitle">
<ol id="forums" class="floatcontainer">
<li id="cat3" class="forumbit_nopost new L1">
<div class="forumhead tcat foruminfo L1 collapse">
<div class="tbody_left">
<div class="tbody_right">
<ol id="c_cat3" class="childforum">
<li id="forum9" class="forumbit_post new L2">
<div class="forumrow table">
<div class="foruminfo td" style="padding-top: 12px; padding-bottom: 12px;">
<img id="forum_statusicon_9" class="forumicon" alt="" src="elitex360/statusicon/forum_new-48.png">
<div class="forumdata">
<div class="datacontainer">
<div class="titleline">
<h2 class="forumtitle">
Forum index <!-- get this link -->
</h2>
</div>
<p class="forumdescription">
</div>
</div>
</div>
<h4 class="nocss_label">Forum Actions:</h4>
<h4 class="nocss_label">Forum Statistics:</h4>
<ul class="forumstats td" style="padding-top: 18px; padding-bottom: 12px;">
<div class="forumlastpost td">
</div>
</li>
<li id="forum22" class="forumbit_post new L2">
<li id="forum40" class="forumbit_post new L2">
</ol>
<div class="tbody_under"></div>
</div>
</div>
<div class="tfoot">
</li>
<li id="cat4" class="forumbit_nopost new L1">
<li id="cat52" class="forumbit_nopost new L1">
<li id="cat5" class="forumbit_nopost new L1">
<li id="cat6" class="forumbit_nopost new L1">
<li id="cat7" class="forumbit_nopost old L1">
</ol>
The section links I have to retrieve are marked in the code above (<!-- get this link -->). I am now using the following string to retrieve all list items:
//div[#id='pagewrapper']/div[3]/ol
retrieving all list items. But I don't know how to "enter" each list item and retrieve the link label's contents. In the examples I found, knowledge of the number of list items is necessary prior to accessing them. That is not the case as the forum may have a different number of list items (the template is for a forum engine, not a forum in particular).
How can I retrieve all links within the list items?

Try below xpath to get the URL:-
//a[contains(.,'Forum index')]/#href
If you want all li in ol as I understand from you question then the xpath is as below:-
//div[#id='pagewrapper']//li[#id='cat3']//ol//li
I think Below is the xpath you are expecting:-
//div[#id='pagewrapper']//div/#href
Hope it will help you :)