Comment sélectionner et activer efficacement les contrôles sur les sites Web pilotés par AJAX ?

Sélection et activation des contrôles appropriés sur un site piloté par AJAX

Lors de la création de scripts pour interagir avec des sites Web dynamiques pilotés par AJAX, il est crucial de comprendre la page sous-jacente structure et gestionnaires d’événements. Voici un guide étape par étape pour localiser et manipuler efficacement les éléments sur ces sites Web.

1. Inspecter les éléments et les événements de la page

À l'aide d'outils de navigateur tels que Firebug ou l'inspecteur DOM, identifiez les sélecteurs CSS/jQuery pour les éléments avec lesquels vous souhaitez interagir. Ces outils révèlent également les événements attachés à chaque élément.

2. Mapper les événements aux actions

Déterminez la séquence d'événements qui déclenchent les actions souhaitées. Par exemple, la sélection d'une liste déroulante peut impliquer un événement mousedown, et non un clic.

3. Utiliser WaitForKeyElements

La fonction waitForKeyElements est utilisée pour gérer les éléments créés ou modifiés dynamiquement par JavaScript. Il vous permet de spécifier des sélecteurs CSS et une fonction de rappel à exécuter lorsque les éléments apparaissent.

4. Actions séquentielles

Utilisez waitForKeyElements pour créer une série d'étapes, simulant les interactions des utilisateurs dans le bon ordre. Chaque fonction de rappel doit effectuer des actions et/ou déclencher des événements sur les éléments respectifs.

Exemple : Script d'achat automatique Nike

Objectif :Sélectionner automatiquement la pointure de la chaussure, l'ajouter à panier et paiement sur la sneaker Nike.com pages.

Mise en œuvre :

waitForKeyElements(
    "div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown",
    function(jNode) {
        triggerMouseEvent(jNode[0], "mousedown");
    }
);

waitForKeyElements(
    "ul.selectBox-dropdown-menu li a:contains('10')",
    function(jNode) {
        if ($.trim(jNode.text()) === "10") {
            triggerMouseEvent(jNode[0], "mouseover");
            triggerMouseEvent(jNode[0], "mousedown");
            triggerMouseEvent(jNode[0], "mouseup");
        }
    }
);

waitForKeyElements(
    "div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox span.selectBox-label:contains('(10)')",
    function(jNode) {
        var addToCartButton = $(
            "div.footwear form.add-to-cart-form div.product-selections div.add-to-cart"
        );
        triggerMouseEvent(addToCartButton[0], "click");
    }
);

waitForKeyElements(
    "div.mini-cart div.cart-item-data a.checkout-button:visible",
    function(jNode) {
        triggerMouseEvent(jNode[0], "click");
    }
);

Explication :

1. Étape 1 : Déclenchez un événement mousedown sur la liste déroulante des pointures.
2. Étape 2 : Dans la liste déroulante ouverte, sélectionnez la pointure souhaitée ("10").
3. Étapes 3 et 4 : Attendez l'affichage de la pointure sélectionnée et cliquez sur le bouton "Ajouter au panier".
4. Étape 5 : Lorsque le mini-panier apparaît, cliquez sur le bouton « Commander ».

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!