Comment cliquer sur une "option de sélection", puis évaluer le contenu chargé avec casperjs

C'est comment je le fais

this.evaluate(function() {
    $('#select_element_selector').val('value').change();
});

La change() est très important

Je suis en supposant que vous avez jQuery sur la page

Recommandé jQuery solution ne fonctionne pas pour moi.

casper.evaluate(function() {
    $('#select_element_selector').val('value').change();
});

Tout, le capture() commande affiche l'sélectionnez l'option sélectionnée visuellement, il ne fait pas déclencher l'événement. Essayez d'utiliser ceci avec l' waitForText() de commande par exemple, le programme de temporisation.

casper
  .start('http://factfinder.census.gov/faces/tableservices/jsf/pages/productview.xhtml?pid=DEC_00_SF1_DP1&prodType=table')
  .waitForText('Add/Remove Geographies', function () {
    casper.click('#addRemoveGeo_btn');
  })
  .waitForText('Select a geographic type:', function () {
    casper.evaluate(function () {
      $('#summaryLevel').val('050').change();
    });
  })
  .waitForText('Select a state:', function () {
    casper.capture('test.png');
  })
  .run();

Ce qui a fonctionné pour moi, a été le code fourni ci-dessous (merci @ArtjomB).
Comment remplir sélectionnez un élément qui n'est pas incorporé dans un formulaire avec CasperJS?

casper.selectOptionByValue = function(selector, valueToMatch){
    this.evaluate(function(selector, valueToMatch){
        var select = document.querySelector(selector),
            found = false;
        Array.prototype.forEach.call(select.children, function(opt, i){
            if (!found && opt.value.indexOf(valueToMatch) !== -1) {
                select.selectedIndex = i;
                found = true;
            }
        });
        //dispatch change event in case there is some kind of validation
        var evt = document.createEvent("UIEvents"); //or "HTMLEvents"
        evt.initUIEvent("change", true, true);
        select.dispatchEvent(evt);
    }, selector, valueToMatch);
};

casper.selectOptionByValue('#summaryLevel', '050');

Bien, je pense CasperJS devrait fournir un support natif pour sélectionner les options à partir d'une liste déroulante quand ils ne sont pas en dehors d'un formulaire (http://docs.casperjs.org/en/latest/modules/index.html). Le sélénium offre la select et addSelection commandes (https://seleniumhq.github.io/selenium/docs/api/javascript/index.html). J'ai également déposé une question en suspens billet sur le CasperJS GitHub page pour mettre en œuvre ce mode natif (https://github.com/n1k0/casperjs/issues/1390).

Difficile, mais en regardant l'URL, je pense que Casper pouvez gérer ce bien.

Laissez-moi savoir si vous avez besoin d'aide avec le code pour cela, mais cela va prendre un peu plus de temps afin de vous donner un peu de pseudo-code,

• créer un objet vide de couleurs et la couleur des Id { color: colorId }
• que vous êtes déjà en sorte de faire, trouver le menu select [name='couleur'] et parcourir les options. pousser tout ce qui n'a pas une valeur de 0 à votre objet
• écrire une nouvelle fonction qui va aller à l'url http://shop.baumundpferdgarten.com/showmodel/?model=10344-4180&color=-9999&size=0&addbread=OUTLET&addbread2=DRIZIA&currentimage=1&selectedmi=a1_INDEX_14&prev=10850-4314&next=10413-4183 et remplacer la couleur ID où color=-9999.

exemple:

'http://shop.baumundpferdgarten.com/showmodel/?model=10344-4180&color='
+ object.colorId + '&size=0&addbread=OUTLET&addbread2=DRIZIA&currentimage=1&selectedmi=a1_INDEX_14&prev=10850-4314&next=10413-4183'

• Ajouter les tailles les couleurs existantes, objet ou créer un nouveau, ou à la console.journal d'eux. Le monde est à vous!

Un peu hacky façon de le faire sans à l'aide de jQuery en utilisant intégré dans casper méthodes:

//Assumes the select box is on the first item at index 0
chooseSelectOption = (friendlyName : string, selectLocator : string, optionIndex : number) => {
    casper.test.assertExists(selectLocator, "then select index " + optionIndex + " in the " + friendlyName + " select box");
    casper.click(selectLocator);
    this.goDown(selectLocator, optionIndex);
};

//recursive funtion to go down various levels
private goDown = (locator: string, depth : number, currentLevel : number = 0) => {
    if (currentLevel >= depth) { return; }
    casper.sendKeys(locator, casper.page.event.key.Down, { keepFocus: true });
    this.goDown(locator, depth, currentLevel + 1);
};

C'est à la Machine, mais vous pouvez le modifier pour vanilla JS si vous avez besoin de. Vous avez besoin d'utiliser une fonction récursive car un normal pour boucle est en difficultés avec capser du système de file d'attente.

tejesh95 la solution a fonctionné pour moi avec quelques changements mineurs, n ° 1, je ne pouvais pas obtenir findElementById de travail donc passé à 'document.querySelector('#selectorId)' . J'ai aussi dû changer 'onchange' "onclick". Voici le code à l'intérieur de la casperjs harnais de test:

casper.then(function() {
  this.evaluate(function() {
  var select_element = document.querySelector('#selectorId')
  select_element.value = 'stringValue'
  select_element.onclick
})

})

Suivre sur remarque: Votre kilométrage peut varier sur le dessus, j'ai trouvé des résultats incohérents ailleurs, la valeur du texte permettrait de mettre à jour, mais le contrôle ne serait pas le feu. Frustrant!