I have a map in my angular application OpenLayers map.
During the test using testcafe, I have to zoom out, but I have no way how to do that.
I only have to put my mouse at the center of the screen, and then scroll down to zoom out.
Already tried using ClientFunction with scrollBy and etc but nothing happens in map.
Thank you
Find out on which element the handler you need hangs and what event it listens to. This is most likely a 'mousewheel' event. This should help you:
const zoom = ClientFunction(zoomSize => {
const event = new WheelEvent('wheel', { deltaY: zoomSize });
document.querySelector('#zommed-element').dispatchEvent(event);
});
Related
I'm using canvas (phaser.io game framework) to make games and would like to do selenium tests. Sadly I can't replay recorded actions on a canvas.
For example I can't replay the click on the button here https://phaser.io/examples/v2/input/button-open-popup
I get this in the log:
1.Trying to execute open on /examples/v2/input/button-open-popup... Success
2.Trying to execute selectFrame on index=0... Success
3.Trying to execute clickAt on css=canvas with value 422,502... Success
But nothing happens on the screen and the popup is not poping up.
Is there a problem with clicking on canvas through Selenium IDE or maybe I'm doing something wrong?
I did some automated tests for Phaser games.
Let's take an example, I have to click on a menu button.
The way I managed to click on the button precisely every time is that I created a html page, with the same width and height as my canvas ( first, I decided the size of the chrome window, for me I used 800x900, and then get the canvas size), and in my html page I only put javascript to output me the positions where I click.
So basically I created a html, with the same dimension as my canvas, and clicked on it at the approximate position of my canvas button.
Here is the code I've used for my tests:
var mainState ={
preload: function(){
},
create: function(){
game.stage.backgroundColor = '#71c5cf';
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
},
update: function(){
getcoordinates();
}
};
function getcoordinates(){
if (game.input.mousePointer.isDown){
var x = game.input.activePointer.position.x;
var y = game.input.activePointer.position.y;
console.log("x" + x, "y" + y);
var worldx = game.world.centerX;
var worldy = game.world.centerY;
console.log("world x" + worldx, "world y"+ worldy);
}
};
var game = new Phaser.Game(384,683, Phaser.CANVAS);
game.state.add('mainState', mainState);
game.state.start('mainState');
As for checking if my action was succesfull, I used JavascriptExecutor. And in Selenium I've created some functions that do just that, navigate to coordinates and execute click.
I'm using dojo toolkit dijit.layout.TabContainer to switch 3 tabbed pages.
Right now I click on tabs to switch them, but I want to switch them by mouse over instead.
Can a TabContainer be configured to switch by mouse over, or should I write a code to handle mouse over events to explicitly switch tabs?
I'd appreciate any suggestions!
-Sari
Yes. For this functionality, we need to add the onmouseover event to the tabs label fields. Add this code inside the dojo/ready (or addOnLoad) function.
require(["dojo/ready","dojo/query"], function(ready,query){
ready(function(){
var tabs = dijit.byId("TabContainerID");
query("#TabContainerID.dijitTabInner").onmouseover(function(evt){
var tablabelid = dijit.getEnclosingWidget(evt.target).id;
var currentId = dijit.byId("TabContainerID").selectedChildWidget;
var tabwidid = tablabelid.split("_").pop();
if(tabwidid && currentId!=tabwidid) {
tabs.selectChild(tabwidid);
}
});
});
});
I was trying to implement MarkerCluster (MS) with
Overlapping Marker Cluster (OMS). Everything seems to work just fine.
However, I am looking to modify the way OMS is works so that if I click on a cluster that has 2 points under it
When I click on any Cluster with 2 points in it with exact same geo location, its opens a marker and when I am clicking on that marker it's opening spider with 2 markers.
What I want when I am clicking on the
Cluster, straight a way it will open up spider with 2 markers, already
spend lot of times but still nothing worked.
I already tried many solutions, like
1.
I can track the marker when I am adding to OMS(oms.addMarker), and can
click depending on zoom_changed event of google map, but its not firing
spiderfy rather its firing click event of what we added to markers.....
2.
I have see a event spiderfy, so I tried to trigger that event with a
marker object (oms.trigger('spiderfy', marker);) but nothing working...
Here I am adding code snippet too:
mc = new MarkerClusterer(map, markers.locations, mcOptions);
google.maps.event.addListener(mc, 'clusterclick', function(cluster) {
enter code hereclusterClicked = true;
// HERE WE WANTS TO FIRE SPIDER FUNCTIONALITY ...
});
I could solve this problem, first of all it is obvious that you have implemented and Overlapping Xluster Marker Marker Cluster in your google maps.
My solution is something very simple.
We capture the click event of markerCluster.
obtain the markers of markerCluster.
check whether all the markerCluster markers are in the same position.
if they are in the same position we make a click event trigger the latter obtained the markerCluster marker.
In short this is the code:
var markerClusterer = new MarkerClusterer(map, allMarkers, {styles: styles[0], clusterClass: 'poiCluster', maxZoom:18});
google.maps.event.addListener(markerClusterer, 'click', function(cluster) {
var markers = cluster.getMarkers();
if(estanTodosEnLaMismaPosicion(markers)){
//to wait for map update
setTimeout(function(){
google.maps.event.trigger(markers[markers.length-1], 'click');
},1000)
}
return true;
});
function estanTodosEnLaMismaPosicion(markers){
var cont=0;
var latitudMaster=markers[0].getPosition().lat();
var longitudMaster=markers[0].getPosition().lng();
for(var i=0;i<markers.length;i++){
if(markers[i].getPosition().lat() === latitudMaster & markers[i].getPosition().lng() === longitudMaster ){
cont++;
}else{
return false;
}
}
if(cont==markers.length){
return true;
}else if(cont<markers.length){
return false;
}
}
I just started using Leaflet and Marker Clusterer to organize the markers.
Problem #1: When an unclustered marker is clicked, no popup appears.
Problem #2: When a cluster is clicked several times, all the markers within that cluster appears, and when one of this marker is clicked, its popup appears! However, after closing the popup by clicking on the map, clicking on any of these clustered markers do not open any popups!
If I only have 3 unclustered markers, the popup works fine. However, as more markers are added, once a cluster forms, clicking on the marker within any cluster will not cause the popup to open!
Initializing markerclusterer
markers = new L.MarkerClusterGroup();
map.addLayer(markers);
All markers added to markercluster markers
A loop calls on the render function to create the marker and add it to the markerclusterer's array markers. (ignore the backbone.js code)
ListingMarkerView = Backbone.View.extend({
template: _.template( $('#tpl_ListingMarkerView').html() ),
render: function() {
// Create marker
var content = this.template( this.model.toJSON() );
var marker = new L.marker(
[this.model.get('lat'), this.model.get('lng')],
{content: content});
marker.bindPopup(content);
// Add to markerclusterer
markers.addLayer(marker);
}
});
Without markerclusterer
If I add the marker directly to map instead of the markerclusterer array markers, the popups work fine, so I guess the problem has something to do with markerclusterer.
Did I do something wrong that resulted in such behavior of the popups? All help appreciated, thanks!
From what little I know of the cluster marker group, you should do this:
var markerGroup = new L.MarkerClusterGroup();
markerGroup.on('click', function(ev) {
// Current marker is ev.layer
// Do stuff
});
To add an event handler to the cluster layer instead, do this:
markerGroup.on('clusterclick', function(ev) {
// Current cluster is ev.layer
// Child markers for this cluster are a.layer.getAllChildMarkers()
// Do stuff
});
Oh, and read the github README carefully, it's all in there...
Make sure you have the right versions of everything in your Leaflet + Clusterer stack (Js and Css). Compare against the examples in the Clusterer Github repo.
can anyone please explain, with an example if possible, how to load dynamic content inside an iscroll div and assign a new height to it?
I can get it to work but I can't control the height of the scroll for the new content.
I'm new to all this and have no clue were to start.
here's what I'm working on:
http://homepage.mac.com/jjco/test/index7.html
when the page is loaded you see the scroll bar where there's no content...
clicking on print/damm (shows the height I originally set for this content)
clicking on print/fcbarcelona (maintains the same height and position of the scroll you used before) as you see it's not working as it should.
obviously, I don't want the scroll to be there when it's not necessary.
any help would be greatly appreciated.
It's better to use the refresh() method in iScroll, which will recalculate the height.
myScroll.refresh();
I had a similar problem, and just refresh() didn't help, so didn't help destroying and recreating iScroll. In my case I was loading a lot of elements into iScroll div. What did solve the problem is setTimeout(). As MASTERING THE REFRESH() METHOD said adding even 0ms to a setTimeout() would solve a lot of problems. In my case it was 500ms. =
here is code sample:
var myScroll;
function createIScroll(){
myScroll = new iScroll('wrapper');
}
function iScrollRefresh(){
setTimeout(function(){
myScroll.refresh();
}, 500);
}
$ajax(){
//receiving data
}
function someFunction(){
//dynamic content is created
iScrollRefresh();
}
My problem was that refresh() function was executed before content was inserted into DOM, so increasing timeout helped. I hope it helps to beginners like me.
try this, when you insert your new data into iScroll do these steps
//myScroll is a global variable you initialize iScroll on
myScroll.destroy();
myScroll = null;
loaded();//this is a functions where you have have your iScroll initializer
To watch height changes:
setInterval(function () {
var newScrollerHeight = $scroller.innerHeight();
if (newScrollerHeight !== prevScrollerHeight) {
prevScrollerHeight = newScrollerHeight;
myScroll.refresh();
}
}, 500);
Take a look at iScroll4
In iscroll.js, I see experimental option: checkDOMChanges: false,// Experimental You can enable and use it.