如何在 AJAX 驱动的网站上有效选择和激活控件？

在 AJAX 驱动的站点上选择并激活正确的控件

创建与动态、AJAX 驱动的网站交互的脚本时，了解底层页面至关重要结构和事件处理程序。这是有效定位和操作这些网站上的元素的分步指南。

1.检查页面元素和事件

使用 Firebug 或 DOM 检查器等浏览器工具，识别要与之交互的元素的 CSS/jQuery 选择器。这些工具还揭示了附加到每个元素的事件。

2。将事件映射到操作

确定触发所需操作的事件序列。例如，选择下拉菜单可能涉及鼠标按下事件，而不是单击。

3.使用 WaitForKeyElements

waitForKeyElements 函数用于处理由 JavaScript 动态创建或修改的元素。它允许您指定 CSS 选择器和在元素出现时执行的回调函数。

4.序列操作

使用 waitForKeyElements 创建一系列步骤，以正确的顺序模拟用户交互。每个回调函数应在各自的元素上执行操作和/或触发事件。

示例：Nike 自动购买脚本

目标：自动选择鞋码，添加到购物车，并在 Nike.com 运动鞋上结账

实现：

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");
    }
);

说明：

1. 第 1 步：触发 mousedown 事件鞋码下拉列表。
2. 第 2 步：打开打开下拉菜单，选择所需的鞋码（“10”）。
3. 第 3 步和第 4 步：等待显示所选鞋码，然后单击“添加到购物车”按钮。
4. 第5步：当迷你购物车出现时，点击“结账”按钮。

以上是如何在 AJAX 驱动的网站上有效选择和激活控件？的详细内容。更多信息请关注PHP中文网其他相关文章！