如何單擊「選擇選項」，然後評估加載的內容與casperjs

我試圖抓取的尺寸爲這款產品：如何單擊「選擇選項」，然後評估加載的內容與casperjs

的問題：大小的顏色後裝入該產品被選中。

在產品頁面的源代碼中，我可以看到下拉列表有一個onchange-method：它點擊表格#postColor onchange。

選擇下拉：

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

的#postColor形式，它被點擊的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;">

這是到目前爲止我的代碼，它不工作：

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

我懷疑這個問題是一個全新的頁面被加載時點擊一個顏色（大小不動態追加）。

你會如何解決這個問題？

來源

2013-05-02 2083

這是我要做的事

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

的change()是非常重要的

我假設你擁有jQuery的頁面

來源

2013-05-15 16:52:01 wmarbut

這並不爲我工作。它改變了選項下拉視覺（以及可與casper.capture可以看出），但它實際上並沒有引發選定的值。 – tfmontague 2016-01-01 01:51:35

Perfec t謝謝 – CodeGuru 2016-11-16 13:09:28

棘手，但看着URL，我認爲卡斯帕可以很好地處理這個問題。

讓我知道如果你需要爲這個代碼幫助，但它會需要更長的時間，從而給你一個位的僞代碼，

創建的顏色和顏色標識{一個空對象顏色：colorId}
就像你已經在做的那樣，找到[name ='color']的選擇菜單並循環這些選項。將不具有值0的任何東西推送到您的對象
編寫一個新函數，該函數將轉到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並替換顏色ID，其中color=-9999。

例如：

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

無論是尺寸添加到現有的顏色對象，或者使一個新的，或CONSOLE.LOG他們。世界是你的！

來源

2013-05-03 14:51:24 imjared

在這裏得到了同樣的問題上。我的解決辦法是：

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

來源

2013-08-16 13:38:28

我嘗試了鼠標元素，但你的解決方案似乎是更好的。 – 2014-01-22 14:33:08

只需嘗試獲取我想要的數據即可。 – 2017-07-31 06:02:56

我不知道你是否找到了解決您的問題，但這裏是我會怎麼解決這個問題：

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

}

來源

2015-11-17 15:32:08 Fabio

推薦的jQuery的解決方案並不實際工作爲了我。

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

雖然capture()命令顯示的選擇選項是可視化選擇的，但實際上並未觸發該事件。例如，用waitForText()命令嘗試使用此命令;該程序將超時。

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

對我有用的是下面提供的代碼（謝謝@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');

雖然，我認爲應該CasperJS提供原生支持，選擇從下拉選項的時候都沒有開的形式（http://docs.casperjs.org/en/latest/modules/index.html）的。硒提供select和addSelection命令（https://seleniumhq.github.io/selenium/docs/api/javascript/index.html）。我還在CasperJS GitHub頁面上提交了一個掛起的問題票據以實現本地化（https://github.com/n1k0/casperjs/issues/1390）。

來源

2016-01-01 02:21:22 tfmontague

稍微哈克的方式做到這一點不使用jQuery利用所內置的卡斯帕方法是：

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

這是打字稿，但如果你需要，你可以編輯香草JS。您需要使用遞歸函數，因爲正常for循環會遇到capser排隊系統的困難。

來源

2016-06-16 12:30:28 Ruskin

這是簡單的代碼在卡斯帕JS

casper.evaluate（功能（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');

來源

2016-08-01 18:29:50 Ravishankar

香草JavaScript的解決方案（觸發的onchange法）：

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

來源

2017-07-22 07:35:44 tejesh95

如何單擊「選擇選項」，然後評估加載的內容與casperjs

回答

相關問題