Comment puis-je automatiser efficacement les interactions de sites Web pilotés par AJAX ?

Choisir les bons contrôles sur un site piloté par AJAX

Naviguer et interagir avec des sites Web pilotés par AJAX peuvent être difficiles pour les scripts automatisés. Voici un guide étape par étape pour automatiser efficacement ces sites Web :

1. Observez les actions des utilisateurs : Notez les étapes manuelles que vous effectuez sur la page, y compris les éléments clés modifiés ou ajoutés. par JavaScript.
2. Identifier les éléments de la page : Utilisez des outils de navigateur tels que Firebug ou Chrome Developer Tools pour inspecter la structure de la page et déterminer Sélecteurs CSS/jQuery pour les éléments clés.
3. Manipuler les éléments de page : Utilisez jQuery et d'autres outils de navigateur pour manipuler des éléments HTML statiques. Utilisez waitForKeyElements pour gérer les éléments modifiés dynamiquement par JavaScript ou AJAX.

Exemple spécifique : script d'achat automatique Nike

Objectif : Sélection une pointure spécifique, en l'ajoutant au panier et en procédant au paiement de chaque sneaker Nike page.

Étapes :

1. Identification des éléments clés :

   • Déroulant des tailles : div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown
   • Taille de chaussure cible : a:contains('10')
   • Bouton Ajouter au panier : div.footwear form.add-to-cart-form div.product- sélections div.add-to-cart
   • Bouton de paiement : div.mini-cart div.cart-item-data a.checkout-button:visible

2. Séquence des événements :

   • Activer la liste déroulante des tailles
   • Sélectionnez la pointure cible
   • Attendez l'affichage de la pointure et ajoutez-la à Panier
   • Cliquez sur le bouton de paiement

Terminez le script :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!