> ## Documentation Index
> Fetch the complete documentation index at: https://docs.extractbase.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Element

Represents a single HTML element on a web page.
It provides properties and methods to query the state and content of the element.
The Element type implements the `Node` interface, inheriting common element-querying capabilities.
Instances of Element are typically obtained by querying a Page or another Element.

## Definition

```graphql theme={null}
object Element implements Node {
  element(
    selector: String
    text: String
    role: ARIARole
    label: String
    placeholder: String
    altText: String
    title: String
    testId: String
    filter: ElementFilterOptions
  ): Element
  elements(
    selector: String
    text: String
    role: ARIARole
    label: String
    placeholder: String
    altText: String
    title: String
    testId: String
    filter: ElementFilterOptions
  ): [Element]!
  ariaSnapshot: String
  attribute(
    name: String!
  ): String
  attributes: JSONObject
  boundingBox: BoundingBox
  innerHTML: String
  innerText: String
  markdown: String
  screenshot(
    options: ScreenshotOptions
  ): Download
  textContent: String
  count: Int
  first: Element
  inputValue: String
  isChecked: Boolean
  isDisabled: Boolean
  isEditable: Boolean
  isEnabled: Boolean
  isHidden: Boolean
  isVisible: Boolean
  last: Element
  nth(
    index: Int!
  ): Element
  selector: String
  xpath: String
}
```

## Fields

### `element`

[Element](/reference/graphql/objects/element)

Queries the current context (Page or Element) for a single element matching the specified criteria.
If multiple elements match, the first one is returned. Returns null if no element is found.
Supports various selector strategies including CSS selectors, text content, ARIA roles, and more.
Example: `element(selector: ".my-class", text: "Submit")`

#### Arguments

* **`selector`**: [String](/reference/graphql/scalars/string) - The CSS selector for the element. Example: `"#username"` for `<input id="username" />`.
* **`text`**: [String](/reference/graphql/scalars/string) - Finds an element by its text content. Example: `"Login"` for `<button>Login</button>`.
* **`role`**: [ARIARole](/reference/graphql/enums/ariarole) - Finds an element by its ARIA role. Example: `"button"` for `<div role="button">Submit</div>`.
* **`label`**: [String](/reference/graphql/scalars/string) - Finds an element by its ARIA label. Example: `"Search button"` for `<button aria-label="Search button"><svg/></button>`.
* **`placeholder`**: [String](/reference/graphql/scalars/string) - Finds an element by its placeholder text. Example: `"Enter your email"` for `<input placeholder="Enter your email" />`.
* **`altText`**: [String](/reference/graphql/scalars/string) - Finds an element by its image alt text. Example: `"Company logo"` for `<img alt="Company logo" src="..." />`.
* **`title`**: [String](/reference/graphql/scalars/string) - Finds an element by its title attribute. Example: `"Close dialog"` for `<span title="Close dialog">X</span>`.
* **`testId`**: [String](/reference/graphql/scalars/string) - Finds an element by its data-testid attribute. Example: `"submit-button"` for `<button data-testid="submit-button">Go</button>`.
* **`filter`**: [ElementFilterOptions](/reference/graphql/inputs/element-filter-options) - Advanced filtering options for the element.

### `elements`

[\[Element\]!](/reference/graphql/objects/element)

Queries the current context (Page or Element) for all elements matching the specified selector.
Supports various selector strategies including CSS selectors, text content, ARIA roles, and more.
Returns an empty list if no elements are found.
Example: `elements(selector: "div.product-item")`

#### Arguments

* **`selector`**: [String](/reference/graphql/scalars/string) - The CSS selector for the element. Example: `"#username"` for `<input id="username" />`.
* **`text`**: [String](/reference/graphql/scalars/string) - Finds an element by its text content. Example: `"Login"` for `<button>Login</button>`.
* **`role`**: [ARIARole](/reference/graphql/enums/ariarole) - Finds an element by its ARIA role. Example: `"button"` for `<div role="button">Submit</div>`.
* **`label`**: [String](/reference/graphql/scalars/string) - Finds an element by its ARIA label. Example: `"Search button"` for `<button aria-label="Search button"><svg/></button>`.
* **`placeholder`**: [String](/reference/graphql/scalars/string) - Finds an element by its placeholder text. Example: `"Enter your email"` for `<input placeholder="Enter your email" />`.
* **`altText`**: [String](/reference/graphql/scalars/string) - Finds an element by its image alt text. Example: `"Company logo"` for `<img alt="Company logo" src="..." />`.
* **`title`**: [String](/reference/graphql/scalars/string) - Finds an element by its title attribute. Example: `"Close dialog"` for `<span title="Close dialog">X</span>`.
* **`testId`**: [String](/reference/graphql/scalars/string) - Finds an element by its data-testid attribute. Example: `"submit-button"` for `<button data-testid="submit-button">Go</button>`.
* **`filter`**: [ElementFilterOptions](/reference/graphql/inputs/element-filter-options) - Advanced filtering options for the element.

### `ariaSnapshot`

[String](/reference/graphql/scalars/string)

Provides a snapshot of the ARIA (Accessible Rich Internet Applications) properties of the element.
This can be useful for accessibility testing and understanding the element's semantics.
The snapshot includes the element's role, name, and other properties.

### `attribute`

[String](/reference/graphql/scalars/string)

Retrieves the value of a specified attribute for the element.
Returns null if the attribute does not exist.
Example: `attribute(name: "href")` on an `<a>` tag, or `attribute(name: "data-custom")` on any element.

#### Arguments

* **`name`**: [String!](/reference/graphql/scalars/string) - The name of the attribute to retrieve. Example: `"class"`, `"id"`, `"value"`, `"src"`.

### `attributes`

[JSONObject](/reference/graphql/scalars/jsonobject)

Retrieves all attributes of the element as a JSON object.
Each key in the object is an attribute name, and its value is the attribute's string value.
Example: `{ "id": "myElement", "class": "active important", "data-value": "123" }`

### `boundingBox`

[BoundingBox](/reference/graphql/objects/bounding-box)

Returns the bounding box of the element in pixels, relative to the main frame's viewport.
Returns null if the element is not visible.

### `innerHTML`

[String](/reference/graphql/scalars/string)

Retrieves the inner HTML content of the element.
This includes all HTML markup within the element.
Example: For `<p>Hello <b>world</b></p>`, innerHTML would be `"Hello <b>world</b>"`.

### `innerText`

[String](/reference/graphql/scalars/string)

Retrieves the visible text content of the element, excluding hidden text but including text from the shadow DOM.
This is similar to what a user would see on the page.
Example: For `<p>Hello <b>world</b></p>`, innerText might be `"Hello world"`.

### `markdown`

[String](/reference/graphql/scalars/string)

Attempts to convert the HTML content of the element into Markdown format.
Useful for extracting structured text content.

### `screenshot`

[Download](/reference/graphql/objects/download)

Captures a screenshot of the element.
Returns a Download object containing the URL or Base64 data of the screenshot image.
Example: `screenshot(options: { type: PNG, omitBackground: true })`

#### Arguments

* **`options`**: [ScreenshotOptions](/reference/graphql/inputs/screenshot-options) - Options to configure the screenshot, such as image type, quality, or clipping. See `ScreenshotOptions`.

### `textContent`

[String](/reference/graphql/scalars/string)

Retrieves the text content of the element and all its descendants, including `<script>` and `<style>` tags.
Example: For `<p>Hello <b>world</b></p>`, textContent would be `"Hello world"`.

### `count`

[Int](/reference/graphql/scalars/int)

If this element was selected using a method that returns multiple elements (e.g. via `elements` query on a parent),
this field returns the total number of elements found by that selector.
Otherwise, it typically returns 1 if the element exists.
Example: If `page.elements(selector: "li")` found 5 items, and this is one of them, `count` would be 5.

### `first`

[Element](/reference/graphql/objects/element)

If this element is part of a list of elements (e.g., obtained via `elements` query),
this field returns the first element in that list.
Returns null if this element is not part of such a list or if the list is empty.

### `inputValue`

[String](/reference/graphql/scalars/string)

Retrieves the input value of an `<input>`, `<textarea>`, or `<select>` element.
For a `<select multiple>` element, it returns the first selected option's value.
Returns null if the element is not an input type that has a value.
Example: For `<input type="text" value="hello">`, `inputValue` would be "hello".

### `isChecked`

[Boolean](/reference/graphql/scalars/boolean)

Indicates whether a checkbox or radio button element is currently checked.
Returns true if checked, false otherwise. Returns null if the element is not checkable.
Example: For `<input type="checkbox" checked>`, `isChecked` would be true.

### `isDisabled`

[Boolean](/reference/graphql/scalars/boolean)

Indicates whether the element is disabled (e.g., has the 'disabled' attribute).
Returns true if the element is disabled, false otherwise.
Example: For `<button disabled>Click Me</button>`, `isDisabled` would be true.

### `isEditable`

[Boolean](/reference/graphql/scalars/boolean)

Indicates whether the element is editable by the user.
An element is editable if it's an `<input>`, `<textarea>`, or has the 'contenteditable' attribute set.
Returns true if editable, false otherwise.

### `isEnabled`

[Boolean](/reference/graphql/scalars/boolean)

Indicates whether the element is currently enabled (i.e., not disabled).
This is the logical opposite of `isDisabled`.
Returns true if the element is enabled, false otherwise.

### `isHidden`

[Boolean](/reference/graphql/scalars/boolean)

Indicates whether the element is hidden from view.
An element is considered hidden if it or its ancestors have `display: none` or `visibility: hidden` CSS properties,
or if it's a details element that is closed.
Returns true if hidden, false otherwise. Note: An element can be hidden but still exist in the DOM.

### `isVisible`

[Boolean](/reference/graphql/scalars/boolean)

Indicates whether the element is currently visible on the page.
Visibility is determined by factors such as `display: none`, `visibility: hidden`, opacity, element size,
and whether it's within the viewport's visible area.
Returns true if visible, false otherwise. This is generally the opposite of `isHidden`.

### `last`

[Element](/reference/graphql/objects/element)

If this element is part of a list of elements (e.g., obtained via `elements` query),
this field returns the last element in that list.
Returns null if this element is not part of such a list or if the list is empty.

### `nth`

[Element](/reference/graphql/objects/element)

If this element is part of a list of elements (e.g., obtained via `elements` query),
this field retrieves the element at the specified 0-based index within that list.
Returns null if the index is out of bounds.
Example: If `page.elements(selector: "li")` returned three items, `element.nth(1)` would refer to the second list item.

#### Arguments

* **`index`**: [Int!](/reference/graphql/scalars/int) - The 0-based index of the element to retrieve from the list.

### `selector`

[String](/reference/graphql/scalars/string)

The primary CSS selector that was used to locate this element, if available.
This can be useful for debugging or understanding how the element was found.
May be null if the element was located by other means (e.g., XPath or text).

### `xpath`

[String](/reference/graphql/scalars/string)

The XPath selector that was used to locate this element, if available.
May be null if the element was located by other means.

## Implements

* [Node](/reference/graphql/interfaces/node)