How to set value of an input tag in casperJs

Question

I have input element as shown :

<input type="text" class="bg-white" id="couponCode" value="">

How can i set/fill its value using casperJs

Womanhater

Answer 1

Using casper.sendKeys('selector', value);

http://casperjs.readthedocs.org/en/latest/modules/casper.html#sendkeys

Jacquelyn

I've been searching for this answer for an hour or more. Thank you very much. – Algernon

is the focus of the cursor stays there @Srikanth Malyala? – Lauricelaurie

But what to do , if id is not given for that input ? @Srikant Malyala – Blubbery

You can select it by a class or by some attribute, e.g. ('.some-btn') – Mingy

Answer 2

There are a few different methods available for accomplishing this task.

You should use casper.sendKeys() unless you need to perform a more complex operation.

---

casper.sendKeys():

If you would like to set the value from the CasperJS environment, and the input element is optionally inside a form element, then you can use casper.sendKeys():

casper.sendKeys('#couponCode', 'Hello, world!');

casper.fill():

If you would like to set the value from the CasperJS environment, and the input element is inside a form element, and includes a name attribute, then you can use casper.fill():

casper.fill('#form', {
  couponCode: 'Hello, world!', // #form [name="couponCode"]
});

casper.fillSelectors():

If you would like to set the value from the CasperJS environment, and the input element is inside a form element, and you would like to reference the input element using a CSS3 selector, then you can use casper.fillSelectors():

casper.fillSelectors('#form', {
  '#couponCode': 'Hello, world!', // #form #couponCode
});

casper.fillLabels():

If you would like to set the value from the CasperJS environment, and the input element is inside a form element, and includes an associated label element with text, then you can use casper.fillLabels():

casper.fillLabels('#form', {
  couponCode: 'Hello, world!', // #form label[text()="couponCode"] input
});

casper.fillXPath():

If you would like to set the value from the CasperJS environment, and the input element is inside a form element, and you would like to reference the input element using an XPath selector, then you can use casper.fillXPath():

casper.fillXPath('#form', {
  '//*[@id="couponCode"]': 'Hello, world!', // #form #couponCode
});

casper.evaluate():

If you would like to set the value from the Page DOM environment, and the input element is optionally inside a form element, then you can use casper.evaluate():

casper.evaluate(function () {
  document.getElementById('couponCode').value = 'Hello, world!';
});

Note: Similarly to evaluate(), you can also use: evaluateOrDie(), thenEvaluate(), or thenOpenAndEvaluate() (if you would like to accomplish two or more operations at once in relation to the steps being executed).

Cockiness