> 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/elements/creating-elements.md).

# Creating Elements

An [Element](/getting-started/terminology.md) is a reusable page object, such as a login button or welcome heading. Test Steps use Elements to find controls on the page. Create an Element once, then reuse it across steps and Flows.

![Assets Elements list with reusable page objects](https://static.does.qa/assets/ui/light/elements-store-intro.png)

```mermaid
flowchart TD
  start["Create Element"] --> title["Set Title"]
  title --> mode{"Element configuration"}
  mode -->|Automatic| desc["Write a Description"]
  mode -->|Manual| type["Pick Selector type"]
  desc --> use["Use in a Test Step"]
  type --> use
```

Your first Flow already creates Elements this way. See [Create and run your first Flow](/getting-started/create-and-run-your-first-flow.md).

## Where to create an Element

| Path                  | Use it when                                                                                                                                                          |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **+** on a Test Step  | You are already editing [**Touch**](/test-steps/action/touch.md), [**Check displayed**](/test-steps/check/check-displayed.md), or another step that needs an Element |
| **Assets → Elements** | You want to define Elements before you build the Flow, or manage the shared list                                                                                     |

Both paths open the same Create Element dialog. Prefer **+** on the step when you are mid-Flow so the new Element is selected straight away.

## Create an Element

{% stepper %}
{% step %}

## Open Create Element

Choose **+** next to **Element** on a Test Step, or go to **Assets → Elements** and create a new Element.
{% endstep %}

{% step %}

## Set a Title

Use a name testers recognise, such as `Primary CTA` or `Welcome heading`. The Title is how you pick the Element later. It is not the Selector.
{% endstep %}

{% step %}

## Choose Element configuration

**Element configuration** is either **Automatic** or **Manual**.

### Automatic

1. Set **Element configuration** to **Automatic**.
2. In **Description**, describe the control in plain language, for example `Yellow login button in the top right`.
3. Save. DoesQA generates a Selector from your Description.

The Selector field stays read-only while the Element is Automatic. Switch to **Manual** when you want to edit the Selector yourself.

### Manual

1. Set **Element configuration** to **Manual**.
2. Choose a **Type**: [Test ID](/elements/selector-types/test-id.md), [CSS](/elements/selector-types/css.md), [Visible Text](/elements/selector-types/visible-text.md), or [XPath](/elements/selector-types/xpath.md).
3. Enter the **Selector**, **Text**, or **Test ID** for that type.
4. Turn on **Dynamic Selector** only when the expression must include a [Value](/values/value-store.md).
5. Save.

Which type to pick, and how to keep Selectors stable, is covered in [Choose durable selectors](/better-coverage/choose-durable-selectors.md) and [Selector Types](/elements/selector-types.md).
{% endstep %}

{% step %}

## Use it in a Test Step

On [**Touch**](/test-steps/action/touch.md), [**Set value**](/test-steps/action/set-value.md), [**Check displayed**](/test-steps/check/check-displayed.md), or another step, choose the Element by **Title**. One Element can power many steps and Flows.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Pro tip:** Create the Element from **+** on the step that needs it. You avoid an empty Element field and you name the control in the context where you will use it.
{% endhint %}

## Related

* [Create and run your first Flow](/getting-started/create-and-run-your-first-flow.md)
* [Choose durable selectors](/better-coverage/choose-durable-selectors.md)
* [DoesQA AI](/platform/doesqa-ai.md)
* [Selector Types](/elements/selector-types.md)
* [CSS](/elements/selector-types/css.md)
* [XPath](/elements/selector-types/xpath.md)
* [Visible Text](/elements/selector-types/visible-text.md)
* [Test ID](/elements/selector-types/test-id.md)
* [Terminology](/getting-started/terminology.md)
* [Touch](/test-steps/action/touch.md)
* [Check displayed](/test-steps/check/check-displayed.md)