AutomatePro AutoTest Custom-Testing

Help Center
< All Topics
Print

AutomatePro AutoTest Custom-Testing

PostedJune 27, 2024
UpdatedJune 27, 2024
ByDawn Christine Simmons

AutomatePro AutoTest Custom-Testing Introduction: insight into the capability to more advancedd techniques to extend and customize the testing process within ServiceNow. Learn how to use the output of ServiceNow Lookup Records to determine action inside a custom action. This guide will introduce you to the concept of custom checks and actions, providing simple definitions and a comprehensive overview of creating and configuring these customizations. You will also learn how to use:

  • XPath
  • CSS selectors
  • Work with frames
  • Handle shadow roots.

AutomatePro AutoTest Custom-Testing Definitions:

Custom Actions:

These are specific interactions with elements on a web page that you define to automate testing processes. Here is a practical example:

Imagine we want to click a button with a specific id attribute on a webpage.

  1. Define the Custom Action:Python@action( methods=["POST"], detail=True, url_name="submit", url_path="submit", lookup_field="id" # Use the 'id' attribute for lookup ) def submit_form(self, request, pk=None): # Your custom logic here pass
  2. Explanation:
    • We’ve defined a Custom Action called submit_form.
    • The lookup_field parameter specifies that we’ll use the id attribute for locating the button during runtime.
  3. During Execution:
    • When the Custom Action runs, it will search for an element with the specified id.
    • If the button’s id matches the lookup value (e.g., submit-button), the action will click it.

Remember, lookups make your Custom Actions more robust and adaptable. You can easily adjust to changes in the page structure without rewriting your code.

XPath Selectors:

A language used for locating elements on a web page based on their hierarchy and attributes. XPath selectors are powerful tools for navigating and selecting elements within an XML document or an HTML page. Let’s look at a simple example using the following HTML snippet:

HTML

<div id="container">
    <h1>Welcome to My Website</h1>
    <p>Explore our content!</p>
    <button id="submit-button">Click Me</button>
</div>
  1. XPath Path Notation:
    • XPath uses path notation to traverse down into an XML document or an HTML page.
    • For example, the expression /div/h1 would select the <h1> element inside the <div> with the id="container".
  2. Selecting the Button Element:
    • To select the button with the id="submit-button", we can use the XPath expression://button[@id="submit-button"]
    • Breakdown:
      • //button: Selects any <button> element.
      • [@id="submit-button"]: Filters by the id attribute equal to "submit-button".
  3. Using the Expression:
    • In Python (using libraries like lxml or xml.etree.ElementTree), you can evaluate this XPath expression against your HTML content to find the button element.

XPath expressions can be more complex, allowing you to navigate through various levels of the document and filter elements based on attributes, and text content. For more detailed reference, check out the W3Schools XPath tutorial or the XPath vs CSS Selectors guide.

CSS Selectors:

A pattern used to select and style elements on a web page based on their attributes and styles.

CSS selectors allow you to target specific HTML elements for styling. Here are some common examples:

  1. Element Selector (element):
  2. ID Selector (#id):
  3. Class Selector (.class):
  4. Combining Class and Element (element.class):
  5. Universal Selector (*):
  6. Grouping Selector:

Frames (iframes):

HTML elements used to embed content from other sources, requiring context switching to interact with their content.

Let’s explore how to use iframes (inline frames) in HTML. An iframe allows you to embed another web page within your current page. Here are some examples:

  1. Basic Iframe:
    • To embed a webpage, use the <iframe> tag with the src attribute pointing to the desired URL:HTML<iframe src="https://www.example.com" width="600" height="400" frameborder="0"></iframe> AI-generated code. Review and use carefully. More info on FAQ.
    • This displays the content of https://www.example.com within the iframe.
  2. Customizing Iframe Size:
    • You can set the height and width using attributes or inline styles:HTML<!-- Using attributes --> <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe> <!-- Using inline styles --> <iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe> AI-generated code. Review and use carefully. More info on FAQ.
  3. Removing the Border:
    • By default, iframes have a border. To remove it, add the style attribute:HTML<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe> AI-generated code. Review and use carefully. More info on FAQ.

Shadow Roots:

Encapsulated parts of the DOM used by web components, which require special handling to access nested elements.

Creating and Configuring AutomatePro AutoTest Custom-Testing:

Creating Custom Actions

Firstly, custom actions in AutomatePro AutoTest allow you to define specific interactions with web page elements. To get started, follow these steps:

  1. Navigate to the Custom Actions module in AutomatePro.
  2. Click on “Create New Action” and provide a descriptive name.
  3. Define the action type, such as click or input text, and set the required parameters.

Configuring Custom Actions

Next, configure the custom action to integrate it into your test scripts. Here’s how:

  1. Action Type: Select the appropriate action type from the options available.
  2. Target Selector: Use XPath or CSS selectors to accurately identify the target element.
  3. Parameters: Set additional parameters required for the action, such as input values or expected results.

Using XPath and CSS Selectors

XPath Selectors

Firstly, XPath (XML Path Language) is a powerful tool for locating elements based on their hierarchy and attributes.

  • Basic Syntax:xpathCopy code//tagname[@attribute='value'] For example:xpathCopy code//input[@id='username']
  • Advanced Usage:
    • Contains: //tagname[contains(@attribute, 'value')]
    • Text: //tagname[text()='value']

CSS Selectors

Additionally, CSS selectors are straightforward and fast for selecting elements based on their styles and attributes.

  • Basic Syntax:cssCopy codetagname#id .classname For example:cssCopy codeinput#username .login-button
  • Advanced Usage:
    • Attribute Contains: [attribute*='value']
    • Child: parent > child

Understanding the Use of Frames

Working with Frames

Moreover, web pages often use frames (iframes) to embed content from other sources. Therefore, when dealing with frames, ensure your custom actions and checks can access the elements within these frames.

  • Identify Frame: Use developer tools to inspect the iframe and get its attributes.
  • Switch Context: Configure your custom action to switch to the frame context before interacting with elements.javascriptCopy codedriver.switchTo().frame("frameNameOrId");
  • Nested Frames: Handle nested frames by sequentially switching to each frame in the hierarchy.

Exploring Shadow Roots

Understanding Shadow DOM

Furthermore, Shadow DOM is used for encapsulating the internal structure of web components. Elements within shadow roots are not accessible via standard selectors unless the shadow root is expanded.

  • Accessing Shadow DOM:
    • Basic Approach:javascriptCopy codeconst shadowRoot = element.shadowRoot; const shadowElement = shadowRoot.querySelector('selector');
  • Expand Shadow Roots: Ensure your custom actions can expand shadow roots to access nested elements.javascriptCopy codeconst shadowHost = document.querySelector('shadow-host-selector'); const shadowRoot = shadowHost.shadowRoot; const targetElement = shadowRoot.querySelector('target-selector');

Other Resources AutomatePro AutoTest Custom-Testing:

Tags:
Table of Contents
↑