Page Inspector

  • Release version: Xanadu
  • Updated August 1, 2024
  • 3 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Page Inspector

    The Page Inspector is a developer tool within the ServiceNow AI Platform that allows you to identify and inspect HTML and JavaScript components on user interface pages. It enables automated testing by highlighting testable page components, ensuring your custom UI tests target only appropriate elements. This tool helps you understand which components can be tested with the Automated Test Framework (ATF) and provides detailed information about each component’s attributes.

    Show full answer Show less

    Key Features

    • A pane that opens beside the current page showing the Page Inspector interface.
    • Highlighted frames and components to visually identify elements under inspection.
    • Control buttons to display/hide the inspector pane, refresh components list, and select specific components.
    • A searchable list of page components available for custom UI testing, with detailed views of component information.
    • Label Path feature to show hierarchical context for components, aiding differentiation of similar elements.
    • Visibility of UI buttons with icons within the Page Inspector for comprehensive inspection.
    • A launcher to select and inspect different page types such as UI Pages, Service Portal, Standard UI, and Custom URLs.

    Testable and Untestable Components

    The Page Inspector categorizes page components based on their testability with custom UI test steps in ATF:

    • Testable components: Standard HTML and JavaScript elements accessible to ATF and usable in custom UI tests.
    • Exclusion listed components: These cannot be tested with custom UI test steps. Examples include:
      • Lists (use List and Related List test steps)
      • Forms (use Form test steps; UI formatters inside forms remain testable)
      • Service Catalog items (use Service Catalog test steps)
      • Specialized AI Platform interfaces and workspaces
    • These exclusion listed components are visually indicated in the Page Inspector with a grey background and provide guidance on the appropriate test category.
    • Inaccessible components: Elements that ATF cannot identify or test, often due to third-party JavaScript, Shadow DOM usage, or permission issues. These require redesign to enable testing.
    • Unsupported components: Such as certain team development elements or embedded external sites, which are not testable with ATF.

    Practical Application for ServiceNow Customers

    Using the Page Inspector, ServiceNow customers can:

    • Quickly identify which UI components on their platform pages are testable through custom UI tests.
    • Understand when to use alternative test step categories (Forms, Service Catalog, Lists) for components that are excluded from custom UI testing.
    • Inspect component details and hierarchy to improve test design and target correct elements.
    • Ensure their user interfaces are designed with testability in mind by avoiding inaccessible or unsupported components where possible.
    • Leverage the Page Inspector to troubleshoot and validate custom UI tests across different page types within ServiceNow.

    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.

    Figure 1. Page Inspector view of Knowledge Base article KB0011110
    Core UI view of Knowledge Base article KB0011110 and Page Inspector pane
    The Page Inspector provides these features.
    1. A highlighted frame to identify the currently inspected page.
    2. A banner icon to display or hide the Inspector pane.
    3. A button to refresh the list of page components.
    4. A button to hide the Inspector pane.
    5. An inspector button to identify specific components on a page.
    6. A list of page components available for custom UI testing.
    7. A page component search filter.
    8. A row to click to see more information about a page component.
    9. A highlighted row and tooltip to preview information about the currently inspected component.
    10. A highlighted page component to identify the currently inspected component on the page.
    11. A component label and back button to return to the list of page components.
    12. A list of actions to take on the current page component.
    13. A list of attribute information for the current page component.
    14. 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.
    Note:
    UI buttons with icons are now visible in the page inspector.
    Figure 2. Page Inspector view of component details
    Core UI view of the Page Inspector pane showing details for the Create Favorite page component

    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.

    Gif showing the different page types for inspection

    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

    The Page Inspector identifies these types of 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.Gif file showing the allowed part in the entire exclusion listed form.

    • 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
      Warning message reading "List are exclusion listed"
    • 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
      Warning message reading "Forms are exclusion listed"
      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
      Warning message reading "Service Catalog items are exclusion listed"
    • Certain components are excluded from custom UI pages and are forbidden from being tested.
      Figure 6. Sample exclusion listed component message
      Warning message reading "This component is exclusion listed"
    • 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
      Warning message reading "Workspaces are exclusion listed"
    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
      Warning message reading "This component is not accessible"
    • Team development is not supported in the Automated Test Framework
      Figure 9. Sample unsupported component message
      Warning message reading "Team Development is not supported in ATF"
    • 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
      Warning message reading "The Automated Test Framework is unable to test external sites that are embedded in pages on this site"