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();
Related
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')]
On users.html, there is the main and industries tab.
When I load users.html I want industries tab to load. how do I do it?
<div class='tabs-x tabs-above tabs-krajee'>
<ul id="myTab-tabs-above" class="nav nav-tabs" role="tablist">
<li class="active">
Main</li>
<li>Industries</li>
</ul>
<!-- Tab content refers to this part -->
<div id="tabs-content" class="tab-content">
<div id="home-tabs" class="tab-pane fade in active">
<div th:include="fragments/admin/companyProfile::companyProfile(${currentAccountant})"></div>
</div>
<div id="users-tabs" class="tab-pane fade">
<div th:include="fragments/admin/users::users">a</div>
</div>
</div>
</div>
Following code loads userDetails but I want a specific tab to be selected on loading. How do I do it?
#RequestMapping(value = "/load", method = RequestMethod.GET)
public ModelAndView load() {
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("userDetails");
return modelAndView;
}
You need to trigger tab show on document load.
Check documentation
<div class='tabs-x tabs-above tabs-krajee'>
<ul id="myTab-tabs-above" class="nav nav-tabs" role="tablist">
<li class="active">
Main</li>
<li>Industries</li>
</ul>
<!-- Tab content refers to this part -->
<div id="tabs-content" class="tab-content">
<div id="home-tabs" class="tab-pane fade in active">
<div th:include="fragments/admin/companyProfile::companyProfile(${currentAccountant})"></div>
</div>
<div id="users-tabs" class="tab-pane fade">
<div th:include="fragments/admin/users::users">a</div>
</div>
</div>
</div>
<script th:inline="javascript">
var tabToSelect = "users-tabs";
$(document).ready(function() {
$('#myTab-tabs-above a[href="#'+tabToSelect+'"]').tab('show')
});
</script>
You are not specified that which tab to select. How do you want to separate the logic for adding Main and industries.
In Controller
if you want to show MainTab
modelAndView.addObject("mainTabAddOrNot","show");
otherwise
modelAndView.addObject("mainTabAddOrNot",null);
In Thymeleaf side:
<li th:if="$(mainTabAddOrNot)" >
Main</li>
<li>Industries</li>
It is just an example to give an idea to use conditions in thymeleaf for specific tag adding. Hope it will give you an idea.
There is no need to change your controller code neither javascript. Just set your tab active .
Also you must set the Industries tab active.
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#industries"
role="tab">
Industries Tab Data
</a>
<div class="tab-pane fade show active" id="industries" role="tabpanel">
So I have this Google Docs survey and there are checkboxes which I want to check with Selenium Webdriver automatically. I tried to locate the element ID but it doesn't have one, only a class name.
<label class="docssharedWizToggleLabeledContainer freebirdFormviewerViewItemsRadioChoice">
<div class="exportLabelWrapper">
<div class="quantumWizTogglePaperradioEl docssharedWizToggleLabeledControl freebirdThemedRadio freebirdThemedRadioDarkerDisabled freebirdFormviewerViewItemsRadioControl" jscontroller="EcW08c" jsaction="click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseleave:JywGue; touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventMouseEvents=true|preventDefault=true); touchcancel:JMtRjd; focus:AHmuwe; blur:O22p3e; keydown:I481le; contextmenu:mg9Pef" jsshadow="" aria-label="Männlich" tabindex="0" data-value="Männlich" aria-describedby=" i5" role="radio" aria-checked="false" aria-posinset="1" aria-setsize="3">
<div class="quantumWizTogglePaperradioInk exportInk"></div>
<div class="quantumWizTogglePaperradioInnerBox"></div>
<div class="quantumWizTogglePaperradioRadioContainer">
<div class="quantumWizTogglePaperradioOffRadio exportOuterCircle">
<div class="quantumWizTogglePaperradioOnRadio exportInnerCircle"></div>
</div>
</div>
</div>
<div class="docssharedWizToggleLabeledContent">
<div class="docssharedWizToggleLabeledPrimaryText">
<span dir="auto" class="docssharedWizToggleLabeledLabelText exportLabel freebirdFormviewerViewItemsRadioLabel">Männlich</span>
</div>
</div>
</div>
</label>
<div class="quantumWizTogglePaperradioRadioContainer">
<div class="quantumWizTogglePaperradioOffRadio exportOuterCircle">
<div class="quantumWizTogglePaperradioOnRadio exportInnerCircle"></div>
</div>
</div>
"Männlich" is the text of a label which belongs to the checkbox I want to mark, but not the checkbox as an element by itself.
I have tried
driver.findElement(By.name("name"))
driver.findElement(By.id("id"))
in this case.
You have to work with xpath: https://www.w3schools.com/xml/xpath_syntax.asp
Something like driver.findElement(By.xpath("//div[#class='docssharedWizToggleLabeledContent']/div")) should work.
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 below HTML code, where I have different <'li' class> tags under the <'ul'> tag. Within the <'li'> class tag, I will have tag which needs to be clicked. These are results of some search in webpage, where all the items will be displayed as a list with pagination.
I need to verify if this exist? and if it exists in 3 or 4th Index on the page, I need to click that link. Please let me know how I can get all these items into array and loop them and click any product available at random index.
<ul id ="e1ResultsList">
<li class="e1ListingItem e1GrayShadow e1WhiteGradient e1ListingItemShow">
<div class="ribbon e1Hidden">
<div class="banner">
<div class="text">High Offer</div>
</div>
</div>
<span class="e1ListingImages">
<a class="`jsListingURL`" `href`="/event?`eventid`=7844">
<div class="e1SellerLogo e1Hidden"></div>
</span>
<span class="e1ListingDetails">
<div class="e1ListingTitle">
<a class="jsListingURL e1ListingTitleLink" href="/event?`eventid`=7844">vehicles and buses</a>
</div>
<span id="7844" class="" style="width: 100%;">enter code here
<div class="e1EventDetails">
<span class="e1EventInfo">
<div class="e1EventDescription">
<div class="e1EventID">
<div class="e1ListingCount">
<div class="e1ClosingDate">
<div class="e1EventHighlights">
</span>
</div>
</span>
</span>
</li>
<li class="e1ListingItem e1GrayShadow e1WhiteGradient e1ListingItemShow">
<div class="ribbon e1Hidden">
<span class="e1ListingImages">
<span class="e1ListingDetails">
<div class="e1ListingTitle">
<span id="7846" class="" style="width: 100%;">
</span>
</li>
<li class="e1ListingItem e1GrayShadow e1WhiteGradient e1ListingItemShow">
<div class="ribbon ribbon-white">
<span class="e1ListingImages">
<span class="e1ListingDetails">
<div class="e1ListingTitle">
<a class="jsListingURL e1ListingTitleLink" href="/listing?listingid=310786">2009 International 9200i Truck Tractor</a>
</div>
<span class="e1ListingInfo">
<span id="310786" class="e1ListingOffer" data-lastupdated="1430388219706">
</span>
</li>
<li class="e1ListingItem e1GrayShadow e1WhiteGradient e1ListingItemShow">
<div class="ribbon e1Hidden">
<span class="e1ListingImages">
<span class="e1ListingDetails">
<div class="e1ListingTitle">
<a class="jsListingURL e1ListingTitleLink" href="/listing?listingid=312207">2009 Mack CXU613 Vision Truck Tractor</a>
</div>
<span class="e1ListingInfo">
<span id="312207" class="e1ListingOffer" data-lastupdated="1430388219706">
</span>
</li>
</ul>
You could get a List of the 'a' tag WebElements on the page using the following:
List<WebElement> aTagsList = driver.findElements(By.tagName("a"));
You can then iterate over aTagsList as needed.
Edit:
To click the 4th 'a' tag WebElement in aTagsList, you can use the following:
WebElement requiredElement = aTagsList.get(4);
requiredElement.click();
Is it always the 4:th item you want to press?
If not, you have to know what you want to click. Either it is depending on the text or the "listingid".
driver.findElements(By.cssSelector("a[href*='310786']"));
or
driver.findElement(By.cssSelector("a:(*'2009 International 9200i Truck Tractor'*)")); );