Wie eine „wählen Sie die Option“ klicken und dann geladenen Inhalt auswerten mit casperjs

Question

Ich versuche, die Größen für dieses Produkt zu kriechen:

Link to product

Das Problem: Die Größen werden geladen, nachdem die Farbe Das Produkt ist ausgewählt.

Im Quellcode der Produktseite kann ich sehen, dass das Dropdown eine onchange-Methode hat: Es klickt das Formular #postColor onchange.

Die dropdown:

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

Die #postColor Form, die Onchange geklickt wird:

<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;"> 

Das ist mein Code so weit ist und es funktioniert nicht:

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

Ich vermute, dass das Problem darin besteht, dass beim Klicken auf eine Farbe eine völlig neue Seite geladen wird (die Größen werden nicht dynamisch angehängt)).

Wie würden Sie dieses Problem lösen?

Answer 1

ist, wie ich es tun

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

Die change() ist sehr wichtig

Ich gehe davon aus, dass Sie hier jQuery auf der Seite

Answer 2

Tricky, aber mit Blick auf die URL, denke ich, dass Casper damit gut umgehen kann.

Lassen Sie mich wissen, wenn Sie mit dem Code für diese Hilfe benötigen, aber es wird etwas länger dauern, so dass Sie von Pseudo-Code ein wenig zu geben,

• ein leeres Objekt von Farben und Farb IDs erstellen { color: colorId}
• Wie Sie bereits tun, suchen Sie das Auswahlmenü mit [name = 'color'] und durchlaufen Sie diese Optionen. push alles, was nicht einen Wert von 0 zu Ihrem Objekt hat
• schreiben Sie eine neue Funktion, die auf die 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 gehen und ersetzen Sie die Farbe ID wo color=-9999.

Beispiel:

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

• Entweder fügen Sie die Größen an die vorhandenen Farben Objekt oder eine neue machen, oder sie console.log. Die Welt gehört dir! Diese

Answer 3

Got gleiche Problem haben.Meine Lösung ist:

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

Answer 4

Ich weiß nicht, ob Sie eine Lösung für Ihr Problem gefunden, aber hier ist, wie ich es lösen würde:

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

Die empfohlene jQuery Lösung funktioniert nicht wirklich für mich.

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

Während der capture() Befehl zeigt die Auswahloption als visuell ausgewählt, ist es nicht eigentlich das Ereignis auslösen. Verwenden Sie dies zum Beispiel mit dem Befehl waitForText(); Das Programm wird ablaufen.

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

Was für mich funktionierte, war der unten angegebene Code (danke @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'); 

Obwohl, ich glaube CasperJS nativen Support-Optionen von einem Dropdown-Menü auswählen liefern sollte, wenn sie nicht auseinander eine Form (http://docs.casperjs.org/en/latest/modules/index.html) sind. Selen bietet die select und addSelection Befehle (https://seleniumhq.github.io/selenium/docs/api/javascript/index.html). Ich habe auch ein ausstehendes Ticket auf der CasperJS GitHub Seite abgelegt, um dies nativ zu implementieren (https://github.com/n1k0/casperjs/issues/1390).

Answer 6

Eine etwas hacky Weg, dies ohne zu tun mit jQuery eingebauten bei der Nutzung von casper Methoden ist:

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

Das in Typoskript ist, aber Sie können für Vanille JS bearbeiten, wenn Sie benötigen. Sie müssen eine rekursive Funktion verwenden, da eine normale for-Schleife in Schwierigkeiten mit dem Warteschlangensystem von Capser gerät.

Answer 7

ist diese einfache Code Kreditkartendaten 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

Vanille Javascript-Lösung (Triggerung Onchange-Methode) ein:

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