如何有效自動化 AJAX 驅動的網站互動？

在AJAX 驅動的網站上選擇正確的控制

導航AJAX 驅動的網站並與之交互對於自動化腳本來說可能具有挑戰性。以下是有效自動化此類網站的分步指南：

1. 觀察用戶操作：記下您在頁面上執行的手動步驟，包括修改或添加的關鍵元素通過JavaScript。
2. 辨識頁面元素：使用 Firebug 或 Chrome 開發者工具等瀏覽器工具來檢查頁面建立並確定關鍵元素的 CSS/jQuery 選擇器。
3. 操作頁面元素： 使用 jQuery 和其他瀏覽器工具來操作靜態 HTML 元素。利用 waitForKeyElements 處理由 JavaScript 或 AJAX 動態變更的元素。

具體範例：Nike 自動購買腳本

目標：選擇特定的鞋子尺碼，將其加入購物車，然後繼續結帳每雙耐吉運動鞋

步驟：

1. 關鍵元素辨識：

   • 尺寸下拉式選單： div.footwear form.add-to-cart-form 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 驅動的網站互動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！