填写一个非文本类型的输入字段并触发 CasperJS 中的事件

Question

我要做一个网站的自动化测试，想用CasperJS来学习。由于专有原因，我不能提供太多代码。

这是我要填写的输入示例：

<input data-bind="value: firstname, valueUpdate: ['blur'], css: {valid:(firstname.isValid() )} " title="" class="valid" aria-required="true" id="firstname" name="firstname">

如您所见，此输入不是文本类型，也没有值属性。因此，我无法使用 casper.fill() 方法。此外，如果我使用 evaluate() 进入网页范围并使用 document.querySelector 更改输入值，更改将不是永久性的，因为附加到输入文本更改的事件不会被触发。

这是我的代码：

this.waitForSelector('#memberTitle', function then(){
    var testname = 'thisIsNotPermanent';
    this.evaluate(function(testname){
        document.querySelector('#firstname').value = testname;
    }, testname);
});

如果我在之后立即捕获屏幕，我会在输入框中看到我的文本。但是，如果我等待 500 毫秒并再次捕获，文本就会消失，我想，事件被触发或只是被清除，因为它实际上未能正确触发。

附加到输入的事件是 Blur、Change 和 Keypress。

使用 CasperJS，我怎样才能达到尽可能低的水平来模仿用户使用他的键盘并充分利用网站已有的功能？

这些测试的重点是与现有的东西一起工作。这个想法是不必手动浏览网站的 JavaScript。

Answer 1

这正是 casper.sendKeys(selector, keys) 函数的用途，它将发送 native 按键并（希望）触发该文本元素上的事件：

this.waitForSelector('#memberTitle', function then(){
    var testname = 'thisIsNotPermanent';
    this.sendKeys('#firstname', testname);
}).wait(20, function(){
    this.capture('screenshot.png');
});

<input> 没有 type 属性的元素默认为 Text 类型。

Answer 2

这个答案是为了从另一个角度完成这个问题。正如 Artjom B. 提到的，填充输入并触发其事件的正确方法是使用 sendKeys() 函数。但是，如果您遇到像我这样的情况，事件不会触发或需要一定时间，请知道您可以手动触发这些事件。

如果您使用 firefox 检查器工具，您会看到您的输入或标签将附加一个标记为 ev 的事件。如果你 select 它，你将按顺序对所有触发的事件进行细分。

您可以看到 jQuery click() 事件将被调用。在 casperjs 中，您现在可以从评估范围执行此操作：

this.evaluate(function(){
    $(".discard-answer").click();
})

从那里，您可以链接 jQuery 事件，就像在我的情况下，我必须 .blur().change().click();

了解事件是否 jQuery 很重要。

希望对您有所帮助。

填写一个非文本类型的输入字段并触发 CasperJS 中的事件

Fill an input field that is not of type text and that triggers events in CasperJS

javascript

dom-events

phantomjs

casperjs