Searching from many forums i got the code to hover the mouse over an element
.I want to hover the mouse over a thumbnail image.
i put html element ".thumbnail" as class inside find_element method .I dont know which parameter should i place inside find_element method?
My html element is given below.
<a class="thumbnail">
<span class="badgeFeatured">featured</span>
<img alt="" src="https://do3dm75n3e02m.cloudfront.net/arts/preview_3ds/14/original/open-uri20121128-5897-wh90rf_1354148717.png20121128-5897-194vld7-0?1354148717">
<p>Flourish Happy Birthday</p>
</a>
el = driver.find_element(:class => "thumbnail")
driver.move_to.(el).perform
Due to this problem it does not move mouse over the thumbnail image.
In Webdriver(java), we can perform mouse over action like this:
Actions actions = new Actions(driver);
WebElement imageSpan = driver.findElement(By.className("badgeFeatured"));
actions.moveToElement(imageSpan);
Related
I have an application where I am using ui-bootstrap-tabs. documentation here. With the ng-bs-daterangepicker.
The behavior I am observing is that whenever I put the daterangepicker inside the ui-tab. It is not able to catch the events attached to it.
But when I move that input tag outside the ui-tabs, it's able to catch the events associated with it.
I have created a working plunker to highlight my issue.
<body ng-app="myApp">
<div ng-controller="testController">
<uib-tabset>
<uib-tab index="0" heading="Drivers"></uib-tab>
<uib-tab index="1" heading="Charts">
<input class="btn btn-danger" type="daterange" id="daterange1" ng-model="dates" format="DD MMM" ranges="ranges" />
</uib-tab>
</uib-tabset>
<!-- <input class="btn btn-danger" type="daterange" id="daterange1" ng-model="dates" format="DD MMM" ranges="ranges" /> -->
</div>
</body>
Here there are two input tags. One inside the uib-tab and other outside it.
$scope.dates = {
startDate: moment().startOf('day'),
endDate: moment().endOf('day')
};
$scope.ranges = {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
'Last 7 days': [moment().subtract('days', 7), moment()],
'Last 30 days': [moment().subtract('days', 30), moment()],
'This month': [moment().startOf('month'), moment().endOf('month')]
};
$('#daterange1').on('apply.daterangepicker', function(ev, picker) {
console.log(picker.startDate);
console.log(picker.endDate);
});
The event apply.daterangepicker is not called when I activate the inside input button but is called when I activate the outside one.
My approach
I am guessing it's not a scope issue as highlighted in some posts. Because if it was that, then how come even the date is being populated.
Another thing could be the Known issue column which says
To use clickable elements within the tab, you have override the tab
template to use div elements instead of anchor elements, and replicate
the desired styles from Bootstrap's CSS. This is due to browsers
interpreting anchor elements as the target of any click event, which
triggers routing when certain elements such as buttons are nested
inside the anchor element.
maybe somehow this is stopping the event propagation. I am stuck at this point and can't think of a solution on how to fix it. Hoping the community would help here...
In case of $('#daterange1').on the object to which the event if getting attached must exist at the moment when .on() is invoked.
When daterangepicker is initialized inside Tabs component you could attach event like this:
$("body").on("apply.daterangepicker", "#daterange1", function(e,picker) {
console.log(picker.startDate);
console.log(picker.endDate);
});
Modified plunker
I am trying build a custom dojo 1.9 widget with template support. I need to pass text value and image (stored in POJO) into the widget when I do Instantiation.
I found some example from:
http://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html#quickstart-writingwidgets
there are some templates with text field and button that accept value by using data-dojo-attach-point. But I never find a template example accept image. Does any one have one full example meet my requirement?
<div class="${baseClass}" data-dojo-attach-point="focusNode"
data-dojo-attach-event="ondijitclick:_onClick"
role="menuitem" tabIndex="-1">
<div data-dojo-type="dijit/form/Button"
data-dojo-attach-point="buttonWidget">
My Button
</div>
<span data-dojo-attach-point="containerNode"></span>
</div>
Please help!!
The issue was fixed by myself.
Dojo Dialog and html5 configure tag was used. This way is a work around to support title and image caption, eventually have to wait for dojo LightBoxNano widget (probably 2.0 or newer version) to support image caption.
Dojo snippet code:
var theconfigure = "<figure><img src=\"data:"+returnData.fileType+";base64,"+returnData.fileData+"\" width=\"400\" height=\"300\">"+
"<figcaption>"+returnData.fileDesc+"</figcaption></figure>";
var myDialog = new dijit.Dialog({
title: returnData.relatedLocation,
content: theconfigure,
style: "width: 410px"
});
myDialog.show();
The result looks like:
I am creating a Hand written image Digit recognizer. I have created an HTML canvas for users to draw a digit. When the user clicks on Predict button, the variable which stores canvas.toDataURL should be send to the server.
HTML code which displays 2 buttons, one for Save and one for Clear shown below:
<button type="button" id="save" class="btn btn-default">Predict</button>
<button type="button" id="clear" class="btn btn-default">Clear</button>
I have created a javascript for the id=save as:
var saveButton = document.getElementById("save");
saveButton.addEventListener('click', saveImage);
function saveImage(){
var data = canvas.toDataURL("image/png");
}
I am unable to pass the variable 'data' to server. I can see the base64 encoded png format when I do a window.open(data, '_blank', 'location=0, menubar=0');. But thats not want I want. Any help would really be appreciated. Thanks.
I am opening an MVC view in magnific
I need to show a title (caption) below the modal
But caption is only for image type but I am using Ajax type.
I have set the title attribute on both the hyperlink that I click to open the modal and the root element of the view.
But it never shows up.
How do I do display the title (fixed or dynamic from a grid)? I wonder why author forgot to add this feature?
hyperlink:
<a class="edit-list" title="Edit List!" href="/manage/editlist/100">Edit</a>
Root element of the target page:
<form id="ListEditForm" class="white-popup" title="Edit List" action="/manage/EditList/100">
..fields go here
</form>
I followed this post, but he has markup, I don't:
http://codepen.io/dimsemenov/pen/zjtbr
Initialization:
$('.edit-list').magnificPopup({
type: 'ajax',
midClick: true,
callbacks: {
markupParse: function (template, values, item) {
values.title = item.el.attr('title');
}
}
});
This has been solved. I need to put the right container in the right place to render the title. The plugin won't drop any element to show the title.
I'm writing automated script using Selenium WebDriver with Ruby. In the case, I've to click on 'Cancel' button and following is the html code for it:
<div class="ui-dialog-buttonset">
<button class="otherButtonClass" type="button" role="button" aria-disabled="false">
<span class="ui-button-text">Rename</span>
</button>
<button class="cancelButtonClass" type="button" role="button" aria-disabled="false">
<span class="ui-button-text">Cancel</span>
</button>
</div>
For clicking on 'Cancel' button, I wrote following:
driver.find_element(:xpath, "//button[#class='cancelButtonClass']").click
here click action doesn't happen. I tried sleep, wait.until { element.displayed? } still issue wasn't resolved. The error thrown is 'Element is not visible and hence may not be interacted with'
However, if I perform click action on 'Rename' button, it works:
driver.find_element(:xpath, "//button[#class='otherButtonClass']").click
Please help me to understand why this is happening. I'm confused, 'Rename' and 'Cancel' have similar html code and still clicking on 'Rename' passes and clicking on 'Cancel' fails. Why like this?
You can try the below :
script = <<-end
element = arguments[0];
element.setAttribute('aria-disabled','true');
return element;
end
# select the 'Cancel' button element
elem = driver.find_element(:css,'div.ui-dialog-buttonset>button')[1]
# setting the 'aria-disabled' to true
elem = driver.execute_script(script,elem)
#after enabling the css attribute 'aria-disabled' click on the
#cancel button
elem.click
Using CSS selection will not be a perfect solution in case if the Button CSS are dynamic for any hover actions. Also the Simple way of selecting given element is using the following xpath.
driver.find_element(:xpath, "//span[text()='Cancel']").click