<div class="alertCount" tooltip="" data-placement="top" data-toggle="aa" title="" data-original-title="Bin">
<img src="sample/red.png" style="width:20px">
<span class="ng-binding" style="font-weight: bold; margin-left: 5px;margin-top: 5px">0</span>
</div>
<div class="alertCount" tooltip="" data-placement="top" data-toggle="aa" title="" data-original-title="Bin">
<img src="sample/green.png" style="width:20px">
<span class="ng-binding" style="font-weight: bold; margin-left: 5px;margin-top: 5px">0</span>
</div>
i want to print only text from red.png's div.
That image doesn't actually contains the text but what I guess is that its the following sibling Span which has a text '0' If I understood it correctly then use xpath as it is in below java code :
String Text = driver.findElement(By.xpath("//img[#src='sample/red.png']/following-sibling::span")).getText();
and print the Text.
Related
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 trying to create an input that has a button to the right that contains an icon and can be clicked a bit like this
Here is my code so far
http://www.bootply.com/udRtNLsCgV
<div class="input-group">
<input class="form-control" placeholder="Select area...">
<span class="input-group-addon glyphicon glyphicon-edit" onclick="openDialog()">Area</span>
</div>
My problem is that the font in the button doesn't seem to be the default font and the input is far too wide
Include your icon separately (inside div with input-group-addon class).
You can control width of input group in CSS.
HTML:
<div class="input-group">
<input class="form-control" placeholder="Select area...">
<span class="input-group-addon" onclick="openDialog()"><i class="glyphicon glyphicon-edit"></i> Area</span>
</div>
CSS:
.input-group {
width: 200px;
}
.input-group-addon > a {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
BOOTPLY
The label and button are not vertical aligned. The button floats up. I've searched and tried those solutions but they did not work. Head thoroughly banged against wall.
Here's the fiddle. http://www.bootply.com/5877LkksdX
<div class="row ">
<div class="col-xs-2 ">
<h3><label class="label label-primary">
Student Information</label></h3>
</div>
<div class="col-xs-2 ">
<input id="Button3" type="button" value="Add Student" class="btn btn-success btn-sm">
</div>
</div>
The "Student Information" text is wrapped in an H3 tag which has margin-top: 20px; and margin-bottom: 10px; I suggest you take it out of the H3 and create a custom CSS class for it.
HTML
<div class="mytitle">
<label class="label label-primary">Student Information</label>
</div>
CSS
.mytitle {
font-size: 24px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
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>