javascript - validacion - Elegir y activar los controles correctos en un sitio impulsado por AJAX

validar formulario javascript onclick

Question

Por lo tanto, estoy tratando de hacerlo cada vez que visito cualquier página de zapatillas nike.com (sin el enlace HTML), selecciona automáticamente el tamaño de mi zapato, lo agrega al carrito y lo revisa.

Actualmente estoy tratando de usar este guión (a continuación), pero cada vez que voy a la página de zapatillas de deporte, no agrega correctamente el tamaño de calzado que quiero, sino que va directamente a la caja sin nada en mi carrito.

Me dijeron que tengo que hacer coincidir el código con el HTML de la página real, pero no sé cómo hacer eso. Por favor ayuda.

// ==UserScript==
// @name _Nike auto-buy(!!!) script
// @include http://*/*
// @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==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
var okayToClickAddtoCart = false;
//-- Assumes that size is a standard <option> tag or similar...
waitForKeyElements (".selectBox-label[value=''10'']", selectShoeSize);
function selectShoeSize (jNode) {
jNode.prop (''selected'', true);
okayToClickAddtoCart = true;
}
waitForKeyElements (".add-to-cart.nike-button", clickAddToCart);
function clickAddToCart (jNode) {
if ( ! okayToClickAddtoCart) {
return true; //-- Don''t click yet.
}
var clickEvent = document.createEvent (''MouseEvents'');
clickEvent.initEvent (''click'', true, true);
jNode[0].dispatchEvent (clickEvent);
}
waitForKeyElements (".checkout-button", clickCheckoutButton);
function clickCheckoutButton (jNode) {
var clickEvent = document.createEvent (''MouseEvents'');
clickEvent.initEvent (''click'', true, true);
jNode[0].dispatchEvent (clickEvent);
}

Enlace a la "página de destino"
Instantánea del HTML de destino (en caso de que Nike elimine o cambie la página de destino)

Answer 1

En lugar de alterar el guión de la pregunta, espero hacer un bosquejo rápido de cómo escribir este tipo de páginas y acciones con Greasemonkey / Tampermonkey.

Los pasos son:

1. Tome nota cuidadosamente de lo que hace manualmente. Tome nota especial de los elementos agregados / alterados por el javascript de la página y la secuencia necesaria de pasos, si corresponde.

2. Usando Firebug , y / o el inspector de Firefox, y / o las herramientas de desarrollador de Chrome, determine los selectores de CSS / jQuery para todos los elementos que leerá o manipulará. Esto es especialmente fácil de hacer usando Firebug.

3. Use jQuery para manipular HTML estático. Use waitForKeyElements para manejar nodos agregados o modificados por javascript (AJAX). Utilice la API de Greasemonkey , que también es compatible con Tampermonkey y parcialmente compatible con las secuencias de comandos de usuario de Chrome, para realizar llamadas de páginas entre dominios o almacenar valores entre cargas de páginas para conjuntos de páginas entre dominios.

Ejemplo específico:

1. Para las páginas de destino de OP , el OP quiere: (a) seleccionar automáticamente el tamaño del zapato, (b) agregar los zapatos al carrito de compras, y (c) hacer clic en el botón de pago.

   Esto requiere esperar y / o hacer clic en elementos de cinco (5) páginas como los siguientes:

   
   

2. Usando Firebug (o herramienta similar) obtenemos la estructura HTML para los nodos clave. Por ejemplo, el menú desplegable SIZE tiene HTML como este:

   <div class="size-quantity">
   <span class="sizeDropdown selectBox-open">
   ...
   <label class="dropdown-label selectBox-label-showing">SIZE</label>
   ...
   <a class="selectBox size-dropdown mediumSelect footwear selectBox-dropdown" ...>
   ...
   </a>
   </span>
   </div>

   Donde el enlace realmente dispara un evento de mousedown , no un clic.

   Firebug nos da una ruta CSS de:

   html.js body div#body div#body-wrapper.fullheight div#body-liner.clear div#content div#pdp.footwear div#product-container.clear div.pdp-buying-tools-container div.pdp-box div.buying-tools-container div#PDPBuyingTools.buying-tools-gadget form.add-to-cart-form div.product-selections div.size-quantity span.sizeDropdown a.selectBox

   A lo que podemos reducir:

   div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown

   para un selector razonable que probablemente sobreviva a cambios triviales de la página y que sea poco probable que se active en páginas / productos no deseados.

   ~~~~~~~~~~~~~~
   Tenga en cuenta que Firebug también nos ayuda a ver qué eventos están asociados a qué, lo cual es crucial para determinar qué debemos activar. Por ejemplo, para ese nodo, veo:

   Ese enlace no tiene href , ni escucha eventos de click . En este caso, debemos activar un mousedown (o keydown ).

   ~~~~~~~~~~~~~~
   Usando un proceso similar para los otros 4 nodos clave, obtenemos selectores CSS / jQuery de:

   Node 1: div.footwear form.add-to-cart-form span.sizeDropdown a.size-dropdown
   Node 2: ul.selectBox-dropdown-menu li a:contains(''10'')
   (But this will need an additional check)
   Node 3: div.footwear form.add-to-cart-form span.sizeDropdown a.selectBox span.selectBox-label:contains(''(10)'')
   Node 4: div.footwear form.add-to-cart-form div.product-selections div.add-to-cart
   Node 5: div.mini-cart div.cart-item-data a.checkout-button:visible

   
   

3. Finalmente, usamos waitForKeyElements para enviar los eventos requeridos a los nodos clave y para secuenciar en el orden correcto de las operaciones.

El script resultante, completo y funcional es:

// ==UserScript==
// @name _Nike auto-buy shoes(!!!) script
// @include http://store.nike.com/*
// @include https://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==
/*- The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
var targetShoeSize = "10";
//-- STEP 1: Activate size drop-down.
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 desired shoe size.
function selectDesiredShoeSize (jNode) {
/*-- Because the selector for this node is vulnerable to false positives,
we need an additional check here.
*/
if ($.trim (jNode.text () ) === targetShoeSize) {
//-- This node needs a 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");
//-- All done. The checkout page should load.
}
function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent(''MouseEvents'');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
}