Back to Top

Insert Data In An iframe Element Using Casperjs

Updated 3 February 2017

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>
   <body id="tinymce" class="mceContentBody " spellcheck="false" dir="ltr">

Script is here –

* Webkul Software.
* @category Webkul
* @package Webkul_CasperJS
* @author Webkul
* @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (
* @license

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 () {"button#save-btn");
	}); () {

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

Start your headless eCommerce
Find out More
. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home