javascript - 在基于 Angularjs 的页面困境中识别元素/页面

标签 javascript jquery angularjs autofill

我有一个很好的sample page对于基于 Angularjs 的站点。我想制作一个自动填充器和自动点击器。

为此，我需要标识唯一的页面或子页面(在基于 Ajax 的更改的情况下)

但一个大问题是它几乎不包含我可以使用 Jquery 的 ID 和类选择器引用 DOM 元素的 css ID 和类。即使它包含一个 css ID——许多页面都有相同的 ID，所以我无法区分页面或子页面(如果同一页面由于本网站中的 Ajax 而更改)。

在这种情况下，我通常会尝试使用定位技术来搜索元素。例如，一个元素包含一个文本，它的父元素有一些特殊性。

但是这些页面超出了这种技术。

我应该采用什么策略来唯一标识此站点中的页面和子页面？

我附上结帐页面的片段:

<table width="100%" height="100%" cellspacing="0" cellpadding="0" class="product-table">
  <tbody>
    <tr>
      <td class="cell item-cell" data-aid="item-cell_LSTPWBEC88RWRGZZRYJHJGUYV:ACOU03K8GIICUWOQNH15QDXGQ175IW8V-58f78c75696a0:P:C-0012:U:SPCMS"><div class="line bmargin5 font-color-medium fk-font-11 ng-binding fk-uppercase" ng-class="product.is_digital ? 'digital-type': 'fk-uppercase'" ng-show="product.product_image_url"> <span class="power bank-icon ng-hide" ng-show="product.is_digital"></span>Power Bank</div>
        <span class="title ng-binding">Intex IT-PB11K 11000 mAh Power Bank</span> <!-- ngIf: product.title_tag!='' -->
        <p class="tmargin5 fk-font-11 font-color-medium ng-scope ng-binding" ng-if="product.title_tag!=''">White, Lithium-ion</p>
        <!-- end ngIf: product.title_tag!='' --> <!-- ngIf: product.co_subtitle!='' -->
        <p class="tmargin5 fk-font-11 font-color-medium ng-scope ng-binding" ng-if="product.co_subtitle!=''"></p>
        <!-- end ngIf: product.co_subtitle!='' --> <span class="ff-icon tmargin5 ng-hide" ng-show="product.isFFOfferApplied" title="Flipkart First"></span> <!-- ngIf: product.title_product_offer!='' --> <!-- ngIf: product.extra_warning!='' && product.extra_warning!=null -->
        <div class="tmargin10 ng-binding"> Seller: RetailNet <!-- ngIf: spTag == 'FBF' -->
          <div ng-if="spTag == 'FBF'" class="fk-inline-block ng-scope">| <span class="fa-icon"><img class="f-assured" src="https://rukminim1.flixcart.com/www/308/84/promos/11/08/2016/fc906a53-e6b5-4793-bcb9-86f957421408.png?q=90"></span></div>
          <!-- end ngIf: spTag == 'FBF' --> </div>
        <!-- ngIf: product.emi_cashback_offer --> <!-- ngIf: product.debit_card_cashback_offer --> <!-- ngIf: product.credit_card_cashback_offer --> <!-- ngIf: product.isPrexoApplied -->
        <div class="tmargin5 offer-applied" ng-show="product.promotion_detail.appliedPromotions"> <a class="fk-inline-block btn btn-white offer-ttp ng-binding" ng-mouseenter="showOffers=true" data-aid="OffersApplied_lnk"> <span class="offer-color fk-bold">OFFERS:</span> 2 applied </a>
          <ul class="promo-info-div ng-hide" ng-show="showOffers" ng-mouseleave="showOffers=false" data-aid="AppliedOffersContainer">
            <!-- ngRepeat: promotion in product.promotion_detail.appliedPromotions -->
            <li class="pure-g-r tmargin5 bmargin5 ng-scope" ng-repeat="promotion in product.promotion_detail.appliedPromotions">
              <div class="pure-u-4-5">
                <p class="promo-info fk-inline-block fk-font-small ng-binding" data-aid="AppliedOffer"> +&nbsp; Extra ₹50 off on Intex 11,000mAh Power Bank </p>
              </div>
              <div class="pure-u text_right fk-font-11 fk-bold ng-binding" ng-show="promotion.discountAmount>0" data-aid="OfferDiscounts">Rs.50</div>
            </li>
            <!-- end ngRepeat: promotion in product.promotion_detail.appliedPromotions -->
            <li class="pure-g-r tmargin5 bmargin5 ng-scope" ng-repeat="promotion in product.promotion_detail.appliedPromotions">
              <div class="pure-u-4-5">
                <p class="promo-info fk-inline-block fk-font-small ng-binding" data-aid="AppliedOffer"> +&nbsp; Extra ₹130 Off on Intex  Power Banks </p>
              </div>
              <div class="pure-u text_right fk-font-11 fk-bold ng-binding" ng-show="promotion.discountAmount>0" data-aid="OfferDiscounts">Rs.130</div>
            </li>
            <!-- end ngRepeat: promotion in product.promotion_detail.appliedPromotions -->
          </ul>
        </div>
        <div class="conditional-offer tmargin10" ng-show="product.promotion_detail.conditionalPromotions"> <a class="conditional-offer-count ng-binding" ng-mouseenter="showEligibleOffers=true" ng-mouseleave="showEligibleOffers=false">You are eligible for 2<!-- ngIf: product.promotion_detail.totalPromotions > 0 --><span ng-if="product.promotion_detail.totalPromotions > 0" class="ng-scope"> more</span><!-- end ngIf: product.promotion_detail.totalPromotions > 0 --> offer<!-- ngIf: product.promotion_detail.totalConditionalPromotions > 1 --><span ng-if="product.promotion_detail.totalConditionalPromotions > 1" class="ng-scope">s</span><!-- end ngIf: product.promotion_detail.totalConditionalPromotions > 1 -->!</a>
          <div class="offer-content ng-hide" ng-show="showEligibleOffers"> <span class="tooltip-arrow bottom"></span>
            <ul class="offer-list">
              <!-- ngRepeat: promotion in product.promotion_detail.conditionalPromotions -->
              <li class="line tmargin5 bmargin5 fk-font-small ng-scope ng-binding" ng-repeat="promotion in product.promotion_detail.conditionalPromotions"> Extra 5% off* on Axis Bank Buzz Credit Cards </li>
              <!-- end ngRepeat: promotion in product.promotion_detail.conditionalPromotions -->
              <li class="line tmargin5 bmargin5 fk-font-small ng-scope ng-binding" ng-repeat="promotion in product.promotion_detail.conditionalPromotions"> Extra 25% Wallet Cashback* on PhonePe payment </li>
              <!-- end ngRepeat: promotion in product.promotion_detail.conditionalPromotions -->
            </ul>
          </div>
        </div>
        <!-- ngIf: product.promotion_detail.disbursalWarnings --> <!-- ngIf: product.forward_services!='' --></td>
      <td class="cell fk-text-center qty-cell carty-changeQuantity"><form class="qtyForm ng-isolate-scope ng-pristine ng-valid" name="form_LSTPWBEC88RWRGZZRYJHJGUYV:ACOU03K8GIICUWOQNH15QDXGQ175IW8V-58f78c75696a0:P:C-0012:U:SPCMS" method="get" data-listing_id="LSTPWBEC88RWRGZZRYJHJGUYV:ACOU03K8GIICUWOQNH15QDXGQ175IW8V-58f78c75696a0:P:C-0012:U:SPCMS" ng-submit="onSubmit($event)" quantity="" model="product" on-quantity-change="updateQuantity(qty, id, title)">
          <input type="text" ng-focus="onFocus()" ng-blur="onSubmit($event)" maxlength="3" value="1" ng-disabled="disabled" ng-pattern="/^[1-9][0-9]*$/" ng-model="product.quantity" class="qty-box fk-input ng-scope ng-pristine ng-valid ng-valid-pattern" select-on="qty_LSTPWBEC88RWRGZZRYJHJGUYV:ACOU03K8GIICUWOQNH15QDXGQ175IW8V-58f78c75696a0:P:C-0012:U:SPCMS" tooltip-placement="right" tooltip="Please enter units: 1 or more" tooltip-trigger="focus">
          <!-- ngIf: product.isQtyRestrictedMessage --><br>
          <input type="submit" class="qty-save fk-font-small ng-hide" value="Save" ng-show="showSave" bind-log="quantity update LSTPWBEC88RWRGZZRYJHJGUYV:ACOU03K8GIICUWOQNH15QDXGQ175IW8V-58f78c75696a0:P:C-0012:U:SPCMS">
        </form></td>
      <td class="cell price-cell"><div class="carty-price text_right">
          <div class="bmargin5 fk-bold price ng-binding" ng-show="product.promotion_discount!=0 || product.cashback!=0 || product.sourcing_fee!=0 || product.pickup_charge!=0"> Rs.799</div>
          <!-- ngIf: product.promotion_discount==0 && product.cashback==0 && product.sourcing_fee==0 && product.pickup_charge==0 -->
          <div class="price-adjust bmargin5" ng-show="product.show_mrp &amp;&amp; product.mrp!=0 &amp;&amp; product.mrp!=product.item_selling_price &amp;&amp; product.mrp>product.item_selling_price">MRP: <span class="strike ng-binding">Rs.2300</span></div>
          <!-- ngIf: product.promotion_discount!=0 || product.cashback!=0 || product.sourcing_fee!=0 || product.pickup_charge!=0 -->
          <div class="popup_recent_our_price fk-font-11 fk-fontlight ng-scope" ng-if="product.promotion_discount!=0 || product.cashback!=0 || product.sourcing_fee!=0 || product.pickup_charge!=0">Selling Price: <!-- ngIf: product.price.selling_price --> <!-- ngIf: product.price && !product.price.selling_price --><span ng-if="product.price &amp;&amp; !product.price.selling_price" class="strike ng-scope ng-binding">Rs.979</span><!-- end ngIf: product.price && !product.price.selling_price --></div>
          <!-- end ngIf: product.promotion_discount!=0 || product.cashback!=0 || product.sourcing_fee!=0 || product.pickup_charge!=0 --> <span class="price-adjust ng-binding ng-hide" ng-show="product.sourcing_fee &amp;&amp; product.feeType">(Incl. Rs.0  fee)</span>
          <div class="price-adjust tmargin5 ng-binding ng-hide" ng-show="product.pickup_charge > 0">(+) Pickup Charges: Rs.0</div>
          <div class="price-adjust tmargin5 ng-binding ng-hide" ng-show="product.cashback!=0">(-) Cashback: 0</div>
          <div class="price-adjust tmargin5 ng-binding ng-hide" ng-show="product.net_octroi_charge > 0">Octroi: Rs.0</div>
          <div class="offer-color fk-font-11 tmargin5 ng-binding" ng-show="product.promotion_discount>0">(-) Savings: Rs.180</div>
        </div></td>
    </tr>
  </tbody>
</table>

最佳答案

如果您有权访问或可以将类应用于 div，则可以使用页面的 URL。

关于javascript - 在基于 Angularjs 的页面困境中识别元素/页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43501066/

上一篇：javascript - 状态在调用 setState 之前得到更新

下一篇：javascript - 如何从div中提取img src？

相关文章：

javascript - 基于另一个下拉 onchange 函数设置下拉选项值

java - 使用动态 id 为 jQuery 中的隐藏字段赋值？

javascript - 当鼠标在框上时停止动画并在鼠标移出时将其动画回来，不起作用

jquery - 是否可以通过 jquery 在 div 中加载 url，而不使用 iframe、对象、嵌入 html 标签？

javascript - 如何从 Controller 函数内部获取 $scope？

javascript - 拖放表格

javascript - 如何使用 ng-if 显示列表中是否定义了某个项目

javascript - 错误 :Incomplete or corrupt PNG file in using jspdf

javascript - 浏览器中在哪里定义了 keys() 函数？

javascript - 使用 jquery 设置样式的随机值

©2024 IT工具网  联系我们