Appendix 7: Web Spy Tutorial

Appendix 7: Web Spy Tutorial



Appendix 7: Web Spy Tutorial

Introduction

Process Studio WebSpy is used to extract web element attributes. 

WebSpy is a compact toolbar and occupies minimum screen area so that one can spy on a web page with ease. WebSpy contains four sections- window selection, frame selection, attributes table and a step generation form. All these sections may not be needed simultaneously. Hence, these sections are split into multiple dialog boxes which can be made visible on demand.

  1. We have a workspace Tutorials. Right click on your Workspace and select New Project.




  1. Create a Project named Spy.

 



  1. Project Spy is now visible in the Workspace.




  1. Next, create a folder called Web Spy.




  1. Folder Web Spy is now visible as seen below.




  1. Next add a new Workflow to the Project






Start using Web Spy

Follow the Steps below to launch and use Web Spy to create a workflow.

  1. To launch Web Spy go to Tools menu and click SpyWeb Spy sub-menu. Click WebSpy. Alternatively, use the shortcut Ctrl+alt+w 


 




  1. A pop-up window – There is no Active Workflow appears with the message as seen below. Click OK if you wish to create a new workflow.



  1. Provide a name for the new workflow say WebSpy_Demo.



  1. A new workflow is created and Web Spy-Web element attribute extractor opens as a pop-up window in the foreground to Process Studio as seen in the snapshot below. 

  1. Note: Only if IE is selected as the browser an ‘Ignore IE Protected Mode Settings’ checkbox is visible. Starting version 7, IE introduced the notion of 4 zones; namely Intranet, Internet, Trusted Sites and Restricted Sites. The following two scenarios are to be noted in Web GUI automation using IE.

The default behaviour in Web GUI automation using IE is to check “Protected Mode” settings for all the zones and throw an error when this setting is different for any two zones. 

‘Ignore IE Protected Mode Settings’ checkbox in Web-Spy can handle the scenario.

When “Ignore Protected Mode” setting is CHECKED in Web-Spy, “Protected Mode” setting check for different zones is ignored and it starts without error no matter what “Protected Mode” settings for different zones are.

However, note the Warning! that WebGUI automation workflow will fail when it traverses to another zone with a different ‘Enable Protected Mode’ setting.   




  1. Enter the address of the webpage you want to inspect in the text field corresponding to URL label. URL should be complete URl starting with http/https. Select the browser name from the dropdown list – Firefox, Chrome or IE (Internet Explorer). In this case Google Chrome is selected.  In the URL https://www.naukri.com is entered. 
  2. Click on the “Go” button and wait for browser to launch. Go button will be blue until browser is completely initialized.  


  1. Web Spy toolbar opens in the foreground to the web page.

After the page finishes loading in the browser with all windows and frames a ‘Page Loaded Successfully’ popup appears. Acknowledge the popup message. 


  1. In the screenshot below WebSpy toolbar is highlighted in red. 



  1. Please refer Error! Reference source not found. for a Sample Workflow with complete steps to identify element locators by extracting web element attributes and a sample workflow with Web Spy. 



WebSpy toolbar components

In the following sections we will discuss the seven icons on WebSpy toolbar.

WebSpy: Spy ()


  1. Click the first icon on WebSpy toolbar. Hover over any element on the web page. You can see a blue box over the element. In this case we can see a blue box over Search Jobs text box.
  2. Hover over elements to start spying elements in the window. In case web elements are not highlighted on hover, click Spy (Spy button turns from blue to white) and then hover the mouse pointer to highlight elements.



  |



  1. Press back tick (‘) icon on your keyboard.
  2. If everything is as expected and you hit back tick (`), then WebSpy captures element information and opens a Step generation dialog. This dialog contains element’s attribute table and step generation form to generate any step from WebSpy. If you hit ‘`’ again without closing Generate step dialog, then the attributes table gets populated with information of the current element captured by WebSpy.
  3. Select Type of step to be generated from the Type drop down list. The values in the list are Single or Composite. 
  4. Select a value from the Action list.
  5. The element Attributes window is displayed. Select a desired Attribute from the table or choose the desired criteria from the Criteria drop down list. 

  Note:

Absolute X-Path cannot be used to Generate a step in Process Studio. Even if it is selected in the table it Generates a step with X-Path. It is not available in the Criteria drop down list either. It you need to Generate a step with Absolute X-Path you may first Generat it with X-Path. Copy the Absolute X-Path by Right Click and Select Copy. Now you may replace the value of the Generated X-Path with the Absolute X-Path in the step in Process Studio.


  1. Click Generate button to generate a Single or Composite step with Action and Criteria chosen. 


  1. The Screenshot below shows that Type Composite has been chosen to Generate a step. 




  1. Click Generate.
  2. In case you workflow does not have Start Browser step yet a a warning pop-up appears. Click OK to add Start Browser step to the workflow.



  1. On the Generate step window at the bottom you can see the message that Web Composite step is generated in the workflow.



  1. Once a Composite step is Generated for the next Action you have the option to create a New step or add to the existing ‘Web Composite’ step as seen in the Step drop down list in the snapshot below. 




WebSpy: Web page Windows ()


  1. If multiple windows open up with the current URL, then you may select the desired window using window combo box in WebSpy toolbar as seen in the screenshot below. In the snapshot below we can see there are three windows in the drop down list next WebSpy icon. You may select any window to highlight it and bring it to the forefront. 
  2. We can now spy web elements on that window.



  |


WebSpy: Refresh ()



  1.   |
    Click Refresh icon to reload the page. 


Web Spy Frames ()


  1. If you want to spy on element which is contained in a frame, then you need to switch to that frame. To do that you need to click on the frame icon on WebSpy toolbar. It opens a dialog with frame tree where you can select any frame to which you want to switch.
  2. The Frame icon is highlighted in the screen below. Click the Frame icon.
  3. The Frame Tree for the current window appears as shown below.



  |



  1. Let us now WebSpy the following URL 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

  1. When the page is initialized the first time and all components are loaded a windows popup ‘Page Loaded Successfully’ is displayed. 


  1. Click on the Frames icon (). The frame tree for the Current window is populated. 

  2.   |
    Web Spy can detect any number of frames. If the page contains frames a Frame Tree window appears. You may select any frame to which you want to switch. Click on “Main Page” to expand the tree. 


  1. Click on the nodes below to expand the hierarchy. 


  1. Select a parent frame and a child frame underneath, and then hover over any frame element. In case web elements are not highlighted on hover click Spy (Spy button turns from blue to white) and then hover the mouse pointer to highlight elements.  



  1. The following snapshot displays the expanded frame hierarchy. In the example below we are on Frame#0 under Main Page. The frame is highlighted in blue as seen in the snapshot below. 


  1. There is also an option to Reload Frame Tree. Right click on the Main menu to see the context menu with Reload Tree option as seen below. 
  2. Frame Tree changes based on user actions on the web page. Click the right click context menu - Reload Tree to reload the Frame Tree and updates tree in dialog.


WebSpy: Get Source ()


  1. You may download the source code of the current page using Source icon on WebSpy toolbar.
  2. In the screenshot below the Get Source icon is highlighted. Click the Get Source icon.



  |



  1. A Windows Explorer dialog box to save the Source Code opens. Navigate to an appropriate directory path to save the Source Code. Specify a name for the file. Click Save. 


WebSpy: Locate Element ()



  1.   |
    In the screenshot below the Locate element icon is highlighted. Click Locate Element on the WebSpy toolbar. 


  1. The Locate Element window pops up. Select a criterion from the drop down list as shown in the screenshot below. Provide a value for the criteria that you already know in the text box on the right. Click Locate to locate the element on the web page. 



  1. On clicking on highlighted element is deselected and and the field value is erased. 


WebSpy: Navigate to URL ()


  1. Click Navigate icon to navigate to another  URL and optionally create a Navigate to URL step.



  1. Upon cliking Navigate to URL a Navigate popup appears as below. Provide the navigation URL and optionally enable ‘Add Navigation Step on successful navigation’ check box. Enabling the checkbox creates a Navigate to URL step in the workflow.



WebSpy: Close WebSpy ()

  1. Click on the Close WebSpy icon to close WebSpy.



  |


WebSpy: Move Toolbar ()



  1.   |
    Left Click on the Move Toolbar icon and while clicked move Mouse to move the WebSpy toolbar to an appropriate location.



Close Web Spy

You may close WebSpy in the following two ways,

  1. Click on CloseWebSpy icon to close WebSpy.



  |
 



  1. Alternatively, you may click on the Move Toolbar icon.  Click Ctrl +Q to close WebSpy



  |



  1. This completes WebSpy basics.

Known Limitations

  1. Although, Web Spy shows hover/highlights anywhere on the screen, it detects & Web Spy’s only elements of selected Frame or Window. Parent frame has to be selected to detect child frames.
  2. On Click of Web Spy Get Windows button, all windows are populated in a drop down list, but on selection of particular pop up child window at times mouse hover does not work on the child pop up window. 
  3. In case Link Text element locator contains “&” sign, the same is shown as &amp, which should be corrected before using for locating elements.


  Note:

Refer Project 8: Spy and Folder Web Spy in AutomationEdge_Process_Studio_Getting_Started_Guide_R6.0.0 for a sample workflow using Web Spy.








      Links to better reach 

            Bot Store

             EPD