F • RThe 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
- Toolbar
- Steps list
- Instruction editor
- 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 picker
As we already mentioned, the DOM snapshot can be used to generate the CSS selector of any element on the page.
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 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.
