I am new with protractor and I am facing some issues with mouse events. I am trying to hover over one of the ng-repeat items and then click on one of the menu options that they appear on top of each one of them on mouse over.
What I tried to do is:
var list-element= element.all(by.repeater('element in list'));
list-element.getText().then(function (value) {
browser.actions().mouseMove(value[0]).perform();
});
element.all(by.css('i.icon.x.blue')).then(function(menu-item) { `
element(menu-item[0]).click();
});
seems like hovering is not recognized and the element to click on cannot be found.
You should not be using getText().
From what I understand, you should be using something like this:
var list-element = element.all(by.repeater('element in list')).first();
browser.actions().mouseMove(list-element).perform();
list-element.all(by.css('i.icon.x.blue')).first();
Related
i am learning react+typescript. i want to implement a control like fluentui dropdown:
basically I draw a div and set its position 'relative' then use absolute layout on the dropdown panel. but there is a problem:
how to dismiss the dropdown when click outside area?
Can you share good practices?
Let's assume dropdown is dom node of your dropdown area
and dismissDropdown function to dismiss it.
Then your code could look like this:
window.addEventListener("click", function (e) {
// if outside of dropdown
if (!dropdown.contains(e.target)) {
dismissDropdown()
}
});
contains: https://developer.mozilla.org/en-US/docs/Web/API/Node/contains
Basically we check if element on which user clicked is inside dropdown or dropdown itself, and if not then dismiss it.
I'm using Material-UI component.
This one from git : https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/tabs/ScrollableTabsButtonAuto.js
My main problem is when i use the scroll button, that scroll too much ( i have lot of tabs, something like 20 tabs ). So when i click on scroll button, that scroll to the right a lot and i lose my active tab.
I have tried to check the code of Tabs.
I found the 2 function i have to override.
These functions are inside that js code:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tabs/Tabs.js
var handleStartScrollClick = function handleStartScrollClick() {
moveTabsScroll(-tabsRef.current[clientSize]);
};
var handleEndScrollClick = function handleEndScrollClick() {
moveTabsScroll(tabsRef.current[clientSize]);
};
If i modify it on node_modules directy that work well, here an exemple :
var handleStartScrollClick = function handleStartScrollClick() {
moveTabsScroll(-tabsRef.current[clientSize]/10);
};
var handleEndScrollClick = function handleEndScrollClick() {
moveTabsScroll(tabsRef.current[clientSize]/10);
};
So now when i click on scroll button i have good result, it's scrolling step by step. But i can't directly overide into node_modules.
How can i do to do it correctly & properly please ?
I have form and grid in kendo window modal, I want to refresh the screen everytime user open the modal window, I have used refresh() but its not working...any suggetion will be appreciated....
So far tried code...
main.html
<div kendo-window="viewAttestorkWin" options="attWinOptions" k-modal="true"></div>
main.js
$scope.openAttestorSearch = function(){
$scope.viewAttestorkWin.refresh();
attestorConfig.attestorModalWinConfig.title = 'Add Attestor(s)';
$scope.viewAttestorkWin.setOptions(attestorConfig.attestorModalWinConfig);
$scope.viewAttestorkWin.open().center();
};
It should work properly with your code right now, yet I suspect setOptions make it didn't. Have you try to call the refresh method after window is open?
$scope.openAttestorSearch = function(){
attestorConfig.attestorModalWinConfig.title = 'Add Attestor(s)';
$scope.viewAttestorkWin.setOptions(attestorConfig.attestorModalWinConfig);
$scope.viewAttestorkWin.refresh().center().open();
};
I have a button and in my controller i created one mouse over event and a click event for that button's id. But everytime when i click button it goes to the mouseover event function only, but when I comment the mouseover it goes to the click event function nicely. Why this is so? I am using ext4.1
thanks in advance.
me.control({
'#notificationIconId':{
click:me.notificationClick
},
'#notificationIconId':{
mouseover:me.notificationMouseOver
}
});
},
notificationMouseOver : function (){
alert('1')
},
notificationClick :function(menuitem)
{
alert('2')
}
You're using two times the same key '#notificationIconId' in a Javascript object... So, the last one is overriding previous ones.
You can add multiple listeners for the same selector:
'#notificationIconId': {
click: me.notificationClick
,mouseover: me.notificationMouseOver
}
Using Wijmo Open ComponentOne's Dropdown, I tried to place it in a registration form that displays when a button is clicked. This form is inside a jquery modal window.
The problem is that it is not displayed like a wijdropdown inside the form.
I supposed that since is was hidden, then it wasn't part of the DOM and so I added a method in the callback of the function that displayed the modal window; when the modal window finishes displaying, then call the .wijdropdown() on the element. However, it didn't work.
In conclusion: the select tag is not being wijdropdowned...
¿Any recommendations?
Script
$(function() {
// show overlay
$('#product-slideshow-overlay-trigger').live('click', function() {
var $registerOverlay = $('#product-slideshow-overlay');
//left position
var positionLeft = ($(window).width() - $registerOverlay.width())/2;
$registerOverlay.css({'left':positionLeft});
//show mask
$('#mask').fadeIn();
$registerOverlay.slideDown(function()
{
console.log("Started");
/**Add WijmoDropdown***/
$('#estado').wijdropdown(function()
{
console.log("Did the wijdropdown");
});
console.log("Ended");
});
return false
});
}); // end document ready function
Refresh the wijdropdown when the dropdown is not hidden:
$('.wijmo_drp').wijdropdown("refresh");
or
Find the wijmo component and check if it's visible or not (styled or not).
And trigger the visiblity changed event when you display the modal window.
if($('.wijmo-wijobserver-visibility').is(':visible'))
{
$('.wijmo-wijobserver-visibility').trigger("wijmovisibilitychanged");
}