The Live Editor

The Live Editor is an interface to create test case in an intuitive and productive way. It’s Live because while editing the test, there is a real test session running remotely on Frontend Robot’s infrastructure, which allows you to see the results of each step immediately.

Anatomy of the Live Editor

The differnt parts of the Live Editor
The different parts of the Live Editor

  1. Toolbar
  2. Instruction editor
  3. Steps list
  4. DOM snapshot

The DOM snapshot

The DOM snapshot is what the test runner “sees” after executing each step. It’s not just a screenshot, but the full HTML document (and its resources) at the time the snapshot was taken.

The DOM snapshot becomes immensely useful for debugging both the test and the application, as you get to know exactly what’s going on in the remote browser. Another advantage is that we can use the page to generate CSS selectors, as we will see later.

The DOM snapshot is a read-only view of the HTML document. To interact with the page you need to send instructions to the test runner.

The CSS selector generator

As we already mentioned, the DOM snapshot can be used to generate the CSS selector of any element on the page.

The selector field
The selector field in a 'Element exists' instruction

Every time you are editing an instruction which requires a selector, you will see a little target icon beside the selector input field. When the icon is highlighted green it means that it’s ready to extract a CSS selector from the DOM snapshot.

To extract a CSS selector, simply hover the mouse over an element in the DOM snapshot, click and the CSS selector for that element will be generated and copied into the selector field.

How to extract a selector

Questions?

We're always happy to help with test creation or other questions you might have! Search our documentation, contact support by email or on chat, or connect with our sales team.