> For the complete documentation index, see [llms.txt](https://docs.does.qa/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.does.qa/getting-started/create-and-run-your-first-flow.md).

# Create and run your first Flow

In a few minutes you can open a page, touch a control, check that something is displayed, and see the result. You start in the **Scenario editor**, because that is where DoesQA opens a new Flow. You then switch to the **Flow** tab to finish the same test in the **Flow Builder**, where creating Elements is clearest.

```mermaid
flowchart TD
  open["Open URL"] --> touch["Touch Element<br/>Automatic Description"]
  touch --> check["Check element displayed<br/>Manual CSS"]
```

## What you need

* A website URL you can reach from the internet, such as your staging site or a public page
* One clickable control on that page
* Something that should be displayed after the click, so you can check it

## Build the Flow

{% stepper %}
{% step %}

## Open a Flow

Select **Flows** in the left navigation.

If your account already has **My First Flow**, open it. Otherwise select **Create flow**, enter a **Title** and **Url**, then save.

DoesQA opens the Flow in the **Scenario** tab. That is the Scenario editor.
{% endstep %}

{% step %}

## Set the Open step

The first line is always [**Open**](/test-steps/starter/open.md). It should look like:

`Open https://your-site.example on Chrome`

If the URL is wrong, click the URL part of the sentence and update it. Changes save as you work.

<figure><img src="https://app.does.qa/screenshots/node/starter_open.png" alt="Open Test Step"><figcaption><p>Open</p></figcaption></figure>
{% endstep %}

{% step %}

## Open the Flow Builder

Select the **Flow** tab.

The Scenario editor and the Flow Builder share the same Test Steps. The canvas shows the Open step you already set, so you are not starting again. The next steps use the canvas so you can create Elements as you add them.
{% endstep %}

{% step %}

## Add Touch and create an Element from a Description

Drag [**Touch**](/test-steps/action/touch.md) from the step library onto the canvas, below **Open**, so the steps connect.

<figure><img src="https://app.does.qa/screenshots/node/action_touch_single.png" alt="Touch Test Step"><figcaption><p>Touch</p></figcaption></figure>

1. Open the Touch step.
2. Keep **Type** as **Element**.
3. Choose **+** next to **Element** to create one.
4. Set a clear **Title**, such as `Primary CTA`.
5. Set **Element configuration** to **Automatic**.
6. In **Description**, describe the control in plain language, for example `Yellow login button in the top right`.
7. Save the Element, then save the step.

DoesQA generates a Selector from your Description. You can switch the Element to **Manual** later if you want to edit the Selector yourself.
{% endstep %}

{% step %}

## Add Check displayed with a CSS Element

Drag [**Check displayed**](/test-steps/check/check-displayed.md) below **Touch**.

<figure><img src="https://app.does.qa/screenshots/node/check_is_displayed.png" alt="Check displayed Test Step"><figcaption><p>Check element displayed</p></figcaption></figure>

1. Open the Check displayed step.
2. Choose **+** next to **Element**.
3. Set a **Title**, such as `Welcome heading`.
4. Set **Element configuration** to **Manual**.
5. Set **Type** to **CSS**.
6. Enter a Selector for the Element that should appear after the touch, for example `#welcome` or `[data-testid="welcome"]`.
7. Save the Element, then save the step.
   {% endstep %}

{% step %}

## Run the Flow

Select **Run Flow** in the toolbar.

DoesQA saves the Flow, starts a Run, and opens the **Results** tab. Follow [Understand your results](/getting-started/understand-your-results.md) to read what came back.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Pro tip:** Use **Preview Tests** from the toolbar menu while you are still editing. It is a fast way to check the Flow before a full Run.
{% endhint %}

## The finished Flow

![Open, Touch, and Check element displayed connected on the Flow Builder canvas](https://static.does.qa/assets/ui/light/first-flow-intro.png)

From here you can rearrange steps on the canvas, add [Flow Branches](/better-coverage/choose-flow-branch-shapes.md), and grow the Flow into fuller coverage.

## Related

* [DoesQA concepts](/getting-started/doesqa-concepts.md)
* [Flow Builder](/platform/flow-builder.md)
* [Choose Flow Branch shapes](/better-coverage/choose-flow-branch-shapes.md)
* [Scenario editor](/platform/scenario-editor.md)
* [Understand your results](/getting-started/understand-your-results.md)
* [Open](/test-steps/starter/open.md)
* [Touch](/test-steps/action/touch.md)
* [Check displayed](/test-steps/check/check-displayed.md)
* [Choose durable selectors](/better-coverage/choose-durable-selectors.md)
* [Creating Elements](/elements/creating-elements.md)
* [Terminology](/getting-started/terminology.md)