Scanning a Web Page
Scanning a Web Page
Article summary
Did you find this summary helpful?
Thank you for your feedback
Learn how to Generate Page Objects using the UI Scanner (Browser extension/addon) and create dynamic Models of a system under test (SUT).
Getting the most from the UI Scanner:
- Best used webpage with well-formed DOM (Document Object Model).
- Focus on static rather than dynamic components.
- Avoid using on generic pages ie, product page, instead have one generic Page Object interacting with that page.
Part 1a: Scan Objects (log actions) | Open the extension in the Browser with the relevant website loaded for scanning > Hit the Scan button > Click through the static Objects on the webpage (the scanned Objects turn red).
To pause scanning, press the Shift Key: Useful for if you want to go through dropdown menus of other pieces where interaction from the User is required.
Part 1b: Review the scanned Objects | Swivel open the Input to inspect the items. At this point, it’s possible to delete and unwanted scanned Object. In the Type dropdown, tag the action as Link | Button | Select | Input | Assertion | Hover. Also select which level (hierarchy) of the DOM to be used.
Where a warning symbol appears next to an Identifier, it’s been triaged as not reliable. Some reasons maybe badly auto-generated Name | across the Identifiers | iframes | shadow DOM elements.
Part 1b: Hit Upload > Select the directory where to upload the scan. Change the name to something meaningful.
Part 2: Review the scan | In the side menu, click Models (Explorer in updated UI) > Two files appear (Module Collection and Page Objects).
Part 3a: Using the Code Template to extend types of action | To do so, click the Download button, top right of the Module Collection. See in the open file of Java file, it’s complete with Automation Code.
Part 3b: Code Templates from Workspace dictate how the items are created | Click Workspace in side menu > Configuration > Choose Code Template tab > In the example, it’s Java Selenium framework (Page Object and Code).
Click Java Selenium > review the Tag and functions that can be performed. The Code can be edited at any time. Regenerate the Module Object > see in the downloaded code the changes are reflected in the underlying code.
Maybe in your particular platform you’re testing, you want to add a Custom UI Action to the Code.
To add any Code, it’s necessary to first copy the Read Only framework, so the new one becomes editable. To do so, click New Template > Select the original framework (to clone), in this case Java Selenium > hit Save. Now Edit the newest version of the framework > point the Pager Object accordingly.
Part 3c: Add New Custom Type | Click Add item > Select Type: New Custom Type > Add Name | Parameters | Return | Code (for the Custom Function).
Look at existing functions to get an idea of the Code Templates available, particularly the Keywords like FunctionName and ObjectName and Driver that can be picked up. Copy and paste them.
A way to expose reusable actions that you can reuse in the UI Scanner and propagate through the Automation Code that’s been generated.
Rescan to pick up new elements in order to see the new Custom Function is available in the Type dropdown. Upload the new Object and in Quality Modeller see two new assets related to the Custom Function created.
Part 4: Map multiple actions to an item | Open a Module Collection > click the Edit (pencil) icon in one of the rows > click Linked Actions tab > Assign any and multiple actions from the drop-down > hit Save and Regenerate.
Part 5a: Change management (rescanning Objects) | Select an existing Object to upload to > in the Options to Merge, map any scan to an existing one.
Part 5b: Change management (updating Object Repository) manually | Update the Name | Type | shadow DOMs | ranking > hit Regenerate. Also, it’s possible to Edit the Module (Path | Location | Framework) at any time.
