Add SelectLaptop steps using AI Object Inspection

This exercise describes how to add steps to the SelectLaptop action using AI Object Inspection.

Add steps to add the HP Chromebook 14 G1 laptop to your cart

This procedure describes how to add steps to browse to the Advantage Online Shopping LAPTOPS page and add an HP Chromebook 14 G1 laptop to the shopping cart.

Add AI-based steps to add the Chromebook to your cart:

  1. Make sure that you have logged in to the Advantage Online Shopping site in your browser and the homepage is open.

  2. In UFT One, open the SelectLaptop action, either from the Solution Explorer, or the canvas.

  3. Click the AI Object Inspection toolbar button.

    UFT One is hidden and the AI Object Inspection window is displayed.

  4. Click on the open page.

    The AI Object Inspection window inspects the application to identify the objects and highlight all visual elements on the page.

  5. Select Texts on the window toolbar to also highlight the text objects on the page.

    Note: An AIUtil.SetContext step has already been added in the Login action. You do not need to add another one.

  6. Click the highlighted Laptops text to display the object's description and suggested step.

  7. Click Add to test to add the step that clicks the Laptops text to the Editor.

  8. To switch from the AI Object Inspection window to your application, click the down arrow near Context and select Go to inspected application.

  9. Click LAPTOPS on the page to browse to the LAPTOPS page.

    Note: Make sure your browser window size is such that the first line in two laptop names is HP Chromebook 14.

  10. Go to the AI Object Inspection window and click Re-inspect to inspect the LAPTOPS page.

     

  11. As you can see, the AI Object Inspection window detects two text blocks HP Chromebook 14. To better identify the laptop object you are going to select, we recommend that you add a relation to uniquely describe the object.

    Suppose you are going to select the laptop whose price is $299.99, click the HP Chromebook 14 text and then in the pop-up dialog box, click Edit step.

    On the right pane of the window, click the Add icon next to Relation, and then click the $299.99 text. A dot is displayed on the HP Chromebook 14 text.

     

    Then click Add to test to add the corresponding step to the Editor.

    AIUtil.FindTextBlock("HP Chromebook 14", micWithAnchorBelow, AIUtil.FindTextBlock("$299.99")).Click

    You can see from the step syntax that UFT One will find the text block below which there is a text block of the price.

  12. Repeat Step 8 to navigate to the HP CHROMEBOOK 14 G1 (ENERGY STAR) details page. Have the AI Object Inspection window re-inspect the page, and add the step that clicks the Add to Cart button to the Editor.

Back to top

View your steps in the Editor View

When you're done adding steps to the SelectLaptop action, your Editor should look like this:

AIUtil.FindTextBlock("LAPTOPS").Click
AIUtil.FindTextBlock("HP Chromebook 14", micWithAnchorBelow, AIUtil.FindTextBlock("$299.99")).Click
AIUtil("button", "ADD TO CART").Click

Back to top

Next steps: