AJAX 기반 웹 사이트 상호 작용을 효과적으로 자동화하려면 어떻게 해야 합니까?

AJAX 기반 사이트에서 올바른 컨트롤 선택

AJAX 기반 웹사이트를 탐색하고 상호 작용하는 것은 자동화된 스크립트에 어려울 수 있습니다. 다음은 이러한 웹사이트를 효과적으로 자동화하기 위한 단계별 가이드입니다.

1. 사용자 작업 관찰: 수정되거나 추가된 주요 요소를 포함하여 페이지에서 수행하는 수동 단계를 기록해 두세요. JavaScript로 작성.
2. 페이지 요소 식별: Firebug 또는 Chrome 개발자 도구와 같은 브라우저 도구를 사용하여 페이지 구조를 검사하고 핵심 요소에 대한 CSS/jQuery 선택기를 결정합니다.
3. 페이지 요소 조작: jQuery 및 기타 브라우저 도구를 사용하여 정적 HTML 요소를 조작합니다. JavaScript 또는 AJAX에 의해 동적으로 변경된 요소를 처리하려면 waitForKeyElements를 활용하십시오.

구체적인 예: Nike 자동 구매 스크립트

목표: 선택 특정 신발 사이즈를 장바구니에 추가하고 모든 Nike 운동화에 대한 결제를 진행합니다. 페이지.

단계:

1. 핵심 요소 식별:

   • 크기 드롭다운: div.footwear form.장바구니에 추가 양식span.sizeDropdown a.size-dropdown
   • 대상 신발 사이즈: a:contains('10')
   • 장바구니에 추가 버튼: div.footwear form.add-to-cart-form div.product- 선택 div.장바구니에 추가
   • 결제 버튼: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!