Capture Popup page content through CasperJS or PhantomJS - phantomjs

A.html
<input type="submit" name="testLabel" value="Print Test" id="testLabel" onclick="myFunction('<?php echo $dynamic_page;?>')" >
<script>
function myFunction(page) {
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
window.open(page, "_blank",strWindowFeatures);
}
</script>
CasperJS code
var casper = require('casper').create();
casper.start('http://localhost/test/a.html', function() {
this.echo(this.getTitle());
});
casper.thenClick('#testLabel');
casper.then(function() {
this.capture('page.png');
});
casper.run();
I have also try with phantomjs but i am not able to capture b.html page in page.png
Note : Popup page name is not fixed.


// this will set the popup DOM as the main active one only for time the
// step closure being executed
casper.withPopup(0, function() {
this.test.assertTitle('Popup title');
});
Complete code
var casper = require('casper').create();
casper.start('http://localhost/test/a.html', function () {
this.echo(this.getTitle());
});
casper.thenClick('#testLabel');
casper.waitForPopup(0, function () {
this.echo('Popup');
});
casper.then(function () {
this.capture('page.png');
});
casper.run();
Read more about waitForPopup


There is waitForPopup and withPopup methods so your code would look like this
var casper = require('casper').create();
casper.start('http://localhost/test/a.html', function() {
this.echo(this.getTitle());
});
casper.thenClick('#testLabel');
casper.waitForPopup(/.\.html$/, function() {
this.echo('Popup')
});
casper.withPopup(0, function() {
this.capture('page.png');
});
casper.run();

Related

pause facebook video on scroll

I am trying to pause facebook video on scroll but its not working below is my code. It gives error pause of undefined. Is there any other way?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '6296624552155',
xfbml : true,
version : 'v3.2'
});
var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
jQuery(window).scroll(function() {
console.log('test');
my_video_player = msg.instance;
my_video_player.pause() ;
});
}
});
};
</script>
<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

Nuxt head() does not wait asyncData response for head

I have a nuxt code like this
<template>
<section>
<div>Hello Nuxt</div>
</section>
</template>
<script>
const fetchTheme = () => {
return new Promise(function(resolve, reject) {
setTimeout(() => {
resolve({
title: "Fetched Title"
});
}, 100);
});
};
export default {
async asyncData() {
const theme = await fetchTheme();
return theme;
},
head() {
if (this.theme) {
return {
title: this.theme.title
};
} else {
return {
title: "Default title"
};
}
}
};
</script>
<style scoped>
</style>
While I do view source, it gives 'Default title' but I need the title fetched from API
Here is Code Code Sandbox

From the docs on asyncData:
Nuxt.js will automatically merge the returned object with the component data.
That means that what you're doing:
async asyncData() {
const theme = await fetchTheme();
return theme;
}
is analogous to this:
async asyncData() {
const theme = await fetchTheme();
return {
title: theme.title
};
}
Which means that the title is accessible by doing this.title instead of this.theme.title.
To fix this, simply modify the return format of asyncData, to return an object that has a theme property:
async asyncData() {
const theme = await fetchTheme();
return {
theme
};
}
This will properly add the theme property to the data property of the component.

Facebook Login Component using Vue.js and Amplify

Here is the source for a self contained Facebook login component in Vue. I'm trying to use this with AWS Amplify. I successfully get the Facebook login screen to appear and I am able to get an identity id in AWS cognito. However, things aren't quite working.
<template>
<div>
<Button
class="FacebookButton"
v-text="buttonText"
#click="handleClick"
:disabled="isLoading"
/>
</div>
</template>
<script>
import Auth from "#aws-amplify/auth";
import { AmplifyEventBus } from "aws-amplify-vue";
export default {
name: "FacebookButton",
components: {
},
data() {
return {
buttonText: "Login to Facebook",
isLoading: true
};
},
computed: {},
async mounted() {
this.loadFacebookSDK();
await this.waitForInit();
this.isLoading = false;
},
beforeCreate() {},
methods: {
waitForInit() {
return new Promise(res => {
const hasFbLoaded = () => {
if (window.FB) {
res();
} else {
setTimeout(hasFbLoaded, 300);
}
};
hasFbLoaded();
});
},
statusChangeCallback(response) {
if (response.status === "connected") {
this.handleResponse(response.authResponse);
} else {
this.handleError(response);
}
},
checkLoginState() {
window.FB.getLoginStatus(this.statusChangeCallback);
},
handleClick() {
window.FB.login(this.checkLoginState, { scope: "public_profile,email" });
},
handleError(error) {
alert(error);
},
async handleResponse(data) {
const { email, accessToken: token, expiresIn } = data;
const expires_at = expiresIn * 1000 + new Date().getTime();
const user = { email };
this.isLoading = true;
try {
//const response = await Auth.federatedSignIn(
await Auth.federatedSignIn("facebook", { token, expires_at }, user);
this.isLoading = false;
AmplifyEventBus.$emit("authState", "signedIn");
//this.props.onLogin(response);
} catch (e) {
this.isLoading = false;
this.handleError(e);
}
},
loadFacebookSDK() {
window.fbAsyncInit = function() {
window.FB.init({
appId: "yourappidhere",
xfbml: true,
version: "v3.2"
});
window.FB.AppEvents.logPageView();
};
(function(d, s, id) {
var js,
fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
})(document, "script", "facebook-jssdk");
}
}
};
</script>
<style scoped>
</style>
This code is a port from a React example here: https://serverless-stack.com/chapters/facebook-login-with-cognito-using-aws-amplify.html
I'm trying to make this Facebook login work with the existing Amplify authenticator state management system by emitting the change to authState as follows:
AmplifyEventBus.$emit("authState", "signedIn");
This causes the Authenticator widget to 'disappear', but it doesn't let me get into my app. I'm not quite sure where to go next.

Phantomjs submit and download cpf

I want submit with my cpf and dowload the pdf.
This is the code but is not functional.
var page = require('webpage').create();
page.open("http://www.samaetga.com.br/portal/SegundaVia.aspx", function(status) {
if (status === "success") {
console.log("sucesso");
};
page.render("page.png");
page.evaluate(function() {
document.getElementById("cpf").value = "00000000000";
document.getElementById("u_0_1").click();
});
setTimeout(function() {
page.evaluate(function() {
console.log('vou printar');
});
page.render("page.png");
phantom.exit();
});
};

Bind Ckeditor value to model text in AngularJS and Rails

I want to bind CKEditor text to ng-model text. My View:
<form name="postForm" method="POST" ng-submit="submit()" csrf-tokenized class="form-horizontal">
<fieldset>
<legend>Post to: </legend>
<div class="control-group">
<label class="control-label">Text input</label>
<div class="controls">
<div class="textarea-wrapper">
<textarea id="ck_editor" name="text" ng-model="text" class="fullwidth"></textarea>
</div>
<p class="help-block">Supporting help text</p>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Post</button>
<button class="btn">Cancel</button>
<button class="btn" onclick="alert(ckglobal.getDate())">Cancel123</button>
</div>
</fieldset>
</form>
controller
function PostFormCtrl($scope, $element, $attrs, $transclude, $http, $rootScope) {
$scope.form = $element.find("form");
$scope.text = "";
$scope.submit = function() {
$http.post($scope.url, $scope.form.toJSON()).
success(function(data, status, headers, config) {
$rootScope.$broadcast("newpost");
$scope.form[0].reset();
});
};
$scope.alert1 = function(msg) {
var sval = $element.find("ckglobal");
//$('.jquery_ckeditor').ckeditor(ckeditor);
alert(sval);
};
}
PostFormCtrl.$inject = ["$scope", "$element", "$attrs", "$transclude", "$http", "$rootScope"];
I want to set CKEditor value in $scope.text at the time of form submit.

CKEditor does not update textarea while typing, so you need to take care of it.
Here's a directive that will make ng-model binding work with CK:
angular.module('ck', []).directive('ckEditor', function() {
return {
require: '?ngModel',
link: function(scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace(elm[0]);
if (!ngModel) return;
ck.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
In html, just use:
<textarea ck-editor ng-model="value"></textarea>
The previous code will update ng-model on every change.
If you only want to update binding on save, override "save" plugin, to not do anything but fire "save" event.
// modified ckeditor/plugins/save/plugin.js
CKEDITOR.plugins.registered['save'] = {
init: function(editor) {
var command = editor.addCommand('save', {
modes: {wysiwyg: 1, source: 1},
readOnly: 1,
exec: function(editor) {
editor.fire('save');
}
});
editor.ui.addButton('Save', {
label : editor.lang.save,
command : 'save'
});
}
};
And then, use this event inside the directive:
angular.module('ck', []).directive('ckEditor', function() {
return {
require: '?ngModel',
link: function(scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace(elm[0]);
if (!ngModel) return;
ck.on('save', function() {
scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
}
};
});

If you simply want to retrieve text in the editor textarea in angular, call CKEDITOR.instances.editor1.getData(); to get the value directly in an angularjs function. See below.
In your html
In the test.controller.js
(function () {
'use strict';
angular
.module('app')
.controller('test', test);
test.$inject = [];
function test() {
//this is to replace $scope
var vm = this;
//function definition
function postJob()
{
vm.Description = CKEDITOR.instances.editor1.getData();
alert(vm.Description);
}
}
})();

the Vojta answer work partly
in this post I found a solution
https://stackoverflow.com/a/18236359/1058096
the final code:
.directive('ckEditor', function() {
return {
require : '?ngModel',
link : function($scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace(elm[0]);
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
ck.on('pasteState', function() {
$scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$modelValue);
};
}
};
})
edit: removed unused brackets

Thanks to Vojta for the excellent directive. Sometimes it doesn't load. Here is a modified version to fix that issue.
angular.module('ck', []).directive('ckEditor', function() {
var calledEarly, loaded;
loaded = false;
calledEarly = false;
return {
require: '?ngModel',
compile: function(element, attributes, transclude) {
var loadIt, local;
local = this;
loadIt = function() {
return calledEarly = true;
};
element.ready(function() {
return loadIt();
});
return {
post: function($scope, element, attributes, controller) {
if (calledEarly) {
return local.link($scope, element, attributes, controller);
}
loadIt = (function($scope, element, attributes, controller) {
return function() {
local.link($scope, element, attributes, controller);
};
})($scope, element, attributes, controller);
}
};
},
link: function($scope, elm, attr, ngModel) {
var ck;
if (!ngModel) {
return;
}
if (calledEarly && !loaded) {
return loaded = true;
}
loaded = false;
ck = CKEDITOR.replace(elm[0]);
ck.on('pasteState', function() {
$scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
or if you need it in coffeescript
angular.module('ck', []).directive('ckEditor', ->
loaded = false
calledEarly = false
{
require: '?ngModel',
compile: (element, attributes, transclude) ->
local = #
loadIt = ->
calledEarly = true
element.ready ->
loadIt()
post: ($scope, element, attributes, controller) ->
return local.link $scope, element, attributes, controller if calledEarly
loadIt = (($scope, element, attributes, controller) ->
return ->
local.link $scope, element, attributes, controller
)($scope, element, attributes, controller)
link: ($scope, elm, attr, ngModel) ->
return unless ngModel
if (calledEarly and not loaded)
return loaded = true
loaded = false
ck = CKEDITOR.replace(elm[0])
ck.on('pasteState', ->
$scope.$apply( ->
ngModel.$setViewValue(ck.getData())
)
)
ngModel.$render = (value) ->
ck.setData(ngModel.$viewValue)
}
)

And just for the record if you want to use multiple editors in one page this can come in handy:
mainApp.directive('ckEditor', function() {
return {
restrict: 'A', // only activate on element attribute
scope: false,
require: 'ngModel',
controller: function($scope, $element, $attrs) {}, //open for now
link: function($scope, element, attr, ngModel, ngModelCtrl) {
if(!ngModel) return; // do nothing if no ng-model you might want to remove this
element.bind('click', function(){
for(var name in CKEDITOR.instances)
CKEDITOR.instances[name].destroy();
var ck = CKEDITOR.replace(element[0]);
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
ck.on('pasteState', function() {
$scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
});
}
}
});
This will destroy all previous instances of ckeditor and create a new one.

There's now a 'change' event that can be used for this.
Here's a directive I've just created that has a couple of different toolbar config options, I'm using the jQuery adapter to initialize ckeditor. For more info check out this blog post.
(function () {
'use strict';
angular
.module('app')
.directive('wysiwyg', Directive);
function Directive($rootScope) {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModel) {
var editorOptions;
if (attr.wysiwyg === 'minimal') {
// minimal editor
editorOptions = {
height: 100,
toolbar: [
{ name: 'basic', items: ['Bold', 'Italic', 'Underline'] },
{ name: 'links', items: ['Link', 'Unlink'] },
{ name: 'tools', items: ['Maximize'] },
{ name: 'document', items: ['Source'] },
],
removePlugins: 'elementspath',
resize_enabled: false
};
} else {
// regular editor
editorOptions = {
filebrowserImageUploadUrl: $rootScope.globals.apiUrl + '/files/uploadCk',
removeButtons: 'About,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Save,CreateDiv,Language,BidiLtr,BidiRtl,Flash,Iframe,addFile,Styles',
extraPlugins: 'simpleuploads,imagesfromword'
};
}
// enable ckeditor
var ckeditor = element.ckeditor(editorOptions);
// update ngModel on change
ckeditor.editor.on('change', function () {
ngModel.$setViewValue(this.getData());
});
}
};
}
})();
Here's a couple of examples of how to use the directive in HTML
<textarea ng-model="vm.article.Body" wysiwyg></textarea>
<textarea ng-model="vm.article.Body" wysiwyg="minimal"></textarea>
And here are the CKEditor scripts I'm including from a CDN plus a couple of extra plugins that I downloaded to enable pasting images from word.
<script src="//cdn.ckeditor.com/4.5.7/full/ckeditor.js"></script>
<script src="//cdn.ckeditor.com/4.5.7/full/adapters/jquery.js"></script>
<script type="text/javascript">
// load extra ckeditor plugins
CKEDITOR.plugins.addExternal('simpleuploads', '/js/ckeditor/plugins/simpleuploads/plugin.js');
CKEDITOR.plugins.addExternal('imagesfromword', '/js/ckeditor/plugins/imagesfromword/plugin.js');
</script>

ES6 example with CKEditor v5.
Register directive using:
angular.module('ckeditor', []).directive('ckEditor', CkEditorDirective.create)
Directive:
import CkEditor from "#ckeditor/ckeditor5-build-classic";
export default class CkEditorDirective {
constructor() {
this.restrict = 'A';
this.require = 'ngModel';
}
static create() {
return new CkEditorDirective();
}
link(scope, elem, attr, ngModel) {
CkEditor.create(elem[0]).then((editor) => {
editor.document.on('changesDone', () => {
scope.$apply(() => {
ngModel.$setViewValue(editor.getData());
});
});
ngModel.$render = () => {
editor.setData(ngModel.$modelValue);
};
scope.$on('$destroy', () => {
editor.destroy();
});
})
}
}