Page Object Generation - Feature Video
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 genertic Page Object interacting with that page
Part 1a: Scan Objects (log actions) | Open the exention 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 od 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 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 Indentifier, 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 Selenuium 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 framwork (to clone), in this case Java Selenium > hit Save. Now Edit the newest versino 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 propogate through teh 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 Test Modeller see two new assets related to teh Custom Function created.
Part 4: Map multiple actions to an item | Open a Module Collection > click the Edit (pencil) icon one of the 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 Oprions to Merge map any scan to an exising 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.
TEST MODELLER FEATURE OVERVIEW