Page Objects: TheInternet and Kendo Examples

This page documents the Ocaramba.Tests.PageObjects project, which serves as the reference implementation for the Page Object Model (POM) within the Ocaramba framework. It demonstrates how to utilize ElementLocator, GetElement, and high-level WebElements to interact with complex UI components from "The Internet" (a popular test automation site) and Kendo UI widgets.

TheInternet Page Objects

The project provides a comprehensive suite of page objects for "The Internet" herokuapp. These classes inherit from ProjectPageBase Ocaramba.Tests.PageObjects/PageObjects/TheInternet/InternetPage.cs35 gaining access to the DriverContext.

InternetPage (Navigation Hub)

The InternetPage class acts as the central entry point for navigating the application. It contains methods to open the home page with or without credentials and provides navigation methods to specific sub-pages.

• Implementation: Uses ElementLocator with Locator.CssSelector, Locator.XPath, Locator.LinkText, and Locator.PartialLinkText Ocaramba.Tests.PageObjects/PageObjects/TheInternet/InternetPage.cs43-48
• Dynamic Formatting: The linkLocator uses a format string a[href='/{0}'] Ocaramba.Tests.PageObjects/PageObjects/TheInternet/InternetPage.cs44 allowing the GoToPage(string page) method to navigate to various sections by injecting the endpoint name Ocaramba.Tests.PageObjects/PageObjects/TheInternet/InternetPage.cs107-110
• Navigation Logic: Methods like GoToDynamicControls, GoToJavaScriptAlerts, and GoToTablesPage use these formatted locators to click and return a new instance of the destination Page Object Ocaramba.Tests.PageObjects/PageObjects/TheInternet/InternetPage.cs77-160

FormAuthenticationPage

This page handles login scenarios. It demonstrates the use of JavaScript execution for element interaction and complex waits.

• Explicit Waits: The constructor uses WaitHelper.Wait to ensure the login button is displayed before proceeding, with a timeout derived from BaseConfiguration.LongTimeout Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs59
• JavaScript Interaction: Methods like EnterUserName and EnterPassword use IJavaScriptExecutor to set input values directly, bypassing standard SendKeys when necessary Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs83-98
• Fluent Verification: The GetMessage property uses a custom predicate e => e.Displayed && e.Enabled within GetElement to ensure the element is ready before retrieving text, polling every 0.1 seconds Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs67

IFramePage and Screenshots

The IFramePage demonstrates handling frames and taking element-level screenshots, which is critical for visual regression testing.

• Frame Switching: Uses this.Driver.SwitchTo().Frame(0) to access content inside the TinyMCE editor Ocaramba.Tests.PageObjects/PageObjects/TheInternet/IFramePage.cs60
• Element Screenshots: Utilizes the TakeScreenShot.TakeScreenShotOfElement helper to capture specific UI components like the menu or the text area inside the iframe Ocaramba.Tests.PageObjects/PageObjects/TheInternet/IFramePage.cs63-70
• Wait Logic: Handles overlay buttons (like "close" buttons in editors) using WaitHelper.Wait before interacting with the frame Ocaramba.Tests.PageObjects/PageObjects/TheInternet/IFramePage.cs53-57

Key Interaction Flow: Navigation to Authentication

The following diagram illustrates the flow from the main hub to the authentication page and the internal locator resolution.

Diagram: Navigation and Locator Mapping

Sources: Ocaramba.Tests.PageObjects/PageObjects/TheInternet/InternetPage.cs174-180 Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs47-52 Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs101-106

Kendo UI Page Objects

Ocaramba provides specialized wrappers for Kendo UI components. The reference project includes examples for complex widgets like Grids and TreeViews. These wrappers encapsulate the JavaScript logic required to interact with Kendo's internal APIs.

Supported Kendo Components

Component	Page Object Class	Key Functionality
ComboBox	KendoComboBoxPage	Selecting items by text/index in Kendo ComboBoxes.
DropDownList	KendoDropDownListPage	Interaction with Kendo-specific dropdown structures.
Grid	KendoGridPage	Accessing data rows and columns within a Kendo Grid.
TreeView	KendoTreeViewPage	Expanding nodes and selecting items in hierarchical trees.

Implementation Patterns

Kendo page objects utilize this.Driver.GetElement<KendoWrapper>(locator) to access extended functionality. For example, a KendoGrid allows retrieving the number of rows or specific cell values without manually parsing the underlying HTML table structure.

Technical Implementation Details

ElementLocator and GetElement

The project serves as a primary example of using ElementLocator to define metadata for elements separately from the logic.

• Definition: private readonly ElementLocator name = new ElementLocator(Locator.Type, "Value") Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs47-52
• Retrieval: this.Driver.GetElement(this.locator) Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs81
• Synchronization: The framework automatically applies timeouts defined in BaseConfiguration during GetElement calls Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs67 The implementation of GetElement in SearchContextExtensions ensures that synchronization with Angular is handled if enabled OcarambaLite/Extensions/SearchContextExtensions.cs129-132

Interaction Logic Flow

The following diagram shows how a Page Object method interacts with the Ocaramba core extensions to perform an action.

Diagram: Form Authentication Sequence

Sources: Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs90-99 Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs101-106 OcarambaLite/Extensions/SearchContextExtensions.cs54-57

Specialized Page Methods

• KeyPressesPage: Demonstrates the Actions API via this.Driver.Actions() to simulate keyboard events like Keys.Escape, Keys.Tab, or Keys.ArrowDown Ocaramba.Tests.PageObjects/PageObjects/TheInternet/KeyPressesPage.cs71-122
• FloatingMenuPage: Shows the use of ScrollIntoMiddle to ensure elements are interactable before clicking Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FloatingMenuPage.cs55-61
• ForgotPasswordPage: Uses NameHelper.RandomName to generate dynamic test data for email fields Ocaramba.Tests.PageObjects/PageObjects/TheInternet/ForgotPasswordPage.cs78-84
• SecureFileDownloadPage: Shows browser-specific logic for downloading and renaming files using FilesHelper Ocaramba.Tests.PageObjects/PageObjects/TheInternet/SecureFileDownloadPage.cs55-71
• BasicAuthPage: Demonstrates saving page source via DriverContext.SavePageSource and verifying the existence of the saved file using FilesHelper.WaitForFileOfGivenName Ocaramba.Tests.PageObjects/PageObjects/TheInternet/BasicAuthPage.cs64-73

Sources: Ocaramba.Tests.PageObjects/PageObjects/TheInternet/InternetPage.cs1-180 Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FormAuthenticationPage.cs1-107 Ocaramba.Tests.PageObjects/PageObjects/TheInternet/IFramePage.cs33-72 Ocaramba.Tests.PageObjects/PageObjects/TheInternet/KeyPressesPage.cs1-124 Ocaramba.Tests.PageObjects/PageObjects/TheInternet/BasicAuthPage.cs1-75 Ocaramba.Tests.PageObjects/PageObjects/TheInternet/FloatingMenuPage.cs1-67 Ocaramba.Tests.PageObjects/PageObjects/TheInternet/ForgotPasswordPage.cs1-86 Ocaramba.Tests.PageObjects/PageObjects/TheInternet/SecureFileDownloadPage.cs33-73 OcarambaLite/Extensions/SearchContextExtensions.cs40-147 OcarambaLite/Helpers/TakeScreenShot.cs33-60