Insert Data In An iframe Element Using Casperjs

If you want to insert data into an iframe element using Casperjs then you can use below mentioned code. Here, I have a form with multiple type of fields and a WYSIWYG Editor with an iframe too. Before filling and submitting the form I have inserted data in the iframe element (<p></p>), then I have filled the rest form fields and submitted it.

If you have multiple iframes on your web page then you can insert data by using their indexes.

html of the iframe on the form page –

<iframe id="description_ifr" src='javascript:""' allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help"></iframe>
<html>
   <body id="tinymce" class="mceContentBody " spellcheck="false" dir="ltr">
      <p></p>
   </body>
</html>

Script is here –

/**
* Webkul Software.
*
* @category Webkul
* @package Webkul_CasperJS
* @author Webkul
* @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
* @license https://store.webkul.com/license.html
*/

var casper = require("casper").create();

casper.start('https://yourwebsite/form/', function() {
    this.withFrame(0, function () {    //'0' is the index of iframe
		this.sendKeys('#tinymce', 'Write whatever you want to insert in your editor');
	});

this.fill('form#edit-product', {
		'product[name]': 'test',
		'product[sku]': 'test',
		'product[price]': '7',
	}, false);
});
casper.then(function () {
	this.click("button#save-btn");
	});

casper.run(function () {
	this.done();
});

You may also check another blog Casperjs : Save All Href And Title In An Array