Using DOM Matching

Overview

In web applications, user-facing elements like input fields represent behind-the-scenes HTML code. For example, in the screenshots below, the field on the left is defined by the <input...> tag visible on the right.

In Rainforest, to select the target element of a test action, you can either (1) take a screenshot of the relevant part of your app’s user interface or (2) enter the relevant XPath or CSS selectors.

🚧

DOM matching is currently an experimental feature.

We’re still actively working on the stability and implementation of this feature.

Currently, Chrome on Windows 10 is the only supported browser.

How to use DOM matching

To add a DOM-matching step, you first need to identify the desired XPath or CSS selector.

📘

One way to get the selector is to open your browser’s developer tools while your app is loaded, right-click on node you want to use, and select Copy > Copy XPath.

Once you have the appropriate selector, inside Rainforest:

1. Click the plus button to add a new test step.

2. Select the action type (e.g., Click, Fill, Hover).

3. Change the search method from ‘Screenshot’ to ‘DOM search’.

   

4. Input the XPath or CSS selector in the field.

5. Preview the step for accuracy.

If you have any questions, reach out to us at [email protected].