i need to automate following functional flow using selenium webdriver
click on Upload button
select an image from local directory
an Edit image pop-up will appear with crop overlay and crop image button
click on Crop Image button to crop and submit the button
I could select an image using robot however I could not click on an Crop Image button which appears on Edit Image pop-up. please find HTML snippets of Edit Image pop as below
<div id="edt-img-popup" style="left: 193px; position: absolute; top: 1045px; z-index: 902; opacity: 1; display: block;">
<span class="button bClose"><span>X</span></span>
<div id="edited-img"><img style="display: none; visibility: hidden; width: 980px; height: 710px;" src="http://locallocation?img=mQzJ0jI8si.jpg" id="artistImgCrop" height="710.673224715647" width="980"><div class="jcrop-holder" style="width: 980px; height: 710px; position: relative; background-color: rgb(0, 0, 0);"><div style="position: absolute; z-index: 600; width: 980px; height: 653px; top: 0px; left: 0px;"><div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;"><img style="border: medium none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 980px; height: 710px;" src="locallocation?img=mQzJ0jI8si.jpg"><div class="jcrop-hline" style="position: absolute; opacity: 0.4;"></div><div class="jcrop-hline bottom" style="position: absolute; opacity: 0.4;"></div><div class="jcrop-vline right" style="position: absolute; opacity: 0.4;"></div><div class="jcrop-vline" style="position: absolute; opacity: 0.4;"></div><div style="cursor: move; position: absolute; z-index: 360;" class="jcrop-tracker"></div></div><div style="width: 100%; height: 100%; z-index: 320; display: block;"><div class="ord-n jcrop-dragbar" style="cursor: n-resize; position: absolute; z-index: 370;"></div><div class="ord-s jcrop-dragbar" style="cursor: s-resize; position: absolute; z-index: 371;"></div><div class="ord-e jcrop-dragbar" style="cursor: e-resize; position: absolute; z-index: 372;"></div><div class="ord-w jcrop-dragbar" style="cursor: w-resize; position: absolute; z-index: 373;"></div><div class="ord-n jcrop-handle" style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;"></div><div class="ord-s jcrop-handle" style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;"></div><div class="ord-e jcrop-handle" style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;"></div><div class="ord-w jcrop-handle" style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;"></div><div class="ord-nw jcrop-handle" style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;"></div><div class="ord-ne jcrop-handle" style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;"></div><div class="ord-se jcrop-handle" style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;"></div><div class="ord-sw jcrop-handle" style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;"></div></div></div><div style="width: 984px; height: 714px; position: absolute; top: -2px; left: -2px; z-index: 290; cursor: crosshair;" class="jcrop-tracker"></div><input class="jcrop-keymgr" style="position: fixed; left: -120px; width: 12px;" type="radio"><img style="display: block; visibility: visible; width: 980px; height: 710px; border: medium none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; opacity: 0.6;" src="http://locallocation?img=mQzJ0jI8si.jpg" height="710.673224715647" width="980"></div></div>
<!-- This is the form that our event handler fills -->
<form action="javascript:void(0);" method="post" id="img_crp_form">
<input value="0" id="x" name="image[x]" type="hidden">
<input value="0" id="y" name="image[y]" type="hidden">
<input value="980" id="w" name="image[w]" type="hidden">
<input value="653.3333333333334" id="h" name="image[h]" type="hidden">
<input value="980" id="maxW" name="image[maxW]" type="hidden">
<input value="710.673224715647" id="maxH" name="image[maxH]" type="hidden">
<input value="http://locallocation?img=mQzJ0jI8si.jpg" id="slctdImgUrl" name="image[url]" type="hidden">
<input id="cropImage" value="Crop Image" class="btn btn-large btn-inverse" type="submit">
</form>
I've tried following approaches but it did not work
1. switchTo frame
2. window handles
3. wait - implicit, explicit, ajax
any help would be very much appreciated.
Thanks.
Related
<div class="icheckbox_minimal" style="position: relative;">
<input class="checkbox" type="checkbox" value="1" name="order[terms]"
id="order_terms" style="position: absolute; top: -20%; left: -20%;
display: block; width: 140%; height: 140%; margin: 0px; padding: 0px;
background: rgb(255, 255, 255); border: 0px; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%;
display: block; width: 140%; height: 140%; margin: 0px; padding: 0px;
background: rgb(255, 255, 255); border: 0px; opacity: 0;">
</ins>
</div>
How can I set the checkbox for this element?
I tried the following
browser.checkbox(:class => "iCheck-helper").when_present.set
browser.div(:class => "icheckbox_minimal").fire_event :click
you can click on ins tag to set the check box value as given below.
if !browser.checkbox(id: 'order_terms').set? then
puts "not set"
browser.element(class: 'iCheck-helper').click
end
puts browser.checkbox(id: 'order_terms').set?
Try this
browser.checkbox(id: "order_terms").set
When you locate an element, that element has to be checkbox when you use the method checkbox but you are passing the locator of div to checkbox method.
I have a section with 2 rectangles inside a flex container. One of the rectangles simply has a margin-top: - 17%, which is ignored by Firefox. Is there any way to assign a percentage margin in Firefox? (the rectangle slides nicely when the window is resized vs doing nothing if I use pixels as a margin).
Here is a Codepen Example: https://codepen.io/SergiOca/pen/wdQYad
<div class="import-flex">
<div class="export-rectangle">
<h1> Asesoramiento. </h1>
<p>
Test
</p>
</div>
<div class="import-rectangle">
<h1> <span> Oportunidad. </span></h1>
<p>
Test
</p>
</div>
<img src="http://www.gettyimages.com/gi-resources/images/Embed/new/embed2.jpg" alt="" class="import-footer-image img-responsive">
</div>
.import-rectangle {
transition: ease-in-out 1s;
position: relative;
width: 471.7px;
height: 409px;
background-color: #454044;
box-shadow: 0 0 20px 20px rgba(44, 42, 44, 0.1);
z-index: 5;
color: white;
padding: 40px 50px;
margin-top: -17%;
}
.export-rectangle {
position: relative;
width: 471.7px;
height: 407px;
margin-right: 5%;
background-color: #c97c60;
z-index: 5;
color: #454044;
padding: 40px 50px;
}
.import-flex {
display: flex;
position: relative;
}
.import-footer-image {
width: 430px;
height: auto;
margin: 0 auto;
position: absolute;
top: 93%;
left: 30%;
z-index: 100;
}
Firefox has struggled with a bug when using percent for some time, bugzilla bug, so may I suggest you use viewport units instead.
margin-top: -17vw;
Updated codepen
If you need to adjust towards a parent element, CSS Calc might come to rescue if the parents size/position is somewhat fixed.
I am using customized check box icheck in JQ Grid edit and add form but checkbox element is not getting posted to the server even it is checked.
Here is the generated markup for the form:
`<td class="CaptionTD">
Status
</td>
<td class="DataTD">
<div style="position: relative;" id="userGroupBean.isActive_icheck" class="icheckbox_square-green checked">
<input title="" style="position: absolute; opacity: 0;" class="FormElement" role="checkbox" name="userGroupBean.isActive" id="userGroupBean.isActive" offval="0" value="1" checked="" type="checkbox">
<ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;" class="iCheck-helper"></ins>
</div>
</td>`
Is it possible for the JSSOR Banner slider :
http://www.jssor.com/demos/banner-slider.html
To NOT scale the text next to the thumbnails while resizing?
see my site in development :
http://www.hansdietze.com/2014/diamant.php?taal=nl
The text is not scaling and gets unreadable on iPad portrait orientation I'm afraid....
I guess you can use css to make the font-size of the text bigger.
What about replace
<!-- ThumbnailNavigator Skin Begin -->
<div u="thumbnavigator" class="sliderb-T" style="position: absolute; bottom: 0px; left: 0px; height:45px; width:860px;">
<div style="filter: alpha(opacity=40); opacity:0.4; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
<!-- Thumbnail Item Skin Begin -->
<div u="slides">
<div u="prototype" style="POSITION: absolute; WIDTH: 860px; HEIGHT: 45px; TOP: 0; LEFT: 0;">
<thumbnailtemplate style="font-family: 'News Cycle', sans-serif;
font-size:16px;
font-weight:700;
POSITION: absolute; WIDTH: 100%; HEIGHT: 100%; TOP: 0; LEFT: 0; color:#fff; line-height: 36px; padding-left:10px;"></thumbnailtemplate>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- ThumbnailNavigator Skin End -->
with
<!-- ThumbnailNavigator Skin Begin -->
<style>
.thumb_text {
font-family: 'News Cycle', sans-serif;
font-size: 16px;
font-weight: 700;
POSITION: absolute;
WIDTH: 100%;
HEIGHT: 100%;
TOP: 0;
LEFT: 0;
color: #fff;
line-height: 36px;
padding-left: 10px;
}
#media only screen and (max-width: 768px) {
.thumb_text {
font-size: 20px;
}
}
</style>
<div u="thumbnavigator" class="sliderb-T" style="position: absolute; bottom: 0px; left: 0px; height:45px; width:860px;">
<div style="filter: alpha(opacity=40); opacity:0.4; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
<!-- Thumbnail Item Skin Begin -->
<div u="slides">
<div u="prototype" style="POSITION: absolute; WIDTH: 860px; HEIGHT: 45px; TOP: 0; LEFT: 0;">
<thumbnailtemplate class="thumb_text"></thumbnailtemplate>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- ThumbnailNavigator Skin End -->
Also, there is a $Scale option for thumbnail navigator, but it is a bit more complicated to adjust size.
$ThumbnailNavigatorOptions: {
...
$Scale: false,
...
}
This is where the problems for me keeps existing.
Can't seem to figure out what i am doing wrong.
<div class="Flagholder">
<ul class="LangENG" style="position: relative; left: 10%;">
<li style="width: 250px; height: 50px;">
<a href="file://localhost/Users/Andreas/Desktop/Multimedia%20Design/Storcenterapp/en/eng.html" target="_self">
<img src="images/LangENG.png" alt="English" width="50px"></a></li></ul></div>
The CSS as it looks.
.Flagholder {
position: absolute;
overflow: hidden;
left: -5%;
top: 50%;
height: 100%;
width: 100%;
}
.LangENG {
overflow:hidden;
}
ul {
list-style-type: none;
}
.LangENG a {
height:50px;
width:50px;
display: inline-block;
background-repeat: no-repeat;
}