Page Inspector
Summarize
Summary of Page Inspector
The Page Inspector is a developer tool in ServiceNow Yokohama release that enables identification and inspection of HTML and JavaScript page components within user interfaces. It supports custom UI testing by highlighting elements that are testable by the Automated Test Framework (ATF). This tool is accessed via a pane alongside any ServiceNow AI Platform page and is designed to help test designers create effective automated tests by focusing only on testable components.
Show less
Key Features
- Component Identification: Highlights the currently inspected page and individual components with visual cues such as frames and banners.
- Component Details: Provides detailed information about each page component, including label paths showing hierarchical context for differentiation.
- Interactive Controls: Includes controls to refresh components, toggle the inspector pane, search components, and navigate between component details and the list view.
- Testable vs Untestable Components: Clearly distinguishes testable components (standard HTML/JavaScript accessible by ATF) from untestable ones, with visual indicators and explanatory messages.
- Page Types Inspection: Supports inspecting various page types such as UI Pages, Service Portal, Standard UI, and Custom URLs for troubleshooting and testing readiness.
- Page Inspector Launcher: Facilitates selecting and launching specific pages within the inspector for focused analysis.
Untestable and Unsupported Components
The Page Inspector identifies several categories of components that cannot be tested using custom UI test steps:
- Exclusion Listed Components: Includes specialized AI Platform UIs, lists, forms, Service Catalog items, workspaces, and other components that require alternative ATF categories like Forms, Lists, or Service Catalog test steps.
- Inaccessible Components: Elements such as third-party JavaScript libraries or Shadow DOM elements that ATF cannot identify or access due to configuration limitations.
- Unsupported Components: Components that do not support team development or external embedded sites within platform pages.
Visual cues such as grey backgrounds and specific messages inform test designers about the testing restrictions and appropriate test categories to use.
Practical Implications for ServiceNow Customers
ServiceNow customers can leverage the Page Inspector to:
- Accurately identify which UI components are suitable for custom UI automated testing, improving test reliability.
- Understand testing limitations for certain page elements and switch to appropriate testing categories to cover those areas.
- Use hierarchical label paths to distinguish similar components and create precise test steps.
- Inspect and troubleshoot multiple page types to ensure UI elements are correctly configured for automation.
- Plan and optimize automated test design by focusing efforts on accessible, testable UI components and avoiding unsupported elements.
Identify the HTML and JavaScript page components in your user interfaces that are available for custom UI testing. Enable automated testing by ensuring that your user interfaces only contain testable page components.
The Page Inspector is a developer setting that opens a new pane beside any currently displayed ServiceNow AI Platform page.
- A highlighted frame to identify the currently inspected page.
- A banner icon to display or hide the Inspector pane.
- A button to refresh the list of page components.
- A button to hide the Inspector pane.
- An inspector button to identify specific components on a page.
- A list of page components available for custom UI testing.
- A page component search filter.
- A row to click to see more information about a page component.
- A highlighted row and tooltip to preview information about the currently inspected component.
- A highlighted page component to identify the currently inspected component on the page.
- A component label and back button to return to the list of page components.
- A list of actions to take on the current page component.
- A list of attribute information for the current page component.
- An attribute name and value pair for a page component.Note:You can use the Label Path field to show the hierarchical page context around an element while inspecting a component on a page. If there are many "ancestor" label paths of an element, it can display only three. Each label path element is separated by a >. It can be used to differentiate between two similar looking components.
Page inspector launcher
The page inspector launcher helps you select and launch a specific page within the page inspector. See Inspect different page types for more information.
Testable page components
The Page Inspector retrieves the list of testable page components when you first load a page. Testable components consist of standard HTML and JavaScript that are accessible to the Automated Test Framework. Test designers can use these components as part of custom UI testing.
Untestable page components
- Exclusion listed
- Exclusion listed page components can't be tested using any Custom
UI test steps. Exclusion listed page components typically include
specialized ServiceNow AI Platform user interfaces and components already testable by
other means. Test designers can't create custom UI tests for exclusion listed page
components. To test these components, they must use another supported test category
such as Forms or Service Catalog.
In the Page Inspector, the exclusion listed interfaces are indicated by a grey background color when the inspect icon is dragged over them. A detailed message about the step category that needs to be used to test these components is displayed by dropping the inspect icon on an exclusion listed component.
- Lists can't be tested using custom UI test steps. Use List and Related List test step category to
test lists.
Figure 3. Sample exclusion listed list message - Forms can't be tested using custom UI test steps. To test forms, use Form category test steps.
Figure 4. Sample exclusion listed form message Note:The UI formatters within forms can be accessed and tested using custom UI test steps. See Create a custom UI test for more information. - Service Catalog items can't be tested using custom UI test steps. To test
catalog items, use Service Catalog category test steps.
Figure 5. Sample exclusion listed catalog item message - Certain components are excluded from custom UI pages and are forbidden from
being tested.
Figure 6. Sample exclusion listed component message - Workspaces can't be tested using custom UI test steps. To test forms in an
available workspace, use Form category
test steps.
Figure 7. Sample exclusion listed workspace message
- Lists can't be tested using custom UI test steps. Use List and Related List test step category to
test lists.
- Inaccessible
- Inaccessible page components are elements that Automated Test Framework either cannot identify or does not have permission to test
because of some configuration issue. Inaccessible page components typically include
third-party JavaScript libraries or elements with a Shadow DOM. Test designers cannot create
custom UI tests for inaccessible page components, but may be able to redesign the page to use
components accessible to Automated Test Framework.
- Certain components are not accessible in the Automated Test Framework
Figure 8. Sample inaccessible component message - Team development is not supported in the Automated Test Framework
Figure 9. Sample unsupported component message - Testing external sites that are embedded in platform pages is not supported in
the Automated Test Framework
Figure 10. Sample unsupported embedded external sites message
- Certain components are not accessible in the Automated Test Framework