AJAX 主導の Web サイトのインタラクションを効果的に自動化するにはどうすればよいですか?

AJAX 駆動型サイトでの適切なコントロールの選択

AJAX 駆動型 Web サイトの移動と操作は、自動スクリプトにとって難しい場合があります。このような Web サイトを効果的に自動化するためのステップバイステップのガイドは次のとおりです:

1. ユーザーのアクションを観察する: 変更または追加された主要な要素を含め、ページ上で実行する手動の手順を書き留めます。 JavaScript による。
2. ページ要素の識別: Firebug や Chrome Developer などのブラウザ ツールを使用します。ページ構造を検査し、主要要素の CSS/jQuery セレクターを決定するツール。
3. ページ要素の操作: jQuery およびその他のブラウザ ツールを使用して、静的 HTML 要素を操作します。 waitForKeyElements を利用して、JavaScript または AJAX によって動的に変更される要素を処理します。

具体的な例: Nike Auto-Purchase Script

目標: 選択特定の靴のサイズを選択してカートに追加し、すべての Nike スニーカーのチェックアウトに進みますページ。

手順:

1. 主要要素の識別:

   • サイズ ドロップダウン: div.フットウェアフォーム.カートに追加フォームspan.sizeDropdown a.size-dropdown
   • 対象の靴のサイズ: a:contains('10')
   • カートに追加ボタン: div.footwear form.add-to-cart-form div.product-選択内容 div.add-to-cart
   • チェックアウト ボタン: div.mini-cart div.cart-item-data a.checkout-button:visible

2. イベントのシーケンス:

   • サイズ ドロップダウンをアクティブ化
   • 対象の靴のサイズを選択
   • 靴のサイズが表示されるまで待ってから追加しますカート
   • チェックアウト ボタンをクリックします

スクリプトを完成させます:

// ==UserScript==
// @name     Nike Auto-Buy Shoes
// @include  http*://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==

var targetShoeSize = "10";

//-- Step 1: Activate Size Dropdown
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 Target Shoe Size
function selectDesiredShoeSize(jNode) {
  if ($.trim(jNode.text()) === targetShoeSize) {
    //-- Trigger 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");
}

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

以上がAJAX 主導の Web サイトのインタラクションを効果的に自動化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。