> For the complete documentation index, see [llms.txt](https://docs.testfirst.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.testfirst.com/testfirst-editor/editor-overview.md).

# Editor Overview

The **TestFirst Editor** is where you create, edit, and run your test cases.

It is a fully integrated workspace that allows you to:

* Write automated tests using Gherkin
* Record and automate tests using the Recorder
* Create manual test cases
* Run and debug tests
* View execution results in real time

***

### Editor Layout

The editor is designed to keep everything you need on a single screen.

#### Test Case Library (click **Library** to open the left panel)

* Organize your test cases into:
  * Projects
  * Suites
  * Sections
  * Subsections
* Create new test cases (Automated or Manual)
* Quickly navigate between tests

***

#### Editor Area

This is where you build your test.

Depending on the test type:

* **Automated tests** → Written using Gherkin
* **Manual tests** → A step-by-step table with expected results

You also get:

* Auto-complete suggestions while typing
* Easy editing and updates

***

#### Preview Panel (Right Side)

{% hint style="info" %}
Click the **Preview** button to show or hide the preview. The preview appears automatically when you run a test.
{% endhint %}

The **Preview panel** shows your test execution in real time.

* Displays browser interactions
* Updates as the test runs
* Helps verify UI behavior instantly

***

#### Debug Console (Bottom Panel)

The Debug Console provides execution details:

* Mapped Selectors (how elements are identified during execution)
* Execution log (step-by-step results)
* Debug log (detailed runtime info)
* Local variables (data during execution)

This is useful for troubleshooting and debugging tests.

***

### Test Case Types

You can create two types of test cases in the editor:

#### Automated Test Cases

* Written using Gherkin syntax
* Can be executed directly in the editor
* Ideal for automation and regression testing

***

#### Manual Test Cases

* Created using structured steps and expected results
* Used for manual testing workflows

***

### Basic Workflow

A typical workflow in the TestFirst Editor:

1. **Create or open a test case**
2. **Write your test**
   * Use Gherkin, Recorder, or manual steps
3. **Save the test**
4. **Run the test**
   * Use Dry Run or Debug mode
5. **Fix issues if needed**

***

### Key Actions

From the top toolbar, you can:

* **Save** → Save your test case
* **Recorder** → Record test cases
* **Local Run**
  * **Dry Run** → Run the test normally
  * **Debug** → Run with step-by-step control
* **Remote Run** → Run the test in the cloud
* **Stop** → Stop execution at any time