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.
}
Related
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
}
}
}
}
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.
i need to select the data from Excel file . Here i am using keyword driven framework. This is the HTML code
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<div id="addDialog" class="hidden ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 30px; height: auto; max-height: 351.05px; overflow-y: auto;">
<div class="field-container">
<fieldset class="field-container">
<legend>Contracts:</legend>
<a class="select-all" href="#">Select All</a>
<a class="deselect-all" href="#">Deselect All</a>
<select id="addContract" class="searchable" multiple="multiple" style="position: absolute; left: -9999px;">
<option value="93370956">93370956</option>
<option value="93796167">93796167</option>
<option value="94203239">94203239</option>
</select>
<div id="ms-addContract" class="ms-container">
<div class="ms-selectable">
<input class="search-input" type="text" placeholder="filter" autocomplete="off"/>
<ul class="ms-list" tabindex="-1">
<li id="86355560-selectable" class="ms-elem-selectable">
<span>93370956</span>
</li>
<li id="202890296-selectable" class="ms-elem-selectable">
<span>93796167</span>
</li>
<li id="938848030-selectable" class="ms-elem-selectable">
<span>94203239</span>
</li>
</ul>
</div>
I am sending defined data from excel file. I tried some code but they are not selecting all the data from excel file at some point of time code is giving me exception for webElement not found.
TRY #1
List<WebElement> options = driver.findElements(By.xpath("//ul[#class='ms-list']/li/span[contains(text(),'"+testData+"')]"));
for (WebElement option : options) {
if(testData.equals(option.getText()))
option.click();
TRY#2
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//ul[#class='ms-list']/li/span[contains(text(),'"+testData+"')]"))).click();
If i have 10 data in list and i am reading them from my Excel file it above codes only select 3 or 4 and then gave me exception.
Then i tried with this one:
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(".//*[#id='ms-addContract']/div[1]/input"))).sendKeys(testData);
Thread.sleep(5000);
driver.findElement(By.xpath(".//*[#id='ms-addContract']/div[1]/input")).sendKeys(Keys.ARROW_DOWN,Keys.ARROW_DOWN,Keys.SPACE);
Thread.sleep(2000);
//Clear the input text value.
driver.findElement(By.xpath(".//*[#id='ms-addContract']/div[1]/input")).clear();
where it is sending data to filter textbox and selecting the popped up input. But it is taking time and if i don't put delay giving me timeout Exception.
Please help.
I tried the java code:
driver.findElement(By.cssSelector("input.only-numbers.ltr")).sendKeys("111");
I get an error:
Exception in thread "main"
org.openqa.selenium.ElementNotVisibleException: element not visible
but when i change the code to xpath this work prefectly
driver.findElement(By.xpath("html/body/section[10]/div/div[2]/form/div[1]/input")).sendKeys("111");
the html code:
<section id="forgot-password-layer" class="modal-layer old-modal animate-in" data-top="120" role="dialog">
<div class="modal-inner">
<a class="modal-close" title="" href="#">
<div class="modal-title">איפוס סיסמה</div>
<div class="form-wrapper">
<form id="form-resetpass" method="post" action="">
<div class="input-wrapper icon wupid">
<label for="wupid">תעודת זהות</label>
<input class="only-numbers ltr" type="text" value="" maxlength="9" name="wupid" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: left center;">
</div>
<input class="sprite form-resetpass" type="submit" value="" name="">
<div class="form-error"> </div>
</form>
<div class="new-user-message">
</div>
</div>
</section>
why its happen and how can I fixed by using cssSelector?
It's looks like you have more than one element using cssSelector and unfortunately you are locating hidden element, need to verify your cssSelector that it is unique and locating correct element.
Try as below, may be it helps :-
driver.findElement(By.cssSelector("form#form-resetpass input[name = 'wupid']")).sendKeys("111");
Or try using WebDriverWait to wait until this element getting visible as below :-
new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("form#form-resetpass input[name = 'wupid']"))).sendKeys("111");
If you're still unable to interact with element, try using JavascriptExecutor as below :-
((JavascriptExecutor)driver).executeScript("arguments[0].value = arguments[1]", driver.findElement(By.cssSelector("form#form-resetpass input[name = 'wupid']")), "111")
I have the following HTML-Code:
<div class="test-container">
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
<p> Test jquery menu1 </p>
</div>
<div class="slide-button" data-content="panel2">
<p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
<p> Test jquery menu2 </p>
</div>
</div>
And the following jQuery/Java-Code:
$(".slide-button").on('click', function() {
var panelId = $(this).attr('data-content');
$('#'+panelId).toggle(500);
$(this).find('.panel-icon').text(function(_, txt) {
return txt === "+" ? "-" : "+";
});
});
The toggle itself works perfectly. When I click on the slide-button the content will slide-down. However, after the slide-down animation is finished the content somehow "jumps up" to its final position.
How can I avoid this "jump" and get the content stays where it is after the slide-down animation is finished?
Thanks for any help :-)
I don't know exactly what your circumstances are, and whether you need <p>aragraph tags or not, but if you switch the <p> tags inside your "panels" to <span> tags it seems to fix your issue.
The HTML code I used which fixed the jump looks like this:
<div class="test-container">
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
<!-- Here is the first change from a paragraph to a span tag -->
<span>Test jquery menu1</span>
</div>
<div class="slide-button" data-content="panel2">
<p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
<!-- Here is the second change from a paragraph to a span tag -->
<span>Test jquery menu2</span>
</div>
Also, just a friendly tip, Java is not the same as JavaScript. (: Keep that in mind when tagging your questions.