Access ckeditor from casperjs test script

Question

In a django project I've loaded a ckeditor in this way

CKEDITOR.replace('id_content', {
     toolbar: 'Basic',
     readOnly: {{ editing|yesno:"false,true" }}
});

and in my casperjs script I tried to access the editor in this way

var ckeditor = this.evaluate(function () {
      return document.querySelector('#id_content').contentWindow.CKEDITOR; 
});

ckeditor.instances.id_content.setData( '<p>AAA bbb CCC</p>' );

based on what I read in this post access-javascript-ckeditor-object-within-an-iframe but console output is the following

FAIL TypeError: 'null' is not an object (evaluating 'ckeditor.instances')

Any idea? Thanks!

Edit:

If I try to do all stuff in evaluate method the ckeditor content not changes. The following code

var ckeditor = this.evaluate(function () {  
    var ckeditor = document.querySelector('#id_content').contentWindow.CKEDITOR;
    ckeditor.instances.id_content.setData('<p>AAA bbb CCC </p>'); 
});

this.test.assertField('content', '<p>AAA bbb CCC</p>');

fails an output

FAIL "content" input field has the value "<p>AAA bbb CCC</p>"
#    type: assertField
#    code: this.test.assertField('content', '<p>AAA bbb CCC</p>');
#    subject: false
#    inputName: "content" 
#    actual: "<p>In et qui nobis eos. Rem impedit ullam nihil placeat in. Et ea explicabo earum quam. Earum rerum ipsum ea soluta.</p>\n"
#    expected: "<p>AAA bbb CCC</p>"

Artjom B. · Accepted Answer · 2014-06-13 12:29:48Z

1

You cannot pass functions to and from page context in casperjs (and phantomjs). You can only pass primitives like Number, String, [] and {}. So contentWindow.CKEDITOR is probably an object created with new. You need to do all your stuff inside the page context and just pass the necessary strings into the page context:

var data = '<p>AAA bbb CCC</p>';
this.evaluate(function (contendata) {
      var ckeditor = document.querySelector('#id_content').contentWindow.CKEDITOR; 
      ckeditor.instances.id_content.setData(contendata);
}, data);

To make sure that ckeditor had time to make all adjustments to the page, you can wait a little:

this.thenEvaluate(function (contendata) {
      var ckeditor = document.querySelector('#id_content').contentWindow.CKEDITOR; 
      ckeditor.instances.id_content.setData(contendata);
}, data);
this.wait(1000, function(){
    this.test.assertField('content', '<p>AAA bbb CCC</p>');
}); // sec

or even wait for the specific data:

var x = require("casper").selectXPath;
this.thenEvaluate(function (contendata) {
      var ckeditor = document.querySelector('#id_content').contentWindow.CKEDITOR; 
      ckeditor.instances.id_content.setData(contendata);
}, data);
this.waitForSelector(x("//*[contains(text(),'AAA bbb CCC')]"), function(){
    this.test.assertField('content', '<p>AAA bbb CCC</p>');
});

edited Jun 13, 2014 at 12:29

answered Jun 13, 2014 at 10:09

Artjom B.

62k26 gold badges137 silver badges236 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Salvatore Avanzo Over a year ago

The advice is correct but the content still does not change.

Artjom B. Over a year ago

@SalvatoreAvanzo I'm not familiar with ckeditor so I don't know it is the right call you do. Also, how do you check if it is not right? Do you make a screenshot? You might have to wait before doing that.

Collectives™ on Stack Overflow

Access ckeditor from casperjs test script

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related