12

この商品のサイズをクロールしようとしています:

製品へのリンク

問題: 製品の色が選択された後にサイズが読み込まれます。

製品ページのソース コードでは、ドロップダウンに 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 フォーム:

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

色をクリックするとまったく新しいページが読み込まれることが問題だと思います（サイズは動的に追加されません）。

この問題をどのように解決しますか？

4

9 に答える 9

14

これが私のやり方です

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

はchange()非常に重要です

ページにjQueryがあると仮定しています

于 2013-05-15T16:52:01.980 に答える
1

これは、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');
于 2016-08-01T18:29:50.430 に答える
0

問題の解決策が見つかったかどうかはわかりませんが、次の方法で解決できます。

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-17T15:32:08.603 に答える
0

トリッキーですが、URL を見ると、Casper はこれをうまく処理できると思います。

このコードについてサポートが必要な場合はお知らせください。ただし、少し時間がかかるため、少し疑似コードを提供します。

  • 色と色 ID の空のオブジェクトを作成します { color: 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-03T14:51:24.807 に答える
0

tejesh95 のソリューションは、いくつかのマイナーな変更で機能しました。 #1 findElementById を機能させることができなかったため、 'document.querySelector('#selectorId)' に切り替えました。また、「onchange」を「onclick」に変更する必要がありました。casperjs テスト ハーネス内のコードは次のとおりです。

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

}))

注: あなたの走行距離は上記で異なる場合があります。他の場所で一貫性のない結果が見つかりました。テキスト値は更新されますが、基になるコントロールは起動しません。もどかしい！

于 2018-03-20T04:40:20.997 に答える
0

組み込みの casper メソッドを利用して 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);
};

これは TypeScript ですが、必要に応じてバニラ JS 用に編集できます。通常の for ループでは capser のキューイング システムが困難になるため、再帰関数を使用する必要があります。

于 2016-06-16T12:30:28.020 に答える
0

バニラ JavaScript ソリューション (onchange メソッドのトリガー):

casper.evaluate(function() {
    var select_element = document.getElementById('select_element_selector');
    select_element.value = 'value';
    select_element.onchange();
});
于 2017-07-22T07:35:44.067 に答える