Clever Geek Handbook

Identifying elements / pages in a page dilemma based on Angularjs

I have a nice sample page for an Angularjs based site. I want to make an auto filter and auto clicker.

For this I will need to identify unique pages or subpages (in case of Ajax based changes)

But the big problem is that it hardly contains ID and css classes that I can reference DOM elements using Jquery ID and class selectors. Even if it contains a css id - many pages have the same id so I can't distinguish between pages or subpages (if the same page changes due to Ajax on this site).

In such cases, I usually try to search for elements using the positioning technique. For example, an element contains text and the parent has a specialty.

But these pages are outside the scope of this technique.

What should be my strategy for uniquely identifying pages and subpages on this site?

I am attaching a snippet from the checkout page:

<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


source to share


3 answers


You can go with the url of the pages if you have access or can have classes applied to the div.



+3


source


In this case, I would try to gradually move to a component architecture using nested views with ui-router, with the "mode" flags identifying different view modes, eg. you can have a "store item list" with a unique (read-only) mode, then you can use a common component for the "create", "view details" and "edit" forms and it can change its internal layout depending on this flag regime.



+1


source


If you just need to identify certain elements, you can use the chrome devTool validation by clicking the element, right clicking to "copy" the CSS selector.

0


source






More articles:


All Articles