Screenshot on a react page is blank using casperjs - casperjs

I am trying to use casperjs on a react app and noticed that screenshots were coming back as blank. So, I tried a different app and got the same result.
So, here is a react app I found - http://jaredly.github.io/github-issues-viewer/#rails/rails/0 and here is the casperjs code
var casper = require('casper').create();
casper.start('http://jaredly.github.io/github-issues-viewer/#rails/rails/0', function() {
this.echo(this.getTitle());
this.capture('im.png')
});
The image shows blank info
How do I resolve this?

Related

How do I detect when embedded Youtube video is playing?

UPDATE (July 2020): I was able to get a mostly working version of this. See my answer to the related question here.
In my angular Nativescript iOS app, I have a webview set up to play youtube videos. Following a method similar to this question here, I can get the youtube video to load and play automatically, using the Youtube Iframe API. But how do I detect when the video actually starts playing (after it is loaded)?
The Iframe API has events for this purpose, like "onStateChange". But, because my youtube code is "stuck" inside the webview, I am currently not able to read when events are fired from that webview.
In Nativescript, there is a nativescript-webview-interface plugin for this purpose, but I can't get it to work. I have put my code below. If that is the way to go, what is the correct code to get it working?
(I don't want to use the nativescript-youtube plugin because that brings in youtube's quotas, which are regularly shrinking. )
Code I Have Tried:
To get the youtube player to activate, I have put all of the relevant youtube code inside the webview. That works to play the video, but not yet to get the event of when the player starts playing. To do what I want to do, I need to have some way of inserting that code into my app WITHOUT trapping it in the webview. Or, have some way of communicating inside the webview.
To try to communicate with the webview, I have tried the nativescript-webview-plugin:
$ tns plugin add nativescript-webview-interface
html:
<web-view src="{{youtubeCode}}" #webView ></web-view>
ts:
import {WebView, LoadEventData} from "tns-core-modules/ui/web-view";
let webViewInterfaceModule = require('nativescript-webview-interface');
...
export class ...{
#ViewChild('webView') webView: ElementRef;
public youtubeCode = [code that youtube provides in its IFrame API]
ngOnInit(): void {
this.setupWebViewInterface();
}
setupWebViewInterface() {
let webView: WebView = this.webView.nativeElement;
this.oWebViewInterface = new webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
this.youtubeListen()
}..
youtubeListen(){
this.oWebViewInterface.on('onStateChange', (eventData)=>{ //'onStateChange' is the event provided in the Youtube Iframe API
console.log('event data = ' + eventData) //***this is the key part I want to work.
});
}
RESULT: ERROR TypeError: undefined is not an object (evaluating 'this.webView.ios.constructor')
This is a problem in the plugin's index.ios.js file. If I comment out the offending line, then the errors go away, but then nothing happens
..

Problem using variables in test actions in Firefox

I am getting this error:
1) Error on page "http://localhost:8080/en/index.html":
import declarations may only appear at the top level of a module:
    No stack trace available
whenever I run my test on Firefox. My tests are written in Typescript and are testing my page locally. The tests have no problems in Safari and Chrome, only in Firefox does it complain about import declarations. I have tried to recreate the error in non-local sites but have not been able to.
import { Selector } from "testcafe"
const full = "http://localhost:8080/en/index.html"
fixture`This is my tests`
.page`http://www.example.com/`;
test("URL", async t => {
const logo = Selector(".Logo")
await t
.navigateTo(full)
.expect(logo.textContent).contains("LogoName")
})
Hoping someone can shed some light on how to fix this!
Can you open the page in Firefox and check if you have error message in the JS console?
Testcafe will fail if there is any JS error.
You can use --skip-js-errors flag to ignore js errors (https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#-e---skip-js-errors) or ... fix that error on your page.

Alert is not visible in nativescript ios after autocomplete usage

I am working on a nativescript app for android and ios in which I have used REST APIs to store/get data in JSON format.
Based on JSON result from APIs sometime I need to show alert to the user.
It was working fine with Nativescript 4.1 but since I have upgraded to 4.2 app is unable to show alert boxs in ios. It shows the blank page and shows the following error.
(UIKitCore) Warning: Attempt to present <UIAlertController: 0x7fb5834eb000> on <UIViewControllerImpl: 0x7fb58659a670> whose view is not in the window hierarchy!
I have suspected that I am calling alert too early so I have tried to add timeout before alert but still it's the same.
if (result.status === 'E') {
setTimeout(function () {
const alertOptions = { title: 'Error', message: result.errMsg, okButtonText: 'OK', cancelable: false };
dialogs.alert(alertOptions).then(() => {
resolve('Error');
});
}, 700);
Points to note here is I am using nativescript-autocomplete component in one of my tabs. and this problem occurs only when user searches something using that component.
So it could be something related to that component.May be when autocomplete closes the modal, app looses the parent reference ?
Found an interim solution for now.
nativescript-fancyalert works like a charm. Will stick with that for sometime.
It is based on SCLAlertView for ios.

IE8 issues with Yammer embed and API

Facing multiple issues with IE 8 (detailed version 8.0.7601.17514). Please note everything works fine in other browsers.
Yammer embed my feed control is not working. Sometimes it shows result and sometimes not.
REST API call not working and giving error as below. However I used new js sdk and new yam.platform.request.
Error is : yam.request is null or not an object. source : platform_js_sdk.js
Thanks in advance for your help!
I found out that the div that you embed yammer feed has to be above the yammer request script
eg.
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>
yam.connect.embedFeed(
{ container: '#embedded-feed',
network: 'fourleaf.com' // network permalink (see below)
});
</script>
Otherwise, IE will not be able to find the div to show the feed (but chrome works fine..)

angularjs and phonegap on windows phone 7

I'm having trouble getting angularjs working on windows phone 7 with phonegap. The simple stiff works, but as soon as I try to add page include or a view (route) it doesn't do anything. In the function matchUrl(url,obj) in angular.js (1.0.3) there is a regex that fails because Windows Phone use an unusual URL format.
What happens is angular is expecting a url like 'http://localhost/www/index.html' but in windows phone it will look like: 'x-wmapp0:app/www/index.html' instead.
Has anyone run across this and is there a solution?
This issue is as of now still unresolved and tracked here
https://github.com/angular/angular.js/issues/2303
EDIT:
The mentioned issue is still open although fix was submitted.
I managed to get a basic angular app running in phonegap WP7 by
applying the mentioned fix
including jquery (2.0.3) above angular.js
changing line of code in angular from
var xhr = new XHR();
to
var xhr = new XMLHttpRequest();
manually bootstrapping angular app after cordova deviceready event fired
I reported it here
Using angularjs-1.1.5 and changing line 5612 with
var SERVER_MATCH = /^([^:]+):[\/\/]*(\w+:{0,1}\w*#)?(\{?[\w\.-]*\}?)(:([0-9]+))?(\/[^\?#]*)?(\?([^#]*))?(#(.*))?$/,
should fix the problem

Resources