Develop Reference

Re-creating touch-based gestures with Playwright to test mobile viewports

Can someone help me re-create touch-based gestures(swipe, zoom, pinch, etc.) in Playwright to test emulated mobile devices? It has only a tap method out of the box, which works perfectly, but I need a whole set of functionality to test the mobile viewports of our web application.
I have tried so far a couple of scripts that I found online, which are not failing my tests but rather don't work for me for some reason:
await page.evaluate(() => {
const target = document.querySelector("#abc");
target.addEventListener('touchstart', (e) => {
console.log('touch start');
});
function simulateTouchEvent(element, type, touches) {
const touchEvents = [];
touches.forEach((touch) => {
touchEvents.push(new Touch({
clientX: touch.x,
clientY: touch.y,
identifier: touch.id,
target: element,
}));
});
element.dispatchEvent(new TouchEvent(type, {
touches: touchEvents,
view: window,
cancelable: true,
bubbles: true,
}));
}
simulateTouchEvent(target, 'touchstart', [{
id: "123",
x: 10,
y: 10,
}]);
simulateTouchEvent(target, 'touchend', [{
id: "123",
x: 10,
y: 10,
}]);
})
also this
const el = await page.locator(
".selector"
);
const dataTransfer = await page.evaluateHandle(
() => new DataTransfer()
);
await el.dispatchEvent("touchstart", { dataTransfer, steps: 5 });
await el.dispatchEvent("touchend", { dataTransfer, steps: 5 });
and
async function dispatchTouchEvent(
playWright: Page,
type: 'touchstart' | 'touchend' | 'touchcancel' | 'touchmove',
selector: string,
page?: Position,
screen?: Position,
client?: Position,
options?: PageExtraTouchOptions,
) {
await playWright.$eval(
selector,
(el, options) => {
const rect = el.getBoundingClientRect();
const {
client = {},
page = {},
screen = {},
type,
options: touchOpt,
} = options;
const touchObj = new Touch({
clientX: client.x,
clientY: client.y,
identifier: Date.now(),
pageX:
page.x || (client.x !== undefined ? rect.left + client.x : undefined),
pageY:
page.y || (client.y !== undefined ? rect.top + client.y : undefined),
screenX: screen.x,
screenY: screen.y,
target: el,
});
const touchEvent = new TouchEvent(type, {
bubbles: true,
cancelable: true,
...touchOpt,
changedTouches: [touchObj],
targetTouches: [touchObj],
touches: [touchObj],
});
return el.dispatchEvent(touchEvent);
},
{ client, options, page, screen, type },
);
}
await dispatchTouchEvent(
page,
"touchstart",
".selector"
);
await dispatchTouchEvent(
page,
"touchend",
".selector"
);
I recently have been also looking into Playwrights experimental android emulation feature, in the hopes that it might help me to emulate at least an android device, but haven't even been able to even run it because of ECONNREFUSED error.
Would appreciate any help, because I`m completely stuck in here.
Playwright version: 1.23;
OS: Ubuntu Neon KDE 20.04;

How to download and get offline tiles in ionic 3 android app?

I am trying to develop a hybrid ol3 map application using ionic3 with angularjs. I have generated xyz tiles of the map service which I was able to use for online maps. When I tried using them for download to a local directory of mobile and use them I am facing issues. Kindly provide any help which is much appreciated. I I could not trace any errors. Kindly suggest me how to check if any errors to test the maps.
//For downloading the image from server and stores it into mobile directory.
this.file.createDir(this.file.externalRootDirectory, 'Offline/Maps/custom_', true).then((files) => {
this.file.createDir(this.file.externalRootDirectory, 'Offline/Maps/custom_/02_02', true).then((files) => {
}).catch((err) => {
});
}).catch((err) => {
});
const imageURL = 'https://server.com/documents/ionic/path_track/maps/0041_0041.jpeg';
const fileTransfer: FileTransferObject = this.transfer.create();
const imageName = imageURL.split('/').pop();
//alert(imageName+"#"+this.file.externalRootDirectory);
//alert(imageName);
fileTransfer.download(imageURL, this.file.externalRootDirectory+'Offline/Maps/custom_07/02_02/'+imageName).then((entry) => {
//loader.dismiss();
//this.showOfflineButton = true;
}, (error) => {
let alert = this.alertCtrl.create({
message: 'Map is not downloaded '+JSON.stringify(error),
buttons: ['Ok'],
enableBackdropDismiss: false,
cssClass:'alert-error'
});
alert.present();
});
//For retrieving image from the mobile directory and to display into mobile app.
var config = {
"bounds": {
"left" : 68.1060582899974,
"bottom" : 6.72246026992798,
"right" : 97.7525939941406,
"top" : 37.0967391635301
}
};
var bounds = [config.bounds.left, config.bounds.bottom, config.bounds.right, config.bounds.top];
var resolutions = [
0.1186495269281333,
0.0593247634640666,
0.0296623817320333,
0.0148311908660167,
0.0074155954330083,
0.0037077977165042,
0.0018538988582521,
0.000926949429126,
0.000463474714563,
0.0002317373572815,
0.0001158686786408,
0.0000579343393204,
0.0000289671696602,
0.0000144835848301,
0.000007241792415
];
var projection_epsg_no = 4326
var layername = 'seamless_xyz1';
var tileGrid = new ol.tilegrid.TileGrid({
extent: bounds,
resolutions: resolutions,
origin: ol.extent.getTopLeft(bounds),
projection: 'EPSG:4326',
tileSize: [256, 256]
});
var view = new ol.View({
extent: [55.948355423604156, 4.853611184459009, 101.73937104860416, 38.07626743445901],
zoom: 10,
center: [78.48695, 17.41217],
projection: 'EPSG:4326',
resolutions: resolutions
});
var tms_source = new ol.source.XYZ({
projection: 'EPSG:4326',
tileGrid: tileGrid,
url: this.file.externalRootDirectory+'/Offline/Maps/custom_{z}/{x}/{-y}.jpeg'
//url: this.file.externalRootDirectory+'/Offline/Maps/custom_07/02_02/0041_0043.jpeg' (If I am giving static image name then its coming fine but not able to do it dynamically.)
});
var basegroup = new ol.layer.Tile({
source: tms_source,
extent: bounds
});
var mapview;
if(this.Source_lat == undefined || this.Source_long == undefined){
this.current_location1 = 'Location is not available.';
mapview = new ol.View({
projection: 'EPSG:4326',
center: [82.491,21.899],
extent: [66.2329, 7.68083, 98.2223, 39.03874],
maxZoom:16,
minZoom: 8,
zoom: 8
});
}else{
this.current_location1 = this.Source_lat+', '+this.Source_long;
mapview = new ol.View({
projection: 'EPSG:4326',
center: [this.Source_long,this.Source_lat],
extent: [66.2329, 7.68083, 98.2223, 39.03874],
maxZoom:10,
minZoom: 10,
zoom: 10
});
}
map = new ol.Map({
target: 'offline_map',
controls: ol.control.defaults({
zoom: false,
attribution: false,
rotate: false
}),
layers: [basegroup, jsonLayer_net1, jsonLayer_net],
overlays: [jsonoverlay],
view: mapview
});
Thanks in advance

how to get alert when geofence exit notification is fired in cordova

This is asked previously but not in cordova.
Hi all, I want to get alert when user enters the geofence region and also want alert when user exit from the geofence so that I can make entry.
it should work on all cases foreground, background, and even when the app is killed
I'm getting alert when user enters but not when user exits from region.
Any help would be really appreciated .
CODE:
window.geofence.addOrUpdate({
id: "69ca1b88-6fbe-4e80-a4d4-ff4d3748acdb",
latitude: xx.12345,
longitude: xx.12345,
radius: 100,
transitionType:1,
notification: {
id: 1,
title: "Welcome!",
text: "In.",
openAppOnClick: true
}
}, {
id: "69ca1b88-6fbe-4e80-a4d4-ff4d3748acdc",
latitude: xx.12345,
longitude: xx.12345,
radius: 100,
transitionType:2,
notification: {
id: 1,
title: "Bye!",
text: "Out.",
openAppOnClick: true
}
}).then(function () {
navigator.notification.alert('successfully added', function () { });
}, function (reason) {
navigator.notification.alert('failed', function () { });
})
Transition callback function:
which is getting called only only when i am in within region, it is not called when i'm out of the region
window.geofence.onTransitionReceived = function (geofences) {
alert(JSON.stringify(geofences));
}

Where using this plugin : https://github.com/cowbell/cordova-plugin-geofence and depending on you'r needs, be carefull about the following :
Javascript background execution
This is known limitation. When in background your app may/will be suspended to not use system resources. Therefore, any javascript code won't run, only background services can run in the background. Local notification when user crosses a geofence region will still work, but any custom javascript code won't. If you want to perform a custom action on geofence crossing, try to write it in native code.
We can see this exemple into the plugin documention :
window.geofence.onTransitionReceived = function (geofences) {
geofences.forEach(function (geo) {
console.log('Geofence transition detected', geo);
});
};
And if we search into the plugin code we found this (www/TransitionType.js) :
var TransitionType = {
ENTER: 1,
EXIT: 2,
BOTH: 3,
};
So you have to check if this work :
window.geofence.onTransitionReceived = function (geofences) {
geofences.forEach(function (geo) {
if (geo.TransitionType === 2 ) {
// Do what you want
}
});
};
EDIT 1
After adding your code to your primary code, I noticed two things :
First, the documentation specifies that when you want to add several geofences at once you must do so from an array and therefore with several parameters.
It may be nothing but it's better to trust the documentation.
Then, the documentation also specifies
Geofence overrides the previously one with the same id.
And that exactly what you do That may be why the event can't work properly.
If I follow the documentation correctly, you should have something that looks like this :
window.geofence.addOrUpdate({
id: "69ca1b88-6fbe-4e80-a4d4-ff4d3748acdb",
latitude: xx.12345,
longitude: xx.12345,
radius: 100,
transitionType: 3, // Both (Enter and Exit)
notification: {
id: 1,
title: "Welcome!",
text: "In.",
openAppOnClick: true
}
}
).then(function () {
navigator.notification.alert('successfully added', function () { });
}, function (error) {
navigator.notification.alert('failed', function () { });
});
window.geofence.onTransitionReceived = function (geofences) {
geofences.forEach(function (geo) {
console.log('Geofence transition detected', geo);
// Do what you want
});
};

React Native Android transition without animaiton

How do I transition between scenes without animations using Navigator?
When I do a Navigator.replace(), the view just switches instantly, I'd like to replicate this behavior with a Navigator.push() call.
I've been playing around with SceneConfigs and feel like that might be the right solution, but can't get it to work.

I found a hacky solution here. https://github.com/facebook/react-native/issues/1953
var NoTransition = {
opacity: {
from: 1,
to: 1,
min: 1,
max: 1,
type: 'linear',
extrapolate: false,
round: 100,
},
};
return {
...Navigator.SceneConfigs.FloatFromLeft,
gestures: null,
defaultTransitionVelocity: 100,
animationInterpolators: {
into: buildStyleInterpolator(NoTransition),
out: buildStyleInterpolator(NoTransition),
},
};

Problems to capture pictures through Sencha Touch

i'm trying to capture pictures in a app using by Sencha Touch 2.3.1 and Cordova 3.4.1-0.1.0.
Reading the docs (http://docs.sencha.com/touch/2.3.1/#!/api/Ext.device.Camera-method-capture) it looks very easy and simple, but i'm having a very weird experience.
First i create a Sencha Touch app and initialize Cordova on in it
sencha app generate MyApp ./MyApp
cd ./MyApp
sencha cordova init
At this point, when i try to build, it works fine on a real device, android emulator or even on browser.
Then, i changed Main.js to add the capture feature.
Ext.define('CameraTest.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.device.*'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},
html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Camera',
iconCls: 'action',
layout: {
type:"vbox",
pack:"center",
align:"center"
},
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'CameraTest'
},
{
xtype: 'panel',
html: '<img style="height: 200px; width: 200px;" src="http://placehold.it/200x200" />'
},
{
xtype: "button",
text: "Photo",
handler: function() {
function success(image_uri) {
var img = Ext.ComponentQuery.query("image")[0];
img.setSrc(image_uri);
}
function fail(message) {
Ext.Msg.alert("Failed: " + message);
}
Ext.device.Camera.capture({
sucess: success,
failure: fail,
quality: 50,
destination: 'data',
source: 'camera'
});
}
}
]
}
]
}
});
Done, the app stops loading. It stucks in the appLoadingIndicator and doesn't reach the tab panel component.
However, if i open it in a browser it works just fine.
I don't know even how to debug this.
This is the screen that the app gets stuck

It appears that you may be mixing up some of the parameters.
capture( options, scope, destination, encoding, width, height )
options = an object, which in your case would have {success:, failure:, quality:, source}, ...
and, destination: is not part of the options object, but its own parameter (as are, scope, encoding, width, and height)

I just solved it!
Reading these Cordova docs: http://cordova.apache.org/docs/en/3.0.0/guide_cli_index.md.html i discovered that i need to install the plugins before using the APIs =P.
Doing this solved everything:
cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git