I need to select the element inside the popup in selenium webdriver.THis element inside the div call as ajax popup pleae help me?
<a class="modalCloseImg simplemodal-close" title="Close"></a>
<div class="simplemodal-wrap" tabindex="-1" style="height: 100%; outline: 0px none; width: 100%; overflow: auto;">
<div id="ajaxcart" class="ajaxcart simplemodal-data" style="">
<p class="popup-success-msg"></p>
<div class="popup-content"></div>
<div class="ajaxcart-buttons-container">
<a class="simplemodal-close btn-small-dark-grey"></a>
<a class="ajaxcart-btn btn-small-orange" href="http://www.xcite.com"></a>
</div>
</div>
</div>
Related
I've been trying for hours now to click a link with Selenium Webdriver in Java.
There are 6 links with different div IDs.
Here is the HTML code
<div id="aktion_tr1" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
http://www.e-necker.at<br>Credits: 0.32 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div id="aktion_tr2" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
http://midineroganadopromos.blogspot....<br>Credits: 0.16 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div id="aktion_tr3" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
https://www.haar-pigmentierung.com<br>Credits: 0.27 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div id="aktion_tr4" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
https://www.tierreich-onlineshop.at<br>Credits: 0.27 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div id="aktion_tr5" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
https://www.loluva.com<br>Credits: 0.27 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div id="aktion_tr6" class="aktion">
<div class="zeile1">
<img style="margin-right: 5px; margin-bottom: 5px; max-height:70px;" src="/xxx/app/bilder/no-picture.gif" width="50px" border="0">
</div>
<div class="zeile2">
https://www.main-steam.de/<br>Credits: 0.32 <img src="/xxx/app/bilder/credit20.jpg" align="absmiddle">
</div>
</div><div style="clear:both"></div>
How i can navigate to the links?
thanks for your time
// get parrent div
WebElement divAktion_tr1 = driver.findElement(By.id("aktion_tr1"));
// get all childs a tags
ArrayList<WebElement> aHrefs = divAktion_tr1.findElements(By.tagname("a"));
// declare desired link id or any part of the href or whole href
String linkId1 = "1986070";
// loop child a tags
for (WebElement aHref: aHrefs) {
// get href attribute
String href = aHref.getAttribute("href");
// condition to pinpoint desired link, maybe need use CharSequence instead of String to use Objects.containts(Object)
if (href.contains(linkId1) {
// click
aHref.click();
}
}
Not sure about what exactly you're trying to achieve but, in general, you're just instantiate WebElement object with a css/xpath locator that leads to the link you need and call click() on it
WebDriver link1 = driver.findElement(By.css("#aktion_tr6 .zeile2 a")); // CSS
WebDriver link2 = driver.findElement(By.xpath("//div[#id='aktion_tr4']/div[#class="zeile2"]/a")); // XPATH
link1.click();
link2.click();
I am working on a accordion in Bootstrap V 3.37. I have icons on the accordion which change with open and closed states. When I the state set to collapse init works fine. But when I have the accordion with none of them accordions collapsed in the icons are not working properly.
The icons should be working as:
Arrow facing down on closed state
Arrow facing up on open state
My code is as follows so far:
HTML Structure
<!-- Panel list accordion -->
<div class="panel-group">
<div class="panel-heading-one panel-main-heading-one">
<h4 class="panel-title panel-main-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<img src="../images/image.svg" class="panel-icon">
<p>Title here</p>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body panel-bodymain-one">
<p>Text body here</p>
</div>
</div>
<div class="panel-heading-one panel-main-heading-one">
<h4 class="panel-title panel-main-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<img src="../images/image.svg" class="panel-icon">
<p>Title here</p>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body panel-bodymain-one">
<p>Title body here</p>
</div>
</div>
<div class="panel-heading-one panel-main-heading-one">
<h4 class="panel-title panel-main-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<img src="../images/image.svg" class="panel-icon">
<p>Title here</p>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body panel-bodymain-one">
<p>Text body here</p>
</div>
</div>
</div>
</div>
<!-- End panel list accordion -->
CSS
.panel-heading-one .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings';
content: "\e113";
float: right;
color: #ffffff;
height: 24px;
width: 40px;
background-color: #000000;
}
.panel-heading-one .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e114";
}
Screenshots attached also.
Closed state - still point up:
Open state is fine as it points up:
Any help would be great.
Change your css to:
.panel-heading-one .accordion-toggle:after{
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: #ffffff;
height: 24px;
width: 40px;
background-color: #000000;
}
.panel-heading-one .accordion-toggle[aria-expanded="true"]:after {
/* symbol for "opening" panels */
content: "\e113";
}
.panel-heading-one .accordion-toggle[aria-expanded="false"]:after {
/* symbol for "collapsed" panels */
content: "\e114";
}
And it will work perfectly.
Extra: In your accordion you have used same href='#collapseThree'
for last and second last item. When you will click on last element, it
will open second last item. So change your href in last element.
I am unable to send keys to a searchable dropdown. I can expand the dropdown using:
(//*/label[contains(text(),'Country of company registration')]/following-sibling::div//span[3]/span).click();
But when I try to send some keys to the search field I get:
org.openqa.selenium.ElementNotInteractableException: Element <div class="Select-input"> is not reachable by keyboard
Xpath I'm using for search field "Select-input" is:
//*/label[contains(text(),'Country of company registration')]/following-sibling::div//span/div[2]
I've also tried to send text to "Select-value" but I get a similar error. Xpath for "Select-value" is:
//*/label[contains(text(),'Country of company registration')]/following-sibling::div//span/div[1]
Full object:
<div class="form-group">
<label class=" form-control-label" for="countryCode">Country of company registration</label>
<div class="Select Select--single is-clearable is-searchable has-value">
<div class="Select-control">
<span id="react-select-12--value" class="Select-multi-value-wrapper">
<div class="Select-value">
<span id="react-select-12--value-item" class="Select-value-label" role="option" aria-selected="true">United Kingdom</span>
</div>
<div class="Select-input" style="display: inline-block;">
<style>input#undefined::-ms-clear {display: none;}</style>
<input role="combobox" aria-expanded="false" aria-owns="" aria-haspopup="false" aria-activedescendant="react-select-12--value" value="" style="width: 19px; box-sizing: content-box;"/>
<div style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-size: 16px; font-family: "Larsseit",sans-serif; font-weight: 400; font-style: normal; letter-spacing: normal; text-transform: none;"/>
</div>
</span>
<span class="Select-clear-zone" title="Clear value" aria-label="Clear value">
<span class="Select-clear">×</span>
</span>
<span class="Select-arrow-zone">
<span class="Select-arrow"/>
</span>
</div>
</div>
</div>
*Apologies for the formatting.
Edit: I do not believe my question is a duplicate of the one suggested. I have put lengthy waits and also an explicit wait to ensure the dropdown has expanded. I think the problem might be due to the dynamic nature of the dropdown and hence not being able to get an accurate xpath. This is just a guess. Thanks.
I think the problem may be in that you are not trying to do the input in the input element, but in the div element.
Could you try:
//input[#role='combobox']
And let me know if it works for you.
I'm using Bootstrap v3.0.2. I want to display a series of divs next to each other, float: left then center that group in a full width row. What I get are the divs lined up next to each other but the entire group floats left.
I've tried numerous suggestions from this site but have been unable to make any of them work.
I have HTML:
<div id="wrapper">
<div class="container">
<div id="wrapBoxRow" class="row">
<div id="boxRow" class="col-md-12 col-xs-12">
<div id="boxWrap">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
</div>
</div>
</div>
</div>
</div>
Css:
#boxWrap, #boxRow, #wrapBoxRow
{
float: none;
margin: 0 auto;
}
.smallBox
{
border: 3px solid #ddd;
float: left;
width: 20px;
height: 20px;
margin-right: 12px;
}
I've tried this without bootstrap and couldn't get it to work either:
<div id="boxWrap">
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
<div class="smallBox"></div>
</div>
Please try the below CSS to horizontally center your div
#boxWrap, #boxRow, #wrapBoxRow
{
display: table;
margin: 0 auto;
}
You can find working code here http://bootply.com/92723
I need to place a div below my top navbar which should not scroll with the page content just like the navbar.
I've tried to create it as a second navbar but it is still scrolling or causing a blank area above the two navbars.
How can I do this?
UPDATE
In this sample the green bar is on top of the navbar, but I need it to stay below the navbar: http://jsfiddle.net/julianonunes/y8YqK/
If I move the green bar code (code sample below) before the navbar, it is hidden by the navbar.
Ex:
<div class="navbar navbar-decoration navbar-fixed-top"></div>
<div class="navbar navbar-default navbar-remote navbar-fixed-top">
<div class="navbar-header"> Brand
</div>
</div>
Ok. The problem is your second div includes 'navbar-fixed-top' which is glueing it to the top of your screen. You don't want it fixed to the top - you just want it fixed in place below the main navbar. Change your html for the second nag to:
<div class="navbar navbar-default navbar-remote navbar-decoration ">
And add to your navbar-decoration class:
width: 100%
position: fixed;
You may have tried this already, but in the css for the second navbar put
position: fixed;
If you don't want to add to your stylesheet, you can put it in the div like this:
<div style="position: fixed;"> </div>
I am not sure, but you may also have to add display:block like this:
<div style="position: fixed; display: block;"> </div>
With Bootstrap, use this logic within their html/css:
<div class="navbar" style="position: fixed; display: block;">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
My last guess:
<div class="navbar" style="margin-top: 10px;">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
Hope one of those works.
I've got it fixed by adding margin-top to the second navbar with navbar-fixed-top.
<div class="navbar navbar-default navbar-remote navbar-fixed-top">
<div class="navbar-header"> Brand
</div>
</div>
<div class="navbar navbar-decoration navbar-fixed-top"></div>
CSS
.navbar-decoration {
margin-top: 50px;
min-height: 5px;
max-height: 5px;
/* ... */
}