CODEWITHSUNDEEP
javascriptdom-eventsphantomjscasperjs
Kevin Gagnon
Kevin Gagnon

Reputation: 141

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

I have to do automated tests on a website and I want to use CasperJS to learn. For proprietary reasons I can not give too much code.

Here is the example of the input that I am trying to fill:

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

As you can see, this input is not of type text and has no value attribute. Therefore, I can not use the casper.fill() method. Furthermore, if I enter the web page scope using evaluate() and change the input value using document.querySelector, the change will not be permanent as of the events attached to the text change on the input will not be triggered.

Here is my code:

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

If I capture the screen right after, I will see my text written in the input box. However, if I wait 500ms and take another capture, the text is gone as, I suppose, the events are triggered or just cleaned because it actually failed to trigger correctly.

The events attached to the input are of Blur, Change and Keypress.

Using CasperJS, how could I go to the lowest level possible to mimic a user using his keyboard and fully use the website's functionalities already in place?

The whole point of those tests are to work with what is in place. The idea is to not have to manually go through the JavaScript of the web site.

Upvotes: 0

Views: 813

Answers (2)

Kevin Gagnon
Kevin Gagnon

Reputation: 141

This answer is here to complete the question from another angle. As Artjom B. mentionned, the correct way to fill an input and to trigger its events is by using the sendKeys() function. However, if you ever have a case, like mine, where the events will not trigger or will take a certain amount of time, know that you can trigger those manually.

If you use the firefox inspector tool, you will see that your input or tag will have an event attached to it marked as ev. If you select it, you will have a breakdown of all the events, in order, that are triggered.

Here is an example

You can see that the jQuery click() event will be called. In casperjs, from the evaluate scope you can now do this :

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

From there, you can chain jQuery events, like in my case where I had to .blur().change().click();

It is important to know if the event is jQuery or not.

Hope this helps.

Upvotes: 0

Artjom B.
Artjom B.

Reputation: 61892

That's exactly what the casper.sendKeys(selector, keys) function is for which will send native keypresses and (hopefully) trigger the events on that text element:

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

<input> elements without a type attribute default to Text type.

Upvotes: 1

Related Questions