如何在 casperJs 中设置输入标签的值

Question

我有如图所示的输入元素：

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

如何使用 casperJs 设置/填充其值

Answer 1

使用casper.sendKeys('selector', value);

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

Answer 2

有几种不同的方法可用于完成此任务。

您应该使用casper.sendKeys()，除非您需要执行更复杂的操作。

---

casper.sendKeys():

如果您想从 CasperJS 环境中设置值，并且 input 元素可选在 form 元素内，那么您可以使用 @ 987654335@:

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

casper.fill():

如果您想从 CasperJS 环境 中设置值，并且 input 元素 在 在 form 元素内，并且 包含 一个name 属性，那么你可以使用casper.fill()：

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

casper.fillSelectors():

如果您想从 CasperJS 环境 设置值，并且 input 元素 在 在 form 元素内，并且您想引用input 元素使用 CSS3 选择器，那么你可以使用 casper.fillSelectors():

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

casper.fillLabels():

如果您想从 CasperJS 环境中设置值，并且 input 元素是在 form 元素内，并且 包含 与文本关联的label 元素，则可以使用casper.fillLabels()：

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

casper.fillXPath():

如果您想从 CasperJS 环境 中设置值，并且 input 元素 在 在 form 元素内，并且您想引用input 元素使用 XPath 选择器，那么您可以使用 casper.fillXPath():

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

casper.evaluate():

如果您想从 Page DOM 环境中设置值，并且 input 元素可选在 form 元素内，那么您可以使用casper.evaluate():

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

注意：与evaluate()类似，您也可以使用：evaluateOrDie()、thenEvaluate()或thenOpenAndEvaluate()（如果您想同时完成两个或多个相关操作到正在执行的步骤）。