# Selectors

Selectors allow you to identify elements on the page when extracting data or interacting with the page.

For example, if you want Browserflow to click on a certain button on the page, it needs to know which button to click. The selector `button:contains("Submit")` would tell Browserflow to click on a `<button>` HTML element with the text "Submit".

## Generating selectors

Ways to generate selectors:

1. Recording actions
2. Using the "Select" button
3. Writing your own selector

### Recording actions

When [recording a flow](https://docs.browserflow.app/building-a-flow#recording-actions), Browserflow will automatically generate selectors for the elements you interact with.

### Using the "Select" button

In the Browserflow editor, you'll find a "Select" button next to the selector field in any command that requires a selector:

![](https://3538866232-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTkfP5kdRxgX1naUvcT%2F-MUwBebZzNmP9s6yCBrE%2F-MUwDdD0iKv-uWd-Sx3N%2Fimage.png?alt=media\&token=3a80d9ad-a109-47d6-9359-d06ce1b1d808)

Clicking the "Select" button will trigger the element picker on the current page. When you click on an element, Browserflow will automatically generate a selector for that element.

### Writing your own selector

In addition to all [normal CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors), Browserflow supports a few non-standard psuedo-selectors:

* [`:contains`](https://api.jquery.com/contains-selector/) - Allows selecting an element by its text contents (case-sensitive)
  * e.g. A button with the text "Submit": `button:contains("Submit")`
* [`:has`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) - Allows selecting an element by the elements it contains
  * e.g. Tweets that embed an external link: `[data-testid="tweet"]:has(a[href*="https://t.co/"])`