Casperjs inspect a javascript Object - phantomjs

How can I inspect an object in a casperjs script ?
I tried console.log(arguments) but it only prints [object Arguments] or [object Object].
I would like to expect something like:
{
'firstparam': 'value'
...
}
Like in the Javascript console or in Node.js...
Maybe it's a Phantomjs question, I'm not sure...

I think I found it: http://docs.casperjs.org/en/latest/debugging.html#dump-serialized-values-to-the-console
var utils = require('utils');
utils.dump({
foo: {
bar: 42
},
});

JSON.stringify for a simple string read, e.g.
casper.test.comment(JSON.stringify(object));

Related

how to use dynamic assertion method name?

Let's say I have this in a test:
await t.expect(Selector('input')).ok()
And I would like to have (something like) this:
let func = 'ok';
await t.expect(Selector('input'))[func]()
This is so that I can have a map from selector to function, in order to iterate
over it and check whether some elements are in the page (ok) and some not (notOk).
My above attempt does not work and returns with an interesting error:
code: 'E1035',
data: [
'SyntaxError: test.js: await is a reserved word (325:14)'
]
I believe this is because Testcafe is doing some magic under the hood.
What would be the correct syntax to make it work?
It seems that you skipped the Selector property that you want to check (e.g. exists, visible, textContent, etc.). The following test example works properly with TestCafe v1.14.2:
import { Selector } from 'testcafe';
fixture`A set of examples that illustrate how to use TestCafe API`
.page`http://devexpress.github.io/testcafe/example/`;
const developerName = Selector('#developer-name');
const submitButton = Selector('#submit-button');
test('New Test', async t => {
await t
.typeText(developerName, 'Peter Parker')
.click(submitButton);
let assertFunc = 'ok';
await t.expect(Selector('#article-header').exists)[assertFunc]();
});

Keep "this" in bootbox callback functions

I'm trying to keep this variable in the callback:
var that = this
// type1
bootbox.confirm("This is the default confirm!", function(result){
console.log(that.whatever);
});
// type2
bootbox.confirm({
message: "This is a confirm with custom button text and color! Do you like it?",
callback: function (result) {
console.log(that.whatever);
}
});
It looks ugly, is there any better way to do it?
You can use an arrow function:
bootbox.confirm("This is the default confirm!", result => {
console.log(this.whatever);
});
You should compile this with Babel though, older browsers may not support it. If you have the callback as a variable, you can bind it before passing:
yourCb.bind(this);
bootbox.confirm("This is the default confirm!", yourCb);

Component method response object data binding

I am starting to lose my mind in debugging an application that I inherited from a fellow developer who is absent.
I have narrowed down the problem to the following place in code (php files are checked, Vue instances are initialised, there are no syntax errors).
This is my the component that gets initialised:
var RadniStol = Vue.component('radnistol', {
template: '#template-RadniStol',
data() {
return {
tableData: [],
requestData: {
sort: "ID",
order: "DESC"
}
}
},
methods: {
reloadTable: function (event) {
data = this.requestData;
this.$http.post('php/get/radni_stol.php', data).then(response => {
console.log(response.data.bodyText);
this.tableData = response.data.records;
});
},
.
.
.
The PHP file that gets called with the POST method is working correctly, querying the database and echoing the response in a JSON format.
The thing that is making me pull out my hair is the following: the console.log(response.data) outputs the following into the console:
{"records":[{"DODAN_NA_RADNI_STOL":"1","..."}]}
It is an JSON object that I expected to have but when trying to assign it to the data of the component with:
this.tableData = response.data;
or any other way… response.data.records returns ‘undefined’ in the console. I have tryed with JSON.parse() but no success.
When logging types to console:
response variable is a response object with a status 200 and body and bodyText containing the data from the database.
response.data is a string type containing the string JSON with the data from the database.
When trying to use JSON.parse(response.data) or JSON.parse() on anything in the callback of the POST method I get the following error in the console:
RadniStol.js?version=0.1.1:17 Uncaught (in promise) SyntaxError: Unexpected token in JSON at position 0
at JSON.parse (<anonymous>)
at VueComponent.$http.post.then.response (RadniStol.js?version=0.1.1:17)
at <anonymous>
I am really starting to lose my mind over this issue, please help!
Thank you
If response.data is string, with JSON inside, then to access the records field, you should decode it like this:
JSON.parse(response.data).records
Not sure this has something to do with PHP or Vue.js, it is just plain javascript issue.
If it not decodes, than problem is definitely in response.data. For example
{"records":[{"DODAN_NA_RADNI_STOL":"1","..."}]}
is not a valid JSON, because key "..." needs to have some value.
But it seems to me that response.data is already parsed.
What I suggest you to do, is to write handler of the response as separate function, make response object that mimics actual response object by hand, and then test it separately from request. So you could show us request object and function that works with it.
I had the same error and fixed it.
Result will be response.body not response.data.
Here is my code:
getS: function(page) {
this.$http.get('vue-manager?page=' + page).then((response) => {
var data = JSON.parse(response.body);
this.student = data.data.data;
this.pagination = data.pagination;
});
},

phantomjs global variables call in page.evaluate

I want to know how to use a varaible globally in phantomjs so that it can be used in the page.evaluate function also.
I have gone through some previous answers but but able to understand well
JSON-serializable arguments can be passed to page.evaluate.
Here is a very basic the following example using this technique :
page.open('http://stackoverflow.com/', function(status) {
var title = page.evaluate(function(s) {
return document.querySelector(s).innerText;
}, 'title');
console.log(title);
phantom.exit();
});

Passing variable into page.evaluate - PhantomJS

Is it possible to pass variables in a page.evaluate in my case below?
function myFunction(webpage, arg1, arg2){
var page = require('webpage').create();
page.viewportSize = { width: 1920, height: 1080 };
page.open(webpage, function (status){
if (status == 'success') {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js", function(){
page.evaluate(function(){
arg = arg1 + arg2;
console.log(arg);
});
});
}
else { phantom.exit(); }
});
}
I tried several methods found on the internet but nothing actually impossible to get to its variables.
Thank you in advance for your help :)
As usual, the answer is clearly stated in the documentation of evaluate function:
As of PhantomJS 1.6, JSON-serializable arguments can be passed to the function. In the following example, the text value of a DOM element is extracted. The following example achieves the same end goal as the previous example but the element is chosen based on a selector which is passed to the evaluate call:
The example that follows demonstrates the usage:
var title = page.evaluate(function(s) {
return document.querySelector(s).innerText;
}, 'title');
console.log(title);
I have phantomjs 1.5.0, so instead of compiling 1.6 or higher version I went for an alternative solution:
So I've saved arguments to selectors.js file
-------------selectors.js starts----------------
var selectors = "div.nice"
-------------selectors.js ends----------------
and then injected them into the page:
page.injectJs("selectors.js");
More details can be found here: http://phantomjs.org/api/webpage/method/inject-js.html
I use phantom 4.0.4, below works for me, https://www.npmjs.com/package/phantom
var arg = 'test'
page.evaluate(function(arg) {
console.log(arg)
}, arg);