AutomatePro AutoTest Custom-Testing
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.
- 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
- Explanation:
- We’ve defined a Custom Action called
submit_form
. - The
lookup_field
parameter specifies that we’ll use theid
attribute for locating the button during runtime.
- We’ve defined a Custom Action called
- 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.
- When the Custom Action runs, it will search for an element with the specified
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>
- 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 theid="container"
.
- 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 theid
attribute equal to"submit-button"
.
- To select the button with the
- Using the Expression:
- In Python (using libraries like
lxml
orxml.etree.ElementTree
), you can evaluate this XPath expression against your HTML content to find the button element.
- In Python (using libraries like
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:
- Element Selector (
element
):- Selects all instances of a specific HTML element.
- Example:CSS
p { text-align: center; color: red; }
AI-generated code. Review and use carefully. More info on FAQ. - In this case, all
<p>
elements will be center-aligned and have red text1.
- ID Selector (
#id
):- Selects an element with a unique ID attribute.
- Example:CSS
#para1 { text-align: center; color: red; }
AI-generated code. Review and use carefully. More info on FAQ. - The rule above applies to the element with
id="para1"
1.
- Class Selector (
.class
):- Selects elements with a specific class attribute.
- Example:CSS
.center { text-align: center; color: red; }
AI-generated code. Review and use carefully. More info on FAQ. - All elements with
class="center"
will be red and center-aligned1.
- Combining Class and Element (
element.class
):- Selects specific elements with a particular class.
- Example:CSS
p.center { text-align: center; color: red; }
AI-generated code. Review and use carefully. More info on FAQ. - Only
<p>
elements withclass="center"
will be affected1.
- Universal Selector (
*
):- Selects all HTML elements on the page.
- Example:CSS
* { text-align: center; color: blue; }
AI-generated code. Review and use carefully. More info on FAQ. - Every element will have centered text and blue color1.
- Grouping Selector:
- Combines multiple selectors with the same style definitions.
- Example:CSS
h1, h2, p { text-align: center; color: red; }
AI-generated code. Review and use carefully. More info on FAQ. - All
<h1>
,<h2>
, and<p>
elements will share the same styles1.
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:
- Basic Iframe:
- To embed a webpage, use the
<iframe>
tag with thesrc
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.
- To embed a webpage, use the
- 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.
- You can set the height and width using attributes or inline styles:HTML
- 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.
- By default, iframes have a border. To remove it, add the
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:
- Navigate to the Custom Actions module in AutomatePro.
- Click on “Create New Action” and provide a descriptive name.
- 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:
- Action Type: Select the appropriate action type from the options available.
- Target Selector: Use XPath or CSS selectors to accurately identify the target element.
- 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']
- Contains:
CSS Selectors
Additionally, CSS selectors are straightforward and fast for selecting elements based on their styles and attributes.
- Basic Syntax:cssCopy code
tagname#id .classname
For example:cssCopy codeinput#username .login-button
- Advanced Usage:
- Attribute Contains:
[attribute*='value']
- Child:
parent > child
- Attribute Contains:
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 code
driver.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 code
const shadowRoot = element.shadowRoot; const shadowElement = shadowRoot.querySelector('selector');
- Basic Approach:javascriptCopy code
- Expand Shadow Roots: Ensure your custom actions can expand shadow roots to access nested elements.javascriptCopy code
const shadowHost = document.querySelector('shadow-host-selector'); const shadowRoot = shadowHost.shadowRoot; const targetElement = shadowRoot.querySelector('target-selector');