Выбор и активация правильных элементов управления на сайте, управляемом AJAX

Итак, я пытаюсь сделать это, когда каждый раз, когда я посещаю любую страницу nike.com sneaker (без ссылки HTML), она автоматически выбирает размер обуви, добавляет ее в корзину и проверяет за мной.

В настоящее время я пытаюсь использовать этот script (см. ниже), но каждый раз, когда я перехожу на страницу кроссовки, он не правильно добавляет размер обуви, который я хочу, но просто идет прямо в чек с ничем в моей тележке.

Мне говорят, что мне нужно сопоставить код с фактическим HTML-страницей, но я не знаю, как это сделать. Пожалуйста, помогите.

// ==UserScript==
// @name     _Nike auto-buy(!!!) script
// @include  http://*/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var okayToClickAddtoCart = false;

//-- Assumes that size is a standard <option> tag or similar...
waitForKeyElements (".selectBox-label[value='10']", selectShoeSize);

function selectShoeSize (jNode) {
    jNode.prop ('selected', true);

    okayToClickAddtoCart = true;
}


waitForKeyElements (".add-to-cart.nike-button", clickAddToCart);

function clickAddToCart (jNode) {
    if ( ! okayToClickAddtoCart) {
        return true;    //-- Don't click yet.
    }

    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}


waitForKeyElements (".checkout-button", clickCheckoutButton);

function clickCheckoutButton (jNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}


Ссылка на "целевую страницу"
Снимок целевого HTML (в случае удаления или изменения целевой страницы Nike)

Ответы

Ответ 1

Вместо того, чтобы просто изменить script вопрос, я надеюсь кратко описать, как script эти страницы и действия с помощью Greasemonkey/Tampermonkey.

Шаги:

  • Обратите внимание на то, что вы делаете вручную. Особое внимание обратите на элементы, добавленные/измененные на странице javascript, и необходимую последовательность шагов, если они есть.

  • Используя Firebug и/или Firefox-инспектор и/или инструменты разработчика Chrome, определите селектор CSS/jQuery для всех элементов, которые вы будете читать или манипулировать. Это особенно легко сделать с помощью Firebug.

  • Используйте jQuery для управления статическим HTML. Используйте waitForKeyElements для обработки узлов, добавленных или измененных с помощью javascript (AJAX). Используйте API Greasemonkey, который также поддерживается Tampermonkey и частично поддерживается браузерами Chrome - для совершения любых междоменных вызовов страниц или для сохраняйте любые значения между загрузками страниц для междоменных наборов страниц.

Конкретный пример:

  • Для целевых страниц OP OP хочет: (a) автоматически выбрать размер обуви, (b) добавить обувь в корзину для покупок, и (c) нажмите кнопку выписки.

    Это требует ожидания и/или нажатия на пять (5) элементов страницы, например:

    Установить размер

    Отъезд


  • Используя Firebug (или аналогичный инструмент), мы получаем структуру HTML для ключевых узлов. Например, в раскрывающемся списке SIZE есть HTML:

    <div class="size-quantity">
    <span class="sizeDropdown selectBox-open">
        ...
        <label class="dropdown-label selectBox-label-showing">SIZE</label>
        ...
        <a class="selectBox size-dropdown mediumSelect footwear selectBox-dropdown" ...>
            ...
        </a>
    </span>
</div>

    Если ссылка действительно отключает событие mousedown, а не щелчок.

    Firebug дает нам путь к CSS:

    html.js body div#body div#body-wrapper.fullheight div#body-liner.clear div#content div#pdp.footwear div#product-container.clear div.pdp-buying-tools-container div.pdp-box div.buying-tools-container div#PDPBuyingTools.buying-tools-gadget form.add-to-cart-form div.product-selections div.size-quantity span.sizeDropdown a.selectBox

    Что мы можем сбрасывать до:

    div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown

    для разумного селектора, который, вероятно, переживет тривиальные изменения страницы и вряд ли вызовет нежелательные страницы/продукты.

    ~~~~~~~~~~~~~
    Обратите внимание, что Firebug также помогает нам понять, какие события связаны с тем, что имеет решающее значение при определении того, что нам нужно вызвать. Например, для этого node я вижу:

    События для первого ключа node

    В этой ссылке нет href, и она не прослушивает события click. В этом случае мы должны вызвать mousedown (или keydown).

    ~~~~~~~~~~~~~
    Используя аналогичный процесс для других 4 ключевых узлов, мы получаем селекторов CSS/jQuery:

    Node 1:     div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown

Node 2:     ul.selectBox-dropdown-menu li a:contains('10')
            (But this will need an additional check)

Node 3:     div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox span.selectBox-label:contains('(10)')

Node 4:     div.footwear form.add-to-cart-form div.product-selections div.add-to-cart

Node 5:     div.mini-cart div.cart-item-data a.checkout-button:visible


  • Наконец, мы используем waitForKeyElements для отправки необходимых событий на узлы ключей и для последовательности через правильный порядок операций.

В результате полный, рабочий script:

// ==UserScript==
// @name     _Nike auto-buy shoes(!!!) script
// @include  http://store.nike.com/*
// @include  https://store.nike.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var targetShoeSize  = "10";

//-- STEP 1:    Activate size drop-down.
waitForKeyElements (
    "div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown",
    activateSizeDropdown
);
function activateSizeDropdown (jNode) {
    triggerMouseEvent (jNode[0], "mousedown");

    //-- Setup step 2.
    waitForKeyElements (
        "ul.selectBox-dropdown-menu li a:contains('" + targetShoeSize + "'):visible",
        selectDesiredShoeSize
    );
}

//-- STEP 2:    Select desired shoe size.
function selectDesiredShoeSize (jNode) {
    /*-- Because the selector for this node is vulnerable to false positives,
        we need an additional check here.
    */
    if ($.trim (jNode.text () ) === targetShoeSize) {
        //-- This node needs a triplex event
        triggerMouseEvent (jNode[0], "mouseover");
        triggerMouseEvent (jNode[0], "mousedown");
        triggerMouseEvent (jNode[0], "mouseup");

        //-- Setup steps 3 and 4.
        waitForKeyElements (
            "div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox "
            + "span.selectBox-label:contains('(" + targetShoeSize + ")')",
            waitForShoeSizeDisplayAndAddToCart
        );
    }
}

//-- STEPS 3 and 4: Wait for shoe size display and add to cart.
function waitForShoeSizeDisplayAndAddToCart (jNode) {
    var addToCartButton = $(
        "div.footwear form.add-to-cart-form div.product-selections div.add-to-cart"
    );
    triggerMouseEvent (addToCartButton[0], "click");

    //-- Setup step 5.
    waitForKeyElements (
        "div.mini-cart div.cart-item-data a.checkout-button:visible",
        clickTheCheckoutButton
    );
}

//-- STEP 5:    Click the checkout button.
function clickTheCheckoutButton (jNode) {
    triggerMouseEvent (jNode[0], "click");

    //-- All done.  The checkout page should load.
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}