Come fare clic su un "opzione di selezione" e quindi valutare il contenuto caricato con casperjs

Question

sto cercando di strisciare le dimensioni di questo prodotto:

Link to product

Il problema: I formati sono caricati dopo il colore del il prodotto è selezionato.

Nel codice sorgente della pagina prodotto, vedo che il menu a discesa ha un metodo onchange: fa clic sul modulo #postColor onchange.

La select discesa:

<select name="color" id="color" class="cposelect" onchange="document.getElementById('postColor').click();" style="width:150px;margin-right: 20px; float: left;"> 
    <option selected="selected" onfocus="if (this.storeCurrentControl != null) storeCurrentControl(event, this);" value="0">Select colour</option> 
    <option onfocus="if (this.storeCurrentControl != null) storeCurrentControl(event, this);" value="-8027">Light Camel</option> 
    <option onfocus="if (this.storeCurrentControl != null) storeCurrentControl(event, this);" value="-9999">black</option> 
</select> 

La forma #postColor, che viene cliccato onchange:

<input type="submit" name="postColor" value="" onclick="location.href=('./?model=10344-4180&amp;color='+document.forms[0].color.value+'&amp;size='+document.forms[0].size.value+'&amp;addbread=OUTLET&amp;addbread2=DRIZIA&amp;currentimage='+document.getElementById('currentimage').value+'&amp;selectedmi=a1_INDEX_14&amp;prev=10850-4314&amp;next=10413-4183'); return false;" id="postColor" class="cpobutton " style="display: none;"> 

Questo è il mio codice finora e non funziona:

casper.start('http://shop.baumundpferdgarten.com/showmodel/?model=10344-4180&addbread=OUTLET&addbread2=DRIZIA&color=0&currentimage=1&selectedmi=a1_INDEX_14', function() { 
    this.test.assertExists('select[name="color"] option:nth-child(2)'); 
    this.click('select[name="color"] option:nth-child(2)'); 
    this.waitForSelector('select[name="size"] option:nth-child(2)', function() { 
     this.test.pass('selector is !'); 
     var sizes = this.evaluate(function() { 
      console.log("======== evaluating ========"); 
      // var sizes = document.querySelectorAll('#size option'); 
      return document.querySelectorAll('#size option'); 
     }); 
     for (var i = sizes.length - 1; i >= 0; i--) { 
      console.log(sizes[i].innerText); 
     } 
    }); 
}); 

Sospetto che il problema è che una pagina completamente nuova viene caricata quando si fa clic su un colore (le dimensioni non vengono aggiunte dinamicamente).

Come risolveresti questo problema?

Answer 1

Questo è come lo faccio

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

Il change() è molto importante

Sto supponendo che avete jQuery nella pagina

Answer 2

Ingannevole, ma guardando l'URL, penso che Casper sia in grado di gestirlo bene.

Fammi sapere se hai bisogno di aiuto con il codice per questo, ma ci vorrà un po 'più a lungo in modo da dare un po' di pseudo-codice,

• creare un oggetto vuoto di colori e ID colore { color: colorId}
• come già si sta facendo, trovare il menu di selezione con [nome = 'colore'] e scorrere tra quelle opzioni. spingere tutto ciò che non ha un valore di 0 per il tuo oggetto
• scrivere una nuova funzione che andrà all'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 e sostituire l'ID colore dove color=-9999.

esempio:

'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'

• aggiungere l'dimensioni per i colori esistenti oggetto o crearne uno nuovo, o console.log. Il mondo è tuo!

Answer 3

Ha ottenuto lo stesso problema qui.La mia soluzione è:

casper.then(function(){ 
    this.evaluate(function() { 
     document.querySelector('select.select-category').selectedIndex = 2; //it is obvious 
    }); 
    this.capture('screenshot.png'); 
}); 

Answer 4

Non so se hai trovato una soluzione al tuo problema, ma qui è come vorrei risolverlo:

casper.click('#color'); 
casper.then(function() { 
casper.waitFor(function check() { 
    return this.evaluate(function() { 
    return document.querySelector('select.select-category').selectedIndex === 2; 
    }); 
}, function then() { 
    /* do the rest that you would want to do!*/ 
    }); 

} 

Answer 5

La soluzione consigliata jQuery in realtà non funziona per me.

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

Mentre, il comando capture() mostra l'opzione di selezione come selezionato visivamente, in realtà non attivare l'evento. Prova ad usare questo con il comando waitForText() per esempio; il programma si spegnerà.

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(); 

Che cosa ha funzionato per me, era il codice fornito di seguito (grazie @ArtjomB). How to fill a select element which is not embedded in a form with 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'); 

Anche se, penso CasperJS dovrebbero fornire il supporto nativo per selezionare le opzioni di un menu a discesa quando non sono parte di una forma (http://docs.casperjs.org/en/latest/modules/index.html). Selenium offre i comandi select e addSelection (https://seleniumhq.github.io/selenium/docs/api/javascript/index.html). Ho anche depositato un ticket di emissione in sospeso sulla pagina GitHub di CasperJS per implementarlo in modo nativo (https://github.com/n1k0/casperjs/issues/1390).

Answer 6

Un modo un po 'hacky per fare questo senza utilizzando jQuery utilizzanti metodi integrati di Casper è:

// 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); 
}; 

Questo è a macchina, ma è possibile modificare per JS vaniglia se è necessario. È necessario utilizzare una funzione ricorsiva in quanto un normale ciclo di loop entra in difficoltà con il sistema di accodamento del capser.

Answer 7

questo è semplice codice per inserire i dati della carta di credito in casper js

casper.evaluate (function (CC, security_code) {

 document.querySelector('input#receipt_creditcard_number').value = CC; 
     document.querySelector('select#receipt_creditcard_month').selectedIndex = 10; 
     document.querySelector('select#receipt_creditcard_year').selectedIndex = 10; 
     document.querySelector('input#receipt_creditcard_verification_value').value = security_code; 
     document.querySelector('input#receipt_save_creditcard_in_profile').click(); 
    }, '4242424242424242','123'); 

Answer 8

vaniglia JavaScript soluzione (innesco onchange metodo):

casper.evaluate(function() { 
    var select_element = document.getElementById('#select_element_selector'); 
    select_element.value = 'value'; 
    select_element.onchange(); 
});