Develop Reference

Hide url bar in android chrome with selenium-webdriver

I am using Browserstack's automate API with selenium-webdriver's node package to programatically take screenshots on different browsers and device
The desktop screenshots work fine - we screenshot, scroll, take another screenshot, until the end of the screen is reached. Then some code stitches the screenshots together.
On Android devices there is a problem, Browserstack takes screenshots that seem to include the space where the browser's bottom bar is, but it comes out as white space.
As per the Browserstack documentation, this is the method I am using to to the screenshot:
webdriver.WebDriver.prototype.saveScreenshot = (filename) => {
return driver.takeScreenshot().then((data) => {
fs.writeFile(
`${__dirname}/screenshots/${filename}`,
data.replace(/^data:image\/png;base64,/, ''),
'base64',
(err) => {
if (err) {
throw err;
}
},
);
});
};
I can successfully enter kiosk mode with desktop Chrome by adding a --kiosk argument to the chromeOptions object, but it doesn't have any effect in Chrome on a mobile device.
I have also tried executing the script document.documentElement.requestFullScreen through the driver, with no luck.
Is it possible to enter kiosk mode on android chrome programatically with selenium-webdriver?
Is there another way to reliably and programatically hide the url bar?

Tab Icons not showing on Android

I've been struggling to make tab icons show up on an actual Android device in a tab based application. It looks like icons cannot be found and all I can see is the tab text. Everything shows up fine though when running the app on the Android emulator. Has anybody had a similar problem and can give some valuable input? This issue happens only in actual Android devices, iOS works fine.
Dependencies used:
react-native : 0.49.5
react-native-navigation : 1.1.270
Code:
Navigation.startTabBasedApp({
tabs: [
{
label: 'Booking',
screen: 'LocationsForm',
icon : require('./src/assets/imgs/tabs/booking.png'),
title: 'Booking'
},
{
label: 'Account',
screen: 'AuthSplash',
icon : require('./src/assets/imgs/tabs/user.png'),
title: 'Account'
},
{
label: 'More',
screen: 'Extras',
icon : require('./src/assets/imgs/tabs/more.png'),
title: 'More'
}
]
});
UPDATE
For people that have the same problem. I could not find a way to make it work on an actual Android device when I was installing the debug.apk. The problem seems to solve itself though when you install the release.apk. So, all you have to do is assemble the production release of your app, install it, and you should be able to see the tab icons appearing fine on your Android device.

setting select to width 100% disables select function on android 5.1.x and Nexus-7 (phonegap build)

i've to work with phonegap build, cli 5.x and try to build a search form with several inputs, 3 of them are select boxes.
all works fine till i wanted to set the css of the select nodes to 100% with. If i enable this css the selection does not open any more.
My Android Device for testing that won't work is a Nexus 7 with Android 5.1.1 (Lollipop). On IOS and Android Devices with 4.x all is working fine.
The language we use is Typescript with JQuery and will be compiled to Javascript ES5 (commonJS Style).
Sample Script:
var sampleData = [{"val": 1, "text": "sample A"}, {"val": 2, "text": "sample B"}];
var myContainer $('#content-box');
var selectBox = $('<select>').attr('id', 'mySelectBox');
selectBox.append($('<option>').attr('value', 'none').html('-- none --'));
for(var index in sampleData) {
var obj = sampleData[index];
selectBox.append($('<option>').attr('value', obj['val']).html(obj['text']));
}
// code above works fine
$('select').css('width', '100%');
// this crashes the popup after compilation
// and i have to use phonegap-build
by the way, if i have extreme long content going over 100% of the screen with it works. just stretching seems to crash.
i don't work with jquery mobile, some features we build won't work with it !!!
tried external css also, same failure.
somebody has a workaround or a fix for it? somebody can confirm this solution?

Try setting an id for the element you want to modify,
then try
$('#select').css('width', '100%');
if id="select"

Sencha Touch 2 White screen in Android WebView

I am working on the migration of a JavaScript app from Sencha Touch 1.x to Sencha Touch 2.x. It is designated to run in a WebView inside a native Android app. The app worked on Sencha Touch 1.x. Meanwhile there has been a lot of refactoring and debugging to make it run on Sencha Touch 2.x. The current Sencha Touch version being used is 2.4.2.
I did some testing in a desktop version of Firefox. It basically worked out, but testing is limited since the Sencha Touch app is highly dependent on several objects and methods provided by the native Android app via JS-interface.
Now, when it comes to running it inside the Android WebView I am facing a strange issue: After startup and rendering all I get to see is nothing but a white screen, whereas all MVC-dependencies are loaded and the launch() in Ext.application is being triggered properly. There are no JavaScript errors in the console at all and all Ext classes/objects/methods are available.
This is the basic setup of my Ext.application block:
Ext.application({
name: 'MyApp',
models: [
'TestModel',
'UserModel',
'HauptmenueModel',
/* ... */
],
controllers: [
'MyController'
],
views: [
'Benutzer',
'Startseite',
/* ... */
],
stores: [
'TestStore',
'UserStore',
'HauptmenueStore',
/* ... */
],
launch: function () {
Ext.Viewport.add(Ext.create('MyApp.view.Startseite'));
console.log(document.body.innerHTML.length);
}
});
The views (e. g. the MyApp.view.Startseite view) are defined quite conventional:
Ext.define('MyApp.view.Startseite', {
extend: 'Ext.Panel',
config: {
id: 'Startseite',
layout: 'card',
items: [
/* ... */
]
},
/* ... */
});
What is interesting: Sencha Touch does indeed generate a lot of HTML content depending on the view I am loading via Ext.Viewport.add(), which I can deduce from the innerHTML.length I am logging. But nothing shows up in the WebView. The size consequently changes if I create a different view and load it via Ext.Viewport.add() but the viewport remains white.
What could be the reason for this? I am also very thankful for any tips on debugging this or somehow isolating this issue.

A possible reason for this could be the WebView’s layout itself. Please check the layout height of the WebView. Setting it to MATCH_PARENT should do the job.
It is recommended to set the WebView layout height to a fixed value or
to MATCH_PARENT instead of using WRAP_CONTENT.
See the Layout size section here:
http://developer.android.com/reference/android/webkit/WebView.html

Angular Js and Trigger.io - Can't follow a link on Android that works on iOS

I am using AngularJS with Trigger.io to develop a mobile application for both iOS and Android.
When I try to open a link that looks like this:
<a ng-href="#/offers/{{featured_offer.Id}}"></a>
It works perfectly fine on iOS, but on Android I get this message in the trigger console, and the link is not navigated to:
[WARNING] Attempted to open a URL which could not be handled: unsafe:content://io.trigger.forge722b6464a0e211e2ba9d12313d00dc45/src/index.html#/offers/8
How can I get this to work in Android the same as it works in iOS?

Looks like Angular adds unsafe: to url schemes it doesn't recognise, I think you want to include something like:
app.config(function($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content):/);
});
Which adds content: to the accepted url schemes.

I had this same problem, specifically with trying to display an img with a src of a file returned by forge.file.getImage. Angular adds unsafe: to the content: prefix of the local img URL, and as connorhd said, you need to add content: to the url whitelist.
Note that compileProvider's API has changed with recent versions of Angular, so I'm commenting here in case anyone else finds an updated version of this workaround useful.
app.config(['$compileProvider',
function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content|blob):|data:image|/);
// note: you'll also have to do imgSrcSanitizationWhitelist if you want to use general links as well as ng-src on images.
}]);

I too had this problem just add sanitizer in you config.xml
var app = angular.module( 'myApp', [] )
.config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
]);