基于Angularjs的页面困境识别元素/页面

时间：2017-04-19 16:17:45

标签： javascript jquery angularjs autofill

对于基于Angularjs的网站，我有一个很好的sample page。我想制作一个自动填充器和自动闪光灯。

为此，我需要识别唯一的页面或子页面（如果是基于Ajax的更改）

但是一个很大的问题是它几乎不包含css ID和类，我可以使用Jquery的ID和类选择器来引用DOM元素。即使它包含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>

3 个答案:

答案 0 :(得分：3)

如果您有访问权限，可以使用网页的网址，也可以将这些网址应用于div。

答案 1 :(得分：1)

在这种情况下，我会尝试逐步交换到基于组件的架构，使用ui-router的嵌套视图，使用＆＃34; mode＆＃34;标识不同视图模式的标记，例如你可以有一个＆＃34;商店项目清单＆＃34;使用独特的模式（只读），然后您可以使用共享组件＆＃34;创建＆＃34;，＆＃34;查看详细信息＆＃34;和＆＃34;编辑＆＃34;项目表单，它可以根据该模式标志更改其内部布局。

答案 2 :(得分：0)

如果您只需要识别某些元素，可以使用chrome devTool inspect，通过单击该元素，右键单击“复制”CSS选择器。

相关问题
最新问题