Using Selenium Javascript
driver.wait(until.elementLocated(By.css(".handle.handler1")), 5000);
var slider = driver.findElement(By.css(".handle.handler1"));
slider.then(function (elem) {
driver.actions().dragAndDrop(elem, {x: 25, y: 0}).perform();
});
I tried to put this code in loop and I see slider is selected but it does not move
Related
I want to show a video which starts to run automatically and loops infinitely in my adobe portfolio website. I tried using YouTube embedded video with autoplay and loop options (see below code), however, every time the video ends there is a black refresh screen before it starts again which ruins the appearance of my website. The video format I'm using is .mp4. I know that with .gif file this problem can be solved, however, the video quality will not be sufficient. I tried downloading the video into the portfolio website directly, however, I couldn't make it loop or autoplay.
I would appreciate your help in this matter.
Thanks, Tal
The code:
<iframe width="1920" height="1080"
src="https://www.youtube.com/embed/youtubelink?rel=0&autoplay=1&controls=0&loop=1&playlist=youtubelink&controls=0&showinfo=0"
frameborder="0" allowfullscreen>
</iframe>
After some research I've finally got it working, the solution is to use the API iframe embed code (https://developers.google.com/youtube/iframe_api_reference) and instead of using the loop parameter you make use of the onPlayerStateChange function. Here is a code example:
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: '<?php the_field('homepage_video_background_id'); ?>',
playerVars: {
modestbranding: 0,
autoplay: 1,
controls: 0,
showinfo: 0,
wmode: 'transparent',
branding: 0,
rel: 0,
autohide: 0,
origin: window.location.origin
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
player.playVideo();
}
}
</script>
This method still flashes an instant black screen before restarting the video. If you need a smoother loop use this;
'onStateChange': function (event) {
var YTP=event.target;
if(event.data===1){
var remains=YTP.getDuration() - YTP.getCurrentTime();
if(this.rewindTO)
clearTimeout(this.rewindTO);
this.rewindTO=setTimeout(function(){
YTP.seekTo(0);
},(remains-0.1)*1000);
}
}
I'm trying to figure out this problem myself. I'm currently using Adobe Portfolio.
Are we allow to add code within the Embed box?
This is a specific Leaflet/AngularJS question and i hope someone can help me.
I use Leaflet (0.7.7) in an AngularJS Application with the ui-leaflet(1.0.0) directive. angular-ui/ui-leaflet
Everything works fine except of tapping the markers on the map for showing the popup on mobile devices (on Desktops everything works fine!). The click event is never fired. Instead of the click event on mobile devices the touchstart and the touchend events are fired while "tapping" on a marker.
In the _onUp Method which is being executed after the touchend event there is a little snippet which should perform a simulated click event on the tapped target.
// simulate click if the touch didn't move too much
if (this._isTapValid()) {
this._simulateEvent('click', first);
}
I included some debug messages and my application executes the _simulateEvent() Method after tapping on a marker.
The _simulateEvent() Method simply dispatches a click event on the tapped target:
var simulatedEvent = document.createEvent('MouseEvents');
simulatedEvent._simulated = true;
e.target._simulatedClick = true;
simulatedEvent.initMouseEvent(
type, true, true, window, 1,
e.screenX, e.screenY,
e.clientX, e.clientY,
false, false, false, false, 0, null);
e.target.dispatchEvent(simulatedEvent);
But then nothing else happens. The Popup dont appear. When i change the _simulateEvent() Method and "force" a click on the target everything works fine.
e.target.click();
The popup opens on tapping the marker.
Can someone maybe help me or explain me why the official implementation dont work for me?
EDIT:
My snippet for adding markers to the Map. I have an array of cities. For each city i add a marker to the markers.
addMarker(city) {
this.markers[city.id] = {
lat: city.coordinates.latitude,
lng: city.coordinates.longitude,
clickable: true,
dragable: false,
focus: false,
message: markerTemplate,
getMessageScope: _ => {
let $childScope = this.$scope.$new();
this.cities.map((_city) => {
if (_city.id == city.id) {
$childScope.city = _city;
}
});
$childScope.switchToCity = () => {
this.switchToCity(city.id);
};
return $childScope;
},
icon: {
iconUrl:'/images/pin_home.png',
iconSize: [40, 46],
iconAnchor: [20, 46]
},
label: {
message: city.name,
options: {
noHide: true
}
}
};
}
The markerTemplate is a AngularMaterial md-card directive with some informations about the city. Angular Material md-card
Then i pass the markers array to the leaflet drective:
<leaflet width="100%" height="100%" defaults="vm.mapOptions" maxbounds="vm.maxBounds" markers="vm.markers" lf-center="vm.center" id="world_map"></leaflet>
Where vm is my controller.
Use viewport height and viewport width instead of percentage in the leaflet directive.
<leaflet width="100vw" height="100vh" defaults="vm.mapOptions" maxbounds="vm.maxBounds" markers="vm.markers" lf-center="vm.center" id="world_map"></leaflet>
Also make sure you diable the tap on the container
<ion-content data-tap-disabled="true">
i need to swipe an item and need to click on a button in that item, i used this the test is success but i could not view that button
this test case is written to swipe left and make a button visible and click on that button
it('should delete a product',function(){
browser.driver.actions().mouseMove({x:-50,y:0}).perform();
browser.sleep(3000);
});
could someone help me to swipe
the delete button is
<ion-option-button ng-show="!userService.isOffline" class="button button-assertive button disable-user-behavior" on-tap="deleteLead(leads)">Delete</ion-option-button>
I am doing something similar, with an ion-list, with ion-items, and ion-option-buttons. My swipe works, and looks like this:
var elements = element(by.id("item-list")).all(by.tagName("ion-item"));
var item1 = elements.get(0);
item1.getLocation().then((location) => {
var startLocation = {
x: location.x + 300,
y: location.y + 50
}
var newLocation = {
x: startLocation.x - 100,
y: startLocation.y
};
browser.driver.touchActions()
.tapAndHold(startLocation)
.move(newLocation)
.perform();
}
So I think you should use touchActions() instead of actions()
By the way, does on-tap work? Why not using ng-click?
There is another solution if the above solution of using tapAndHold is not working for anyone. You can use also use flickElement.
const offset = {x: -50, y: 0};
const targetElement = element(by.css(`selector`)); // This should be the element which is visible on your screen and you want to swipe
await browser.driver.touchActions()
.flickElement(targetElement, offset, 200)
.perform();
The above code is to swipe left the element.
To swipe right you can use:
const offset = {x: 50, y: 0};
I am using EXTJS 4 with IE 8 for my project. I created a one animation for sequence of small circles. At one interval of 1 second one circle disappeared and other circle disappeared.
Code :-
me.startAnimation=function(circles,color,direction,startIndex,initIndex)
{
try
{
circles.items[startIndex].animate({
duration: 0,
to: {
fill:'#fff'
}
}).animate({
delay: 1000,
to: {
fill:color
},
listeners: {
afteranimate: function() {
// Execute my custom method after the animation
if(direction==='direct')
startIndex++;
else
startIndex--;
if(startIndex===circles.length || startIndex<0)
startIndex=initIndex;
this.startAnimation(circles,color,direction,startIndex,initIndex);
},
scope: this
}
});
}
catch(e)
{
return;
}
}
So this animation is worked fine in Chrome and Firefox but in IE 8 Created a problem. IN IE 8 circle is not disappeared completely as show in above image. So, where is the problem out of three (IE 8, EXTJS 4, ANIMATE FUNCTIOn)...?
i´m using the openlayers drawing example inside my mobile JS (qooxdoo) app and all works fine except that the drawing cursor is above the viewport
so I can draw but I don´t see the cursor and I can only see the drawing after I scroll down.
I have used this qooxdoo example as a base. I have also added all the css rules from the openlayers example to my qooxdoo styles.
Seems like a css position issue, but I can´t seem to find it.
Any help would be appreciated.
/**
* Loads JavaScript library which is needed for the map.
*/
_loadMapLibrary: function() {
var self = this;
var req = new qx.bom.request.Script();
var options = {
singleTile: true,
ratio: 1,
isBaseLayer: true,
wrapDateLine: true,
getURL: function() {
var center = self._map.getCenter().transform("EPSG:3857", "EPSG:4326"),
size = self._map.getSize();
return [
this.url, "¢er=", center.lat, ",", center.lon, "&zoom=", self._map.getZoom(), "&size=", size.w, "x", size.h].join("");
}
};
req.onload = function() {
var vector = new OpenLayers.Layer.Vector('Vector Layer', {
styleMap: new OpenLayers.StyleMap({
temporary: OpenLayers.Util.applyDefaults({
pointRadius: 16
}, OpenLayers.Feature.Vector.style.temporary)
})
});
// OpenLayers' EditingToolbar internally creates a Navigation control, we
// want a TouchNavigation control here so we create our own editing toolbar
var toolbar = new OpenLayers.Control.Panel({
displayClass: 'olControlEditingToolbar'
});
toolbar.addControls([
// this control is just there to be able to deactivate the drawing
// tools
new OpenLayers.Control({
displayClass: 'olControlNavigation'
}), new OpenLayers.Control.ModifyFeature(vector, {
vertexRenderIntent: 'temporary',
displayClass: 'olControlModifyFeature'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Point, {
displayClass: 'olControlDrawFeaturePoint'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Path, {
displayClass: 'olControlDrawFeaturePath'
}), new OpenLayers.Control.DrawFeature(vector, OpenLayers.Handler.Polygon, {
displayClass: 'olControlDrawFeaturePolygon'
})]);
var osm = new OpenLayers.Layer.OSM();
osm.wrapDateLine = false;
map = new OpenLayers.Map({
div: 'googleMap',
projection: 'EPSG:900913',
numZoomLevels: 18,
controls: [
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}), new OpenLayers.Control.Zoom(), toolbar],
layers: [osm, vector],
center: new OpenLayers.LonLat(0, 0),
zoom: 1,
theme: null
});
// activate the first control to render the "navigation icon"
// as active
toolbar.controls[0].activate();
}
req.open("GET", this._mapUri);
req.send();
},
Please check the z-Index of the cursor's class. The best way is to modify the z-Index through Chrome's debugger console or Firebug.
Is there any live example of your application available?