0

I seem to be unable to select an element of a drop down list and having the page to recognize the change. And as the option values are generated, I cannot click them directly, but have to make the selection by some kind of index/number.

So when I use this code to select the second option:

casper.evaluate(function()
{
    document.querySelector('select[id="sub-product-select"]').selectedIndex = 2;
    return true;
});

The second option is set - but the page does not recognize the change and does not change some depending values like price or activating the "buy" button of the same form.

The drop down selection looks like this:

<form id="form-product-add-to-cart" action="/cart/add">
    <select id="sub-product-select">
        <option value=""></option>
        <option value="02T01S1-01"></option>
        <option value="02T01S1-02"></option>
        <option value="02T01S1-03"></option>


So question is: How to not only select the the second entry, but make the page recognize it like it were clicked or got a "return" after selection?

yaer
  • 1
  • 1
  • You can trigger `change` event after selection. – Batu.Khan Apr 10 '14 at 15:00
  • Stupid question, but I'm pretty new to casper + JS in general: How do I do that in this context? – yaer Apr 10 '14 at 15:21
  • See this question http://stackoverflow.com/questions/22508688/use-a-select-outside-of-a-form-with-casperjs, should help you. – Fanch Apr 10 '14 at 15:21
  • Yes, I tried that before. But `casper.mouse.up('select[id="sub-product-select"] > option:nth-child(2)');`didn't work (same as with regular click() ). It just does not select something else, the select field stays on the default value like it never has been clicked at all. – yaer Apr 10 '14 at 15:33
  • @BatuZet Managed to add the `change`. It didn't work before, since I didn't use the DOM syntax. Working line (right after the `querySelector`): `$('select[id="sub-product-select"]').change();` – yaer Apr 10 '14 at 16:04

1 Answers1

0

Well, for me this code works :

this.mouse.down("select#sub-product-select");//press left button 
this.mouse.up('select#sub-product-select > option:nth-of-type(2)');//release left button

Is your selector unique? How do you check the changes? Try slimerJS to see them in live (the press/release click).

Fanch
  • 3,274
  • 3
  • 20
  • 51
  • Yes, I saw this solution in another question somewhere. I tried this too (and tried to verify via screen captures; selector is unique), but it didn't work at all; see 4th comment on the question commentaries. In the end I used the `.change()` line as in the comment above. Combined with the querySelecter it did the trick. – yaer Apr 14 '14 at 07:56