Selenium Webdriver (Appium) - switching to a UIWebview in a Hybrid app (iOS) - selenium

I am using a hybrid app and writing tests using Appium + Selenium Webdriver in Ruby.
I start my test with some textbox editing + click a button to open the UIWebview (so far everything works). The problem is when the UIWebview is opened - I cannot access it (it is immediately closed when I'm trying to click a html element (I am using Appium inspector to find elements and to record my Ruby test). I understand that I have to switch to the UIWebview (as I found here), but I cannot make it to work.
Code example:
require 'rubygems'
require 'selenium-webdriver'
capabilities = {
'browserName' => 'iOS',
'platform' => 'Mac',
'version' => '7.1',
'device' => 'iPhone Retina (4-inch)',
'app' => '/Users/{my user here}/Library/Developer/Xcode/DerivedData/{path here}/Build/Products/Debug-iphonesimulator/SDK.app'
}
server_url = "http://127.0.0.1:4723/wd/hub"
#wd = Selenium::WebDriver.for(:remote, :desired_capabilities => capabilities, :url => server_url)
# ...
# Do all kind of native actions here
# ...
#wd.find_element(:name, "showWebviewButton").click
#wd.manage.timeouts.implicit_wait = 30 # seconds
# ???
# How do I switch to my UIWebview here???
# (cannot access html elements here with #wd.find_element(:name, "htmlElement"))
# ???
#wd.quit
EDIT:
Using Appium inspector I found that my UIWebview is "window(1) ", so I tried:
#wd.switch_to.window(1)
This gives me the error:
A request to switch to a different window could not be satisfied because the window could not be found
(The error is thrown before the UIWebview is loaded)

It seems , you are switching to WebView before it loads. Please pause the script for some time and then switch to the WebView after it appears.

I have tried the following in java and worked fine for me, you may need to find the ruby version of the same.
driver.switchTo().window("WEBVIEW");
try this
#wd.switch_to.window("WEBVIEW") // i am not sure about the syntax

You need to access the element as shown below
findElement(By.xpath("//input[#name='firstName']"))

The only solution that finally worked for me (using Appium 1.2) is (taken from here, written in node.js)
// javascript
// assuming we have an initialized `driver` object for an app
driver
.contexts().then(function (contexts) { // get list of available views. Returns array: ["NATIVE_APP","WEBVIEW_1"]
return driver.context(contexts[1]); // choose the webview context
})
// do some web testing
.elementsByCss('.green_button').click()
.context('NATIVE_APP') // leave webview context
// do more native stuff here if we want
.quit() // stop webdrivage
In the above link you could find the solution written in other languages.

Related

<video> tag. DOMException: The element has no supported sources, when not utilizing require()

I am trying to play a video when developing locally with VueJS 2.
My code is the following :
<video class="back_video" :src="`../videos/Space${videoIndex}.mp4`" id="background-video"></video>
...
data :
function() {
return {
videoIndex:1
}
}
...
const vid = document.getElementById("background-video");
vid.crossOrigin = 'anonymous';
let playPromise = vid.play();
if (playPromise !== undefined) {
playPromise.then(function() {
console.log("video playing");
}).catch(function(error) {
console.error(error);
});
}
This code is causing the exception given in title. Tried in several browsers, always the same.
If I change the src by :
:src="require(`../videos/Space${videoIndex}.mp4`)"
it works.
But in that case building time is very long as I have many different videos in my videos directory, because adding require() will force to copy all videos in the running directory at build phase (vue-cli serve), and this is really annoying. In other words I want to refer videos that are outside the build directory to avoid this (but also to avoid having videos in my git).
It is interesting to note that when I deploy server side, it works perfectly with my original code
:src="`../videos/Space${videoIndex}.mp4`"
Note also that if i replace my code with simply
src="../videos/Space1.mp4"
it works too. So the video itself, or its location, are not the source of the problem.
Any clue ?
You can host your videos on a CDN to have something faster and easier to debug/work with.
Otherwise, it will need to bundle it locally and may take some time.

Titanium evalJS slows loading of the webview - timeout waiting to evaluate js

I am developing Titanium application with a webview that is loading content from a remote url. In the load event I am injecting some code with evalJS. Using Titanium SDK 8.0.0+ the loading of the webview content is very slow because of evalJS, I need to wait for some time in order to scroll or click something. I can see in the console that there is a warning repeatedly saying "TiWebViewBinding: (main) [4405,4881] Timeout waiting to evaluate JS", and when this warning stops showing I can interact with the webview. If evalJS is not used meaning I am not injecting code, there is no problem. The webview is loaded properly and there is no warning saying "Timeout waiting to evaluate JS". Before 8.0.0 sdk the problem did not existed. Has anyone had an experience with an issue like this? Am I missing something?
I would be very grateful if I get some input on this. Thanks.
var webview = Ti.UI.createWebView({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
url : "remote url"
});
webview.addEventListener('load', function() {
webview.evalJS('(function() {alert("test");})();');
webview.evalJS('(function sum(val1, val2){return val1 + val2;})();');
});
window.add(webview);
window.open();

Dynamic data not rendering in prerender-spa-plugin

I use prerender-spa-plugin in vue.js app for rendering html
but it can't render dynamic data.
when prerender-spa-plugin complete rendering
created html file only contains some html code not showing any dynamic data
Method
Mounted
prerender-spa-plugin Configuration
Adding the headless option solve the problem for me:
renderer: new Renderer({
injectProperty: '__PRERENDER_INJECTED',
renderAfterTime: 5000,
// Other puppeteer options.
// (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
headless: false // Display the browser window when rendering. Useful for debugging.
})

ionic3 open external url without address bar and toolbar and close button

My app needs a login page from external url.
The login logic that I thought is :
Steps
Open external url when ionic is launched
Once user logged in, move back to internal app using deep link (ex : myapp://main)
I tested step 2 which is deep link. Works well.
So, I have to make step 1 now.
First, I tested with iframe.
And got Refused to display 'https:....' in a frame because it set 'X-Frame-Options' to 'deny'. error. Seems this needs a server-side configuration. But anyway we don't want to use this way. iframe feels like a hack.
Second, I tried location.href = this.loginUrl;.
Worked well in chrome browser but when I built in iOS simulator, I see address bar, tool bar, and close button.
I don't like this because I don't want user to close login page or to change url address.
Third, tried window.open(this.loginUrl, '_self', 'location=no').
Same result as second.
Fourth, tried to use ionic version of in-app-browserplugin.
But the result is same as second and third.
It still opens a browser with address bar, tool bar even it shows 'back to myApp'. So user would feel this is out of app.
Check here, people are looking for the solution still.
After spending a day, I don't even know if there is option I can try.
I could resolve by doing this. But in real device.
Xcode iPhone emulators don't have open in-app-browser but built-in browser.
browser:any;
this.platform.ready().then(() => {
this.browser = this.iab.create(this.loginUrl, '_blank', 'location=no,toolbar=no');
});
You can solve this by installing a cordova plugin called cordova-plugin-inappbrowser. Execute the following commands:
ionic plugin add cordova-plugin-inappbrowser
npm install --save #ionic-native/in-app-browser
On your app.module.ts add
import { InAppBrowser } from '#ionic-native/in-app-browser';
and also add the following to your providers in app.module.ts
providers: [
StatusBar,
SplashScreen,
InAppBrowser,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
Then on your home.ts add
import { InAppBrowser } from '#ionic-native/in-app-browser';
and inject it into the constructor like this
constructor(public navCtrl: NavController, private iab: InAppBrowser) {
}
then add the following method
ionViewDidLoad(){
this.iab.create('url', '_self', { location: 'no' }); }
Check the different options you have for this plugin here
For removing the address bar just use the option:
location: Set to yes or no to turn the InAppBrowser's location bar on or off.

How to access errors when using WebdriverJS?

We are using the superb WebdriverJS (with Selenium) to perform acceptance testing on our web app. Everything works fine, and our tests execute successfully when we use Firefox and Safari.
However, when we use PhantomJS, our tests fail with unhelpful errors. It's almost as if... Javascript isn't even running inside the client page! Something that would cause this would be if PhantomJS' javascript environment ran into errors. Unfortunately, I can't seem to find a way to access Javascript errors when using PhantomJS with WebdriverJS.
If we were using PhantomJS directly, we could simply do (from the PhantomJS site):
page.onError = function(msg, trace) {
console.log(msg);
trace.forEach(function(item) {
console.log(' ', item.file, ':', item.line);
});
}
Unfortunately, I don't know how to access this mysterious page object when using PhantomJS within WebdriverJS. Any thoughts?
You can actually access JS errors in your PhantomJS stdout log at INFO level.
$ phantomjs --webdriver 4444 --webdriver-loglevel=INFO
You can even push things forward by setting the log level to DEBUG and see what actually PhantomJS does to execute the commands you send through Webdriver / Ghostdriver.
I figured out a workable solution! Essentially, it involves using an onerror event handler to intercept (and store) the Javascript errors. Then, once the DOM is ready, we report the errors via hidden DOM elements. This allows Selenium to look for specific elements (e.g. ".javascript-errors"), which is something it's naturally quite good at. Thanks go to myriad other blog posts and SO questions for getting me to this point.
The code:
//For detecting and reporting Javascript errors via Selenium. Note that this should be in its own file to allow this code to reliably detect syntax errors in other files.
var errors = [];
//Handle all errors
window.onerror = function(message, url, line) {
errors.push({"message":message, "url":url, "line":line});
}
//Report errors visually via HTML once the DOM is ready
window.onload = function() {
if(errors.length==0)
return;
var div = document.createElement("div");
div.className = 'javascript-errors';
div.innerHTML = '';
var style = "position:absolute; left:-10000px; top:auto; width:1px; height:1px;"; //CSS to hide the errors; we can't use display:none, or Selenium won't be able to read the error messages. Adapted from http://webaim.org/techniques/css/invisiblecontent/
for(var i=0; i<errors.length; i++)
div.innerHTML += '<div class="javascript-error" style="' + style +'"><span class="message">' + errors[i].message.replace('<', '<').replace('>', '>') + '</span><br/><span class="url">' + errors[i].url + '</span><br/><span class="line">' + errors[i].line + '</span></div>';
document.body.appendChild(div);
}