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;

Sending Images from android device to api

I'm trying to send an image from an android device to a laravel api using react native, but it doesn't read the url of the image, i.e Unable to init from given url (file:///storage/emulated/0/DCIM/Camera/IMG_20181013_133327.jpg, it always brings that error, it doesn't read the url of the image, file:///storage/emulated/0/DCIM/Camera/IMG_20181013_133327.jpg please how can I send the image to my laravel api successfully or I can I download based on the location of the image on the android device
REACT NATIVE AXIOS
//THE IMAGES ARE FIRST SELECTED AND THE IMAGES ARRAY IS SET WITH THE URI OF THE IMAGES
imageUpload(){
ImagePicker.openPicker({
multiple: true,
cropping: true,
mediaType: 'photo'
}) .then(images => {
console.log(images);
const imagesArray = [];
if(images){
images.map(i => {
imagesArray.push({uri: i.path, type: i.mime, name: i.path});
} );
}
this.setState({
images_array: imagesArray
});
console.log(imagesArray);
console.log(this.state.images_array);
}).catch(e => console.log(e));
}
//THE IMAGES ALONG WITH OTHER DETAILS ARE SENT TO THE LARAVEL API
seller(){
this.setState({loader: true});
var data = {
name: this.state.name,
// user_id: this.state.user_id,
user_id: 18,
description: this.state.description,
amount: this.state.amountT,
qty: this.state.qty,
cat_id: this.state.cat_id,
photos: this.state.images_array
};
/* var config = {
headers: {'Authorization': "Bearer " + this.state.token}
};*/
axios.post(
'http://10.0.2.2:8000/api/sell',
data,
// config
).then((response) => {
this.setState({loader: false});
console.log(response);
Alert.alert(
'Success',
'Product posted Successfully',
[
{text: 'OK', onPress: this.props.navigation.navigate('Land', {})},
], );
}).catch((error) => {
this.setState({loader: false});
Alert.alert(
'Error',
'Internal Server Error, please try again later',
[
{text: 'OK'},
], );
console.log(error);
});
};
LARAVEL BACKEND, i.e Intervention Image api is used
public function imagesUpload($goodsId, $photos){
$images = $photos;
// $count = $images->count;
foreach($images as $image){
$uri = $image['uri'];
$filename = basename($uri);
Image::make($uri)->save(public_path('img/' . $filename));
$saver = new Images;
$saver->product_id = $goodsId;
$saver->location_url = 'img/'.$filename;
$saver->save();
}
return true;
}

using double // does not work on real devices , it may work on emulator but not on real devices .
try using this
uri:'file:///storage/emulated/0/DCIM/IMG_20161201_125218.jpg'
make sure to use /// three forward slashes.

ionic apk file not getting location but the system show location

When I am running ionic apk file in mobile I'm not getting my location but the system show location. What is the problem?
Module.js file
angular.module('ionic.example', ['ionic'])
.controller('MapCtrl', function($scope, $ionicLoading, $compile) {
function initialize() {
var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!/a></div>";
var compiled = $compile(contentString)($scope);
var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
$scope.map = map;
}
google.maps.event.addDomListener(window, 'load', initialize);
$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
});
Here it is not working after installing apk file. On clicking the find me button it is loading ..... but not showing location
This is my code. When I run the browser it is working fine but after build apk file it is not showing details. Can you guys tell me the what the reason is?

The permissions are set correctly in your androidManifest? you need:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
Try to connect the device to pc and use chrome://inspect to see the error.

How do you retrieve photos from Titanium Cloud?

I'm a newbie in Titanium and web development. I uploaded some images to the Titanium Cloud Service (ACS) and wanna display them on my app. Below is my code. It runs, but I don't see any photos except for the title and back button. Can someone take a look at my code and give me some hint on what I'm missing? Thank you for your time!
//Import the module
var Cloud = require('ti.cloud');
Cloud.debug = true; // optional; if you add this line, set it to false for production
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
exports.getAlbumWin = function() {
//create window
var album_window = Titanium.UI.createWindow({
backgroundColor:'#FFF',
title: "Travel Diary"
});
//create title
var title = Titanium.UI.createLabel({
text: "All Trip Photos Submitted by Our Users",
top:10,
color: '#008000',
textAlign: 'center',
font: {fontSize:50}
});
var tableView = Ti.UI.createTableView({
top: '5%',
scrollable: true,
width: '100%',
minRowHeight: '500',
bottom: '10%',
});
//Get diary entries, add them to the table view and display it
Cloud.Photos.query({
page: 1,
per_page: 10
}, function(e) {
var row, dateLabel, placeLabel, reviewLabel;
var displayData = [];
if (e.success){
alert('Count: '+e.photos.length);
for (var i=0; i<e.photos.length; i++) {
var photo = e.photos[i];
var image2 = photo.urls.square.toImage();
//create imageView
var photoView = Ti.UI.createImageView({
image: image2
});
//photo.urls.square
displayData.push(photoView);
}
tableView.setData(displayData);
} else {
alert('Error:\n' + ((e.error && e.message) || JSON.stringify(e)));
}
});
//add a 'back' button
var back_button = Titanium.UI.createButton({
title: "Back",
height:160,
left:40,
right:40,
bottom: '0%'
});
//Add Event Listener
back_button.addEventListener('click', function(){
//call an export function
var win = require('home').getHomeWin;
//create new instance
var nextWin = new win();
nextWin.open();
});
album_window.add(title);
album_window.add(tableView);
album_window.add(back_button);
return album_window;
};

In appcelerator docs you can see what is image property of a Ti.UI.imageView,
image : (String/Titanium.Blob/Titanium.Filesystem.File)
Image to display, defined using a local filesystem path, a File
object, a remote URL, or a Blob object containing image data. Blob and
File objects are not supported on Mobile Web.
So you could, use url as it is.
Try like this,
var image2 = photo.urls.square_75;
(Use as this unless you have specified a Custom Photo Size named square).
Look here for more information about "urls" property of Cloud photo object.

Remove annotations from Map in Titanium Appcelerator

I have made a Map based app using Titanium Appcelerator. I am showing the user's current location on the map. I also have a textbox where I am taking the user's desired location in order to show it on the map. For showing a particular place on the map I have used annotations and its working fine. The problem is that when the value of the textbox changes then another annotation is getting created on the map. What I want to do is, I want to clear the previous annotation before putting up a new annotation. My app.js file is depicted below:
app.js:
//create the window
var win1 = Titanium.UI.createWindow({
title:'Exercise Tracker',
backgroundColor: '#000'
});
//goto location label
var location_label = Titanium.UI.createLabel({
left:'10',
top:'20',
text:'Go to: ',
font:{fontSize:20}
})
//goto location textbox
var location_textbox= Titanium.UI.createTextField({
top: '15',
left: '85',
width: '300',
height: '50',
})
//go button
var btnGo=Ti.UI.createButton(
{
top:'15',
left:'420',
width:'50',
height:'50',
title:"Go"
})
//create our mapview
var mapview = Titanium.Map.createView({
top: 110,
height: 'auto',
width: 'auto',
mapType: Titanium.Map.STANDARD_TYPE,
region: {latitude: 51.50015,
longitude:-0.12623,
latitudeDelta:0.5,
longitudeDelta:0.5},
animate: true,
regionFit: true,
userLocation: true,
});
// to get values from both the textbox
btnGo.addEventListener('click', function (e){
//var addr=location_textbox.value;
var addr="";
addr = location_textbox.value;
annote(addr);
});
// to refrsh the page on click textbox
location_textbox.addEventListener('click', function (e){
});
//--------------------------annotations--------------------------------
//var addr = 'Howrah';
function annote(addr)
{
var addr_fw=addr;
Titanium.Geolocation.forwardGeocoder(addr,function(evt) {
var objLocationAnnotation = Titanium.Map.createAnnotation({
latitude: evt.latitude,
longitude: evt.longitude,
title: addr_fw
});
mapview.addAnnotation(objLocationAnnotation);
});
}
//--------------------------annotations--------------------------------
//add the map to the window
win1.add(mapview);
//set the distance filter
Titanium.Geolocation.distanceFilter = 10;
Titanium.Geolocation.getCurrentPosition(function(e)
{
if (e.error)
{
//if mapping location doesn't work, show an alert
alert('Sorry, but it seems geo location is not available on your device!');
return;
}
//get the properties from Titanium.GeoLocation
var longitude = e.coords.longitude;
var latitude = e.coords.latitude;
var altitude = e.coords.altitude;
var heading = e.coords.heading;
var accuracy = e.coords.accuracy;
var speed = e.coords.speed;
var timestamp = e.coords.timestamp;
var altitudeAccuracy = e.coords.altitudeAccuracy;
//apply the lat and lon properties to our mapview
mapview.region = {latitude: latitude,
longitude: longitude,
latitudeDelta:0.5,
longitudeDelta:0.5
};
});
//finally, open the window
win1.open();
//adding display properties to the main window
win1.add(location_label);
win1.add(location_textbox);
win1.add(btnGo);

Use mapView.removeAnnotation String/Titanium.Map.Annotation annotation
it Removes an existing annotation from the map.
read the documentation for further details from here.
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Map.View-method-removeAnnotation

Change
mapview.addAnnotation(objLocationAnnotation);
to
mapview.annotations = [objLocationAnnotation];
That will clear all the annotations on the mapview and set them to a new array of the one new annotation.