Test Editor

Learn how to use our built-in editor for creating and updating tests

Search our documentation:

Toggle Documentation Menu

Test Editor

Jump to...
  • Video Tutorial - Watch a video tutorial of the test editor in action
  • Test Steps - Manage the steps that your test performs in the browser
  • Step Actions - A complete list of the actions which a step can perform
  • Step Targets - Details on targeting elements within your test steps
  • Network Filters - Perform actions when specific network requests are detected

Video Tutorial


Test Steps

Ghost Inspector's test editor provides you with the ability to manage all the steps in your test, including adding, reordering and removing steps. It is accessible by clicking the "Edit Steps" button when viewing your test.

Tests are often created with our Chrome recorder first, then edited. However, tests can also be built from scratch. The test editor displays each test step as a block with options for adding, removing and moving each step. Drag and drop is supported for re-ordering test steps.

Ghost Inspector test editor

The dropdown menu on the bottom, left contains the action associated with the step. This dictates whether the step is performing an operation such as clicking an element, making an assertion, extracting a value into a variable, and so on. There is a wide range of actions available.

When a step involves interacting with an element on the page, for instance clicking a button, our system targets that element using CSS or XPath. The selector for the target element is entered into the "Element selector" input at the top of the step.

Ghost Inspector test editor

Certain actions will present additional fields for the step. For instance, an "Assign" step will present a field for inputing the value to assign to the element you are targeting — or add a file to be uploaded into a <input type="file"> input. A "Keypress" step will allow you to choose from a number of keystrokes like "Enter" and "Backspace". Steps that execute JavaScript will provide an input for adding your own code. Each step action has it's own set of fields related to the action it's performing.

Ghost Inspector test editor

Each step can be made optional, if you choose. This means that the test will continue execution, even if the step fails. This can be useful in situations when dealing with behavior that only occurs a portion of time, like a modal dialog popping up. Each step also has a field for adding notes so that you can document any necessary details. Step notes are displayed within the test results.

Ghost Inspector test editor


Step Actions

Ghost Inspector's test editor allows you to setup "Network Filters" that can perform an action when a specific network request is encountered. This section appears below the steps in your test.

Operations

Operations include the standard actions that a typical user will carry out on a webpage.

Click
Execute a mouse click on a specific element. The default is a typical left mouse click, but options for right clicking and double clicking are available.
Assign
Assign a value into an input field, such as an <input type="text"> element or a <select> element. This operation is also used for file uploading.
Keypress
Perform a keypress action, such as pressing Enter on an element.
Mouse over
Move the mouse cursor over an element, triggering mouseover events.
BETA Drag and drop
Drag one element and drop it on top of another element.
Pause
Pause for a specific amount of time. The time is specific in milliseconds, so a value of 5000 will pause the test for 5 seconds.
Execute JavaScript
Execute custom JavaScript code within the browser.
PREMIUM Capture Screenshot
Capture a full screenshot of the current page. Note that a final screenshot (with comparison) is always captured at the end of the test run.

Navigation actions include two straightforward operations for navigating to a page and refreshing.

Go to URL
Navigate to the specified URL in the browser.
Refresh
Refresh the current page in the browser.

Assertions

Assertions allow you to confirm that a certain condition is met on the page. Assertions are not required, but using at least one assertion at the end of your test is generally a good idea because it helps to confirm that things are working as expected.

For instance, consider a test that fills in "username" and "password" fields, then clicks a "Login" button and finishes. The expectation is that the test will perform a successful login. However, even if clicking the "Login" button causes an error and the user isn't logged in, the test will still pass because it's just carrying out those 3 actions then exiting. It's not actually performing any checks on the outcome of the login operation. If an assertion were added to the end of that test to make sure the page is displaying "Dashboard" (something that only happens once once the user is successfully logged in), then the test is far more useful — because it will fail if the login fails.

Element is present
This will pass if the specified element is present in the DOM. It will fail if it is not.
Element is not present
This will pass if the specified element is not present in the DOM. It will fail if it is present.
Element is visible
This will pass if the specified element is visible on the page, meaning that the element (and it's parents) do not have their display style attribute set to none or their visibility style attribute set to hidden. It will fail if the element is not visible.
Element is not visible
This will pass if the specified element is not visibile (as outlined above). It will fail if the element is visible.
Element text equals
This will pass if the specified element's text (or value) is exactly equal to the included text. It will fail if the element's text does not exactly match. (Note: We generally recommend using "Element text contains" instead of avoid issues with whitespace and newlines.)
Element text does not equal
This will pass if the specified element's text (or value) is not equal to the included text. It will fail if the element's text does exactly match.
Element text contains
This will pass if the specified element's text (or value) contains the included text. It will fail if the element's text does not contain the text.
Element text does not contain
This will pass if the specified element's text (or value) does not contain the included text. It will fail if the element's text does contain the text.
JavaScript returns true
This assertion allows you to execute custom JavaScript and return a value using a return statement. This will pass if the return value is "truthy" and fail if the return value is "falsy". We recommend using return values of true and false for clarify.

Store Variables

These actions allow for the creation of variables within your test.

Set Variable
Create a variable with a specific value.
Extract from element
Create a variable and set its value to the text of the specified element.
Extract from JavaScript
Create a variable and set its value to the value returned from your own custom JavaScript code.

Import

Import steps from test
Import the steps of another test into this spot. This allows you to modularize and reuse sets of test steps like subroutines.


Step Targets

Ghost Inspector targets the elements in your steps using CSS selectors (by default) or XPath (by prefixing the element selector with xpath=, for example xpath=//h2).

All valid CSS selectors are supported, including attribute selectors and the :contains() pseudo-selector (provided by the Sizzle selector engine that Ghost Inspector uses).

The :contains() pseudo-selector allows you to target elements based on their label (instead of IDs, classes and attributes). For instance, a link with text "Dashboard" can be targeted with a:contains("Dashboard"), which is often much more simple and clear than using classes, or the URL of the link itself.

Our Chrome recording extension will generate unique CSS selectors for each step designed to target the exact element that you interacted with while recording. Because our extension does not have any specific knowledge of your website or it's DOM, it's often beneficial (and highly encouraged) to review the generated CSS selectors after saving a test to look for areas where they can be simplified for clarity and durability.

If you're looking to generate a unique CSS selector for an element outside of our recording extension, Chrome offers options when you right click on elements in the developer console:

Copy CSS selector in Chrome Developer Console


Network Filters

Ghost Inspector's test editor allows you to setup "Network Filters" that can perform an action when a specific network request is encountered. This section appears below the steps in your test.

A network filter takes a regular expression for matching specific URLs and provides some actions that can be taken when that URL is encountered. You can choose to block the request by checking off the "Skip request" option. You can also choose to exit the test with either a pass or a fail status.

Ghost Inspector test editor

You may apply as many network requests as you would like. They are useful for blocking access to analytics, retrieving OAuth tokens, and various other tasks.