# Gameface Frontend Tools: full documentation > Every page, as sections of at most ~1,600 characters separated by `---`. Each section starts > with a SOURCE tag naming its page URL and heading anchor; a section split into parts is headed `(i/n)`. --- [SOURCE: https://frontend-tools.coherent-labs.com/] ## Gameface Frontend Tools (1/2) Gameface E2E Gameface E2E is a powerful tool for testing your game user interfaces. It provides a robust framework for writing end-to-end tests, ensuring that your UI behaves as expected across different scenarios. Check the Gameface E2E documentation Interaction manager The Interaction Manager is a utility that simplifies the process of managing user interactions in your game UI. It provides a set of tools to handle gamepad controls, spatial navigation, drag and drop, resizing, rotating, and panzoom functionalities. Check the Interaction manager documentation Gameface Vite Plugin The Gameface Vite plugin is designed to enhance your development experience when using SolidJS with Gameface. Check the Gameface Vite plugin documentation Vite Gameface Style Transformer A framework-agnostic Vite plugin and UnoCSS preset designed specifically for Coherent Gameface. Check the Vite Gameface Style Transformer plugin documentation Vite Gameface Rasterize A Vite plugin that turns expensive static CSS decoration like `box-shadow`, `filter`, gradients, and rounded fills into pre-rendered textures at build time, while your content stays live. Check the Vite Gameface Rasterize plugin documentation Data binding autocomplete The Data Binding Autocomplete vscode extension enhances your development experience by providing autocompletion for Gameface data bindings. It helps you quickly reference and bind data properties, improving productivity and reducing errors. Check the extension’s documentation ESLint plugin for Gameface --- [SOURCE: https://frontend-tools.coherent-labs.com/] ## Gameface Frontend Tools (2/2) Catch unsupported CSS, HTML, data binding, SVG, and JavaScript patterns in your UI before runtime using ESLint plugin for Gameface. Check the ESLint plugin documentation Create Gameface App Quickly scaffold a new Gameface project with the Create Gameface App CLI tool. Check the Create Gameface App documentation Gameface CLI The Gameface CLI is a command-line tool that helps you manage your Gameface UI projects efficiently. Check the Gameface CLI documentation --- [SOURCE: https://frontend-tools.coherent-labs.com/create-gameface-app/changelog/#111] ## Changelog: 1.1.1 Latest Fix Remove the `src/recipes` directory from Projects scaffolded from the `gameface-ui` template. --- [SOURCE: https://frontend-tools.coherent-labs.com/create-gameface-app/changelog/#110] ## Changelog: 1.1.0 Feature Projects scaffolded from the `gameface-ui` template now record the components they ship under `gameface-ui-components` in `package.json`, with versions read from the library registry. `gameface-cli` uses this to report and update them straight after scaffolding. --- [SOURCE: https://frontend-tools.coherent-labs.com/create-gameface-app/changelog/#100] ## Changelog: 1.0.0 Feature Initial release of `create-gameface-app`. Feature Interactive scaffolding of Gameface projects from the `gameface-ui`, `solid`, `react`, `preact`, `vue`, and `svelte` templates. Feature Command-line arguments for non-interactive use: a project name positional plus `--template`, `--yes`, and `--help` flags. Feature Optional automatic installation of dependencies with the detected package manager once scaffolding completes. --- [SOURCE: https://frontend-tools.coherent-labs.com/create-gameface-app/getting-started/] ## Overview `create-gameface-app` is a command-line tool that scaffolds a new Gameface project from a starter template. It downloads the template of your choice, optionally installs its dependencies, and leaves you with a project that is ready to run. --- [SOURCE: https://frontend-tools.coherent-labs.com/create-gameface-app/getting-started/#quick-start] ## Overview: Quick start Run the initializer with your package manager of choice and follow the prompts: **npm:** ``` npm create gameface-app ``` **pnpm:** ``` pnpm create gameface-app ``` **yarn:** ``` yarn create gameface-app ``` **npx:** ``` npx create-gameface-app ``` With no arguments the CLI is fully interactive and walks you through every step: 1. **Project name** - the folder to create the project in. 2. **Template** - the framework starter to use. 3. **Confirmation** - confirm before the files are written. 4. **Install dependencies** - optionally install dependencies right away. When it finishes, it prints the commands needed to start the development server. --- [SOURCE: https://frontend-tools.coherent-labs.com/create-gameface-app/getting-started/#non-interactive-usage] ## Overview: Non-interactive usage Every prompt can be answered up front with an argument, so you can skip the wizard entirely. The project name is a positional argument - everything else is a flag. **npm:** ``` npm create gameface-app my-app -- --template react --default ``` **pnpm:** ``` pnpm create gameface-app my-app --template react --default ``` **yarn:** ``` yarn create gameface-app my-app --template react --default ``` **npx:** ``` npx create-gameface-app my-app --template react --default ``` Any argument you omit falls back to its interactive prompt, so you can mix and match - for example, provide the template but let the CLI ask for the name: ```bash npx create-gameface-app --template react ``` #### Options Flag | Alias | Description `--template ` | `-t` | Template to scaffold. Skips the template prompt. `--default` | `-d` | Accept the confirmation and install prompts automatically. `--help` | `-h` | Print usage information and exit. --- [SOURCE: https://frontend-tools.coherent-labs.com/create-gameface-app/getting-started/#available-templates] ## Overview: Available templates Pass any of the following to `--template`, or pick one from the interactive menu: Template | Framework `gameface-ui` | [Gameface UI](https://gameface-ui.coherent-labs.com/) (recommended) `solid` | SolidJS `react` | React `preact` | Preact `vue` | Vue `svelte` | Svelte --- [SOURCE: https://frontend-tools.coherent-labs.com/create-gameface-app/getting-started/#next-steps] ## Overview: Next steps After scaffolding, move into your project and start the dev server: ```bash cd my-app npm install # skip if dependencies were installed for you npm run dev ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/data-binding-autocomplete/downloads/] ## Downloads Here you can find the latest releases of the Gameface Language Server extension for Visual Studio Code. The extension is available as a `.visx` file, which is a VSCode extension bundle. To install it check the Installation section. data-binding-autocomplete-1.1.0.vsix --- [SOURCE: https://frontend-tools.coherent-labs.com/data-binding-autocomplete/getting-started/] ## Overview Auto complete is a feature of the code editors that suggests completions based on your current input. It is helpful, as it makes the writing faster and it reduces the errors caused by misspelled words. Some editors also provide IntelliSense - an intelligent auto-complete that suggests completions based on the current code context. It can suggest properties from objects, built-in language methods, global functions and [more](https://code.visualstudio.com/docs/editor/intellisense#_intellisense-features). Most modern code editors like [Visual Studio Code](https://code.visualstudio.com/), [Sublime Text](https://www.sublimetext.com/), WebStorm have built-in IntelliSense that supports the most popular programming languages. --- [SOURCE: https://frontend-tools.coherent-labs.com/data-binding-autocomplete/getting-started/configuring-custom-bindings/] ## Configuring the Custom Data Bindings If you are using [custom data binding attributes](https://docs.coherent-labs.com/cpp-gameface/integration/ui_scripting/htmldatabinding/#custom-data-binding-attributes) you can add your definitions in a `bindings.json` file inside a `custom-bindings` folder located at the root of the project: ```js engine.registerBindingAttribute("my-attribute-name", MyAttributeHandler); engine.registerBindingAttribute("my-other-attribute-name", MyOtherAttributeHandler); ``` And you’ll get autocomplete suggestions for your custom bindings. --- [SOURCE: https://frontend-tools.coherent-labs.com/data-binding-autocomplete/getting-started/configuring-models/] ## Configuring the Models In order to get model suggestions, we’ll need to provide the definitions of your models. The language server works with examples of the models as `json` objects. You don’t have to manually write the definitions. Run this code on your models and save the results into files that have the same name as the model: ```js const playerModel = { name: 'John Doe' }; const json = JSON.stringify(playerModel, function(key, value) { if (typeof value === 'function') return 'function'; return value; }); // json will be: // "{"name":"John Doe"}" ``` The file for the model above should be named `playerModel.json`. Put all of the `json` definitions in a folder named `gameface-models` anywhere in your workspace. You’ll need this folder only during development, you don’t need to include it in the final package of your project. --- [SOURCE: https://frontend-tools.coherent-labs.com/data-binding-autocomplete/getting-started/installation/] ## Installation You’ll need to install VSCode version `1.79.2` and above in order to be able to use the language server. The language server extension is a `.visx` file - a VSCode extension bundle. To install it, first download the extension from the downloads page and then open VSCode and click on the **Extensions** icon: After that click on the **Views and More Actions** icon and choose the install from VISX option: Locate the `.visx` file in the Gameface package and click **install**. You’ll get a notification saying that the extension was successfully installed: And the extension will appear on the extensions list: VSCode might require a reload, but it will prompt you if it does. Now, if you start typing `data-` the data binding suggestions will appear: --- [SOURCE: https://frontend-tools.coherent-labs.com/data-binding-autocomplete/getting-started/language-server-for-gameface/] ## Language Server for Gameface The default auto-complete features usually can’t provide meaningful suggestions for Gameface features. That’s because none of the editors are aware of the data binding attributes or the game models that are initialized runtime. [VS Code’s](https://code.visualstudio.com/) functionality can be greatly enhanced and extended through extensions. The [Language Server Protocol](https://microsoft.github.io/language-server-protocol/) developed by [Microsoft](https://www.microsoft.com/) can be used to create a custom language server that can handle Gameface specific features. --- [SOURCE: https://frontend-tools.coherent-labs.com/data-binding-autocomplete/getting-started/language-server-for-gameface/#how-it-works] ## Language Server for Gameface: How it Works A language server is a specific type of VSCode extension that uses the language server protocol to support code editing features like IntelliSense. A custom language server can be aware of the Gameface data binding attributes and even of the game models used by the data binding. --- [SOURCE: https://frontend-tools.coherent-labs.com/data-binding-autocomplete/getting-started/language-server-for-gameface/#supported-features] ## Language Server for Gameface: Supported Features The language server that we created can: - suggest auto-complete for data binding attributes like - data-bind-for - data-bind-if - data-bind-value - and more - suggest model properties based on your model definitions --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/] ## Overview This section of the documentation outlines the additional assertion methods available in the Gameface E2E testing framework for the `DOMElement` object. These methods streamline the process of validating element states and enhance test reliability by leveraging the `gf.retryIfFails` mechanism internally. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforattributes/#elementwaitforattributesattributes-object-promiseboolean] ## element.waitForAttributes: element.waitForAttributes(attributes: Object): Promise Waits for the element to have the specified attributes with their expected values. This method is useful when you need to ensure that an element has updated its attributes before proceeding with further actions or assertions. - **`attributes`**: An object containing attribute names and their expected values. For example, `{ 'data-test': 'value' }`. - Returns a promise that resolves to `true` if the attributes are applied as expected. - The method will retry checking the attributes of the element until they match the specified values or the timeout is reached. - If the attributes are not applied within the timeout, it will throw an error indicating that the expected attributes were not found in the element. - If an attribute presents for the element, but its value does not match the expected value, it will throw an error indicating this. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforattributes/#usage] ## element.waitForAttributes: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); // Wait for the element to have the attribute 'data-test' with value 'value' const hasDataTestAttribute = await element.waitForAttributes({ 'data-test': 'value' })); assert(hasDataTestAttribute); // Proceed with further actions or assertions }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforclasses/#elementwaitforclassesclasses-string-promiseboolean] ## element.waitForClasses: element.waitForClasses(classes: string[]): Promise Waits for the element to have the specified classes applied. This method is useful when you need to ensure that an element has updated its classes before proceeding with further actions or assertions. - **`classes`**: An array of class names to wait for in the element. For example, `['class1', 'class2']`. - Returns a promise that resolves to `true` if the classes are applied as expected. - The method will retry checking the classes of the element until they match the specified values or the timeout is reached. - If the classes are not applied within the timeout, it will throw an error indicating that the expected classes were not found in the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforclasses/#usage] ## element.waitForClasses: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); // Wait for the element to have the classes 'class1' and 'class2' const hasClasses = await element.waitForClasses(['class1', 'class2']); assert(hasClasses); // Proceed with further actions or assertions }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforpositiononscreen/#elementwaitforpositiononscreenposition--x-number-y-number--promiseboolean] ## element.waitForPositionOnScreen: element.waitForPositionOnScreen(position: { x: number, y: number }): Promise Waits for the element to be positioned at the specified coordinates on the screen. This method is useful when you need to ensure that an element has moved to a specific position before proceeding with further actions or assertions. - **`position`**: An object containing the `x` and `y` coordinates where the element should be positioned on the screen. For example, `{ x: 100, y: 200 }`. - Returns a promise that resolves to `true` if the element is positioned at the specified coordinates. - The method will retry checking the position of the element until it matches the specified coordinates or the timeout is reached. - If the element is not positioned at the specified coordinates within the timeout, it will throw an error indicating that the expected position was not found in the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforpositiononscreen/#usage] ## element.waitForPositionOnScreen: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); // Wait for the element to be positioned at (100, 200) const isElementToRightPosition = await element.waitForPositionOnScreen({ x: 100, y: 200 }); assert(isElementToRightPosition); // Proceed with further actions or assertions }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforsize/#elementwaitforsizesize--width-number-height-number--promiseboolean] ## element.waitForSize: element.waitForSize(size: { width: number, height: number }): Promise Waits for the element to have the specified size. This method is useful when you need to ensure that an element has the expected dimensions before proceeding with further actions or assertions. - **`size`**: An object containing the `width` and `height` of the element. For example, `{ width: 100, height: 200 }`. - Returns a promise that resolves to `true` if the element has the expected size. - The method will retry checking the size of the element until it matches the specified dimensions or the timeout is reached. - If the element does not have the expected size within the timeout, it will throw an error indicating that the expected size was not found in the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforsize/#usage] ## element.waitForSize: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); // Wait for the element to have the size { width: 100, height: 200 } const isElementWithRightSize = await element.waitForSize({ width: 100, height: 200 }); assert(isElementWithRightSize); // Proceed with further actions or assertions }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforstyles/#elementwaitforstylesstyles-object-promiseboolean] ## element.waitForStyles: element.waitForStyles(styles: Object): Promise Waits for the element to have the specified styles applied. This method is useful when you need to ensure that an element has updated its styles before proceeding with further actions or assertions. - **`styles`**: An object containing CSS properties and their expected values. For example, `{ display: 'block' }`. - Returns a promise that resolves to `true` if the styles are applied as expected. - The method will retry checking the styles of the element until they match the specified values or the timeout is reached. - If the styles are not applied within the timeout, it will throw an error indicating that the expected styles were not found in the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforstyles/#usage] ## element.waitForStyles: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); // Wait for the element to have the style 'display: block' const hasStyle = await element.waitForStyles({ display: 'block' }); assert(hasStyle); // Proceed with further actions or assertions }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitfortext/#elementwaitfortexttext-string-promiseboolean] ## element.waitForText: element.waitForText(text: string): Promise Waits for the element to contain the specified text. This method is useful when you need to ensure that an element has updated its text content before proceeding with further actions or assertions. - **`text`**: The text to wait for in the element. - Returns a promise that resolves to `true` if the text is found. - The method will retry checking the text content of the element until it matches the specified text or the timeout is reached. - If the text is not found within the timeout, it will throw an error indicating that the expected text was not found in the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitfortext/#usage] ## element.waitForText: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); // Wait for the element to contain the text 'Hello World' const hasText = await element.waitForText('Hello World'); assert(hasText); // Proceed with further actions or assertions }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforvalue/#elementwaitforvaluevalue-string-promiseboolean] ## element.waitForValue: element.waitForValue(value: string): Promise Waits for input or textarea elements to have the specified value. This method is useful when you need to ensure that an input or textarea has updated its value before proceeding with further actions or assertions. - **`value`**: The value to wait for in the input or textarea element. - Returns a promise that resolves to `true` if the value is found. - The method will retry checking the value of the element until it matches the specified value or the timeout is reached. - If the value is not found within the timeout, it will throw an error indicating that the expected value was not found in the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforvalue/#usage] ## element.waitForValue: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('input[name="username"]'); // Click the button to change the input value await gf.click('.button'); // Wait for the input to have the value 'testuser' const hasValue = await element.waitForValue('testuser'); assert(hasValue); // Proceed with further actions or assertions }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforvisibility/#elementwaitforvisibilityvisibility-boolean-promiseboolean] ## element.waitForVisibility: element.waitForVisibility(visibility: boolean): Promise Waits for the element to be visible or hidden based on the specified visibility state. This method is useful when you need to ensure that an element is in the expected visibility state before proceeding with further actions or assertions. - **`visibility`**: A boolean indicating whether to wait for the element to be visible (`true`) or hidden (`false`). - Returns a promise that resolves to `true` if the element is in the expected visibility state. - The method will retry checking the visibility of the element until it matches the specified state or the timeout is reached. - If the element is not in the expected visibility state within the timeout, it will throw an error indicating that the expected visibility state was not found in the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforvisibility/#usage] ## element.waitForVisibility: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); // Click the button to show the element await gf.click('.button'); // Wait for the element to be visible await element.waitForVisibility(true); const textContent = await element.text(); assert.equal(textContent, 'Expected Text'); // Proceed with further actions or assertions }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforvisibilityinscrollablearea/#elementwaitforvisibilityinscrollableareascrollablearea-domelement-visibility-boolean-promiseboolean] ## element.waitForVisibilityInScrollableArea: element.waitForVisibilityInScrollableArea(scrollableArea: DOMElement, visibility: boolean): Promise Waits for the element to be visible or hidden within a specified scrollable area based on the given visibility state. This method is useful when you need to ensure that an element is in the expected visibility state within a specific scrollable context before proceeding with further actions or assertions. - **`scrollableArea`**: The scrollable area within which to check the visibility of the element. This should be a `DOMElement` that represents a scrollable container. - **`visibility`**: A boolean indicating whether to wait for the element to be visible (`true`) or hidden (`false`). - Returns a promise that resolves to `true` if the element is in the expected visibility state within the scrollable area. - The method will retry checking the visibility of the element within the scrollable area until it matches the specified state or the timeout is reached. - If the element is not in the expected visibility state within the scrollable area within the timeout, it will throw an error indicating that the expected visibility state was not found in the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/assertmethods/waitforvisibilityinscrollablearea/#usage] ## element.waitForVisibilityInScrollableArea: Usage ```js describe('Test script', function () { it('Test 1', async () => { const scrollableArea = await gf.get('.scrollable-area'); const element = await gf.get('.my-element'); // Scroll the scrollable area to a specific position scrollableArea.scrollTo(0, 100); // Wait for the element to be visible within the scrollable area await element.waitForVisibilityInScrollableArea(scrollableArea, true); const textContent = await element.text(); assert.equal(textContent, 'Expected Text'); // Proceed with further actions or assertions }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/children/#elementchildren-promisedomelements] ## element.children: element.children(): Promise Retrieves the children of the element. - Returns a promise that resolves to an array of `DOMElement` instances representing the children of the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/children/#usage] ## element.children: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const children = await element.children(); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/classes/#elementclasses-promisestring] ## element.classes: element.classes(): Promise Retrieves the classes of the element. - Returns a promise that resolves to an array of strings representing the classes of the element. **Note:** The classes are returned as an array of strings. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/classes/#usage] ## element.classes: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const classes = await element.classes(); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/contains/#elementcontainstext-string-promisedomelement] ## element.contains: element.contains(text: string): Promise Retrieves a DOM element containing the specified text starting from the current element. - **`text`**: The text to search for in the DOM element. - Returns a promise that resolves to `DOMElement` that contains the text. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/contains/#usage] ## element.contains: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const childElement = await element.contains('Hello, World!'); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/find/#elementfindselector-string-promisedomelement] ## element.find: element.find(selector: string): Promise Finds a DOM element using the specified selector starting from the current element. - **`selector`**: The CSS selector to query the DOM element. - Returns a promise that resolves to the `DOMElement` instance. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/find/#usage] ## element.find: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const childElement = await element.find('.child-element'); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/findall/#elementfindallselector-string-promisedomelements] ## element.findAll: element.findAll(selector: string): Promise Finds all elements matching the specified selector starting from the current element. - **`selector`**: The CSS selector to match elements against. - Returns a promise that resolves to an array of `DOMElement` instances. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/findall/#usage] ## element.findAll: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const childElements = await element.findAll('.child-elements'); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getattribute/#elementgetattributes-promiseobject] ## element.getAttribute: element.getAttributes(): Promise Retrieves the value of the specified attribute of the element. - **`name`**: The name of the attribute to retrieve. - Returns a promise that resolves to the value of the attribute or `null` if the attribute does not exist. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getattribute/#usage] ## element.getAttribute: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const attribute = await element.getAttribute('data-id'); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getattributes/#elementgetattributes-promiseobject] ## element.getAttributes: element.getAttributes(): Promise Retrieves the attributes of the element. - Returns a promise that resolves to an object containing the attributes of the element. - The object has the following structure: `{ attribute: value }`. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getattributes/#usage] ## element.getAttributes: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const attributes = await element.getAttributes(); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getinnerhtml/#elementgetinnerhtml-promisestring] ## element.getInnerHTML: element.getInnerHTML(): Promise Retrieves the inner HTML of the element. - Returns a promise that resolves to the inner HTML of the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getinnerhtml/#usage] ## element.getInnerHTML: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const innerHTML = await element.getInnerHTML(); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getouterhtml/#elementgetouterhtml-promisestring] ## element.getOuterHTML: element.getOuterHTML(): Promise Retrieves the outer HTML of the element. - Returns a promise that resolves to the outer HTML of the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getouterhtml/#usage] ## element.getOuterHTML: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const outerHTML = await element.getOuterHTML(); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getparent/#elementgetparent-promisedomelement] ## element.getParent: element.getParent(): Promise Retrieves the parent element of the current DOM element. - Returns a promise that resolves to a `DOMElement` instances representing the parent of the element. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getparent/#usage] ## element.getParent: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const parent = await element.getParent(); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getpositiononscreen/#elementgetpositiononscreen-promise-x-number-y-number---null] ## element.getPositionOnScreen: element.getPositionOnScreen(): Promise<{ x: number, y: number } | null> Retrieves the position of the element on the screen. - Returns a promise that resolves to an object containing the `x` and `y` coordinates of the element on the screen. - If the element is not visible, the method returns `null`. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getpositiononscreen/#usage] ## element.getPositionOnScreen: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const position = await element.getPositionOnScreen(); }); }); ``` **Note:** Getting the position of a text element is not supported. **Caution:** If you need to verify changes in an element’s position after an interaction (e.g., a click), ensure you wait for additional time before checking the position. For simplicity you can use the `gf.retryIfFails` method to retry the operation until it succeeds or times out. For example: ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); await element.click(); // Trigger a position change await gf.retryIfFails(async () => { const position = await element.getPositionOnScreen(); assert(position.x === 200, 'Element position X should be 200'); }); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getsize/#elementgetsize-promise-width-number-height-number---null] ## element.getSize: element.getSize(): Promise<{ width: number, height: number } | null> Retrieves the size of the element. - Returns a promise that resolves to an object containing the `width` and `height` of the element. - If the element is not visible, the method returns `null`. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getsize/#usage] ## element.getSize: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const size = await element.getSize(); }); }); ``` **Note:** Getting the size of a text element is not supported. **Caution:** If you need to verify changes in an element’s size after an interaction (e.g., a click), ensure you wait for additional time before checking the size. For simplicity you can use the `gf.retryIfFails` method to retry the operation until it succeeds or times out. For example: ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); await element.click(); // Trigger a size change await gf.retryIfFails(async () => { const size = await element.getSize(); assert(size.width > 100, 'Element width should be greater than 100'); }); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/getvalue/#elementgetvalue-promisevoid] ## element.getValue: element.getValue(): Promise Retrieves the value of the element if it is an input or textarea. - Returns a promise that resolves when the action is complete with the element value. ```js describe('Test script', function () { it('Test 1', async () => { const input = await gf.get('input'); assert.equal(await input.getValue(), 'text'); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/hasattribute/#elementhasattributename-string-promiseboolean] ## element.hasAttribute: element.hasAttribute(name: string): Promise Checks if the element has the specified attribute. - **`name`**: The name of the attribute to check for. - Returns a promise that resolves to `true` if the element has the attribute, `false` otherwise. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/hasattribute/#usage] ## element.hasAttribute: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); const hasAttribute = await element.hasAttribute('data-id'); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/clear/#elementclear-promisevoid] ## element.clear: element.clear(): Promise Clears the value of the element if it is an input or textarea. - Returns a promise that resolves when the action is complete. ```js describe('Test script', function () { it('Test 1', async () => { const input = await gf.get('input'); await input.clear(); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/click/#elementclickoptions-object-promisevoid] ## element.click: element.click(options?: Object): Promise Simulates a click on the element. - **`options.altKey`**: Indicates if the Alt key is pressed. - **`options.ctrlKey`**: Indicates if the Ctrl key is pressed. - **`options.metaKey`**: Indicates if the Meta key is pressed. - **`options.shiftKey`**: Indicates if the Shift key is pressed. - Returns a promise that resolves when the click is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/click/#usage] ## element.click: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-button'); await element.click(); }); }); ``` **Note:** Clicking on text elements is not supported. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/doubleclick/#elementdoubleclickoptions-object-promisevoid] ## element.doubleClick: element.doubleClick(options?: Object): Promise Simulates a double click event on the element with the ‘left’ mouse button. - **`options.altKey`**: Indicates if the Alt key is pressed. - **`options.ctrlKey`**: Indicates if the Ctrl key is pressed. - **`options.metaKey`**: Indicates if the Meta key is pressed. - **`options.shiftKey`**: Indicates if the Shift key is pressed. - Returns a promise that resolves when the event is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/doubleclick/#usage] ## element.doubleClick: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-button'); await element.doubleClick(); }); }); ``` **Note:** Double clicking on text elements is not supported. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/drag/#elementdragx-number-y-number-promisevoid] ## element.drag: element.drag(x: number, y: number): Promise Moves the element to the specified coordinates by simulating a drag action. - **`x`**: The target x-coordinate to drag the element to. - **`y`**: The target y-coordinate to drag the element to. - Returns a promise that resolves once the drag action is completed. **Note:** Dragging is supported only for elements with drag functionality implemented via `mousedown`, `mousemove`, and `mouseup` events. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/drag/#usage] ## element.drag: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-button'); await element.drag(100, 100); }); }); ``` **Note:** Dragging text elements is not supported. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/dragby/#elementdragbydeltax-number-deltay-number-promisevoid] ## element.dragBy: element.dragBy(deltaX?: number, deltaY?: number): Promise Drags the element by the specified offsets relative to the element’s center. Performs a pointer drag from the center of the current element to a new position calculated by adding the specified offsets to the element’s center coordinates. This is useful for dragging elements by a relative distance rather than to an absolute position or target element. - **`deltaX`**: (Optional) Horizontal offset in pixels to move from the element’s center. Defaults to 0. - **`deltaY`**: (Optional) Vertical offset in pixels to move from the element’s center. Defaults to 0. - Returns a promise that resolves once the drag sequence (press → move → release) completes. **Note:** - Dragging is supported only for elements with drag functionality implemented via `mousedown`, `mousemove`, and `mouseup` events. - Text elements are not supported for dragging. - If the current element is not visible, it will be automatically scrolled into view before the drag. - Both `deltaX` and `deltaY` are relative to the element’s center position and can be positive or negative values. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/dragby/#usage] ## element.dragBy: Usage #### Drag right by 100 pixels ```js describe('Test script', function () { it('Drag element to the right', async () => { const element = await gf.get('.draggable-item'); await element.dragBy(100, 0); }); }); ``` #### Drag down and to the right ```js describe('Test script', function () { it('Drag element diagonally', async () => { const element = await gf.get('.draggable-item'); await element.dragBy(50, 75); }); }); ``` #### Drag with negative offsets (up and left) ```js describe('Test script', function () { it('Drag element up and to the left', async () => { const element = await gf.get('.draggable-item'); await element.dragBy(-100, -50); }); }); ``` **Note:** Text elements are not supported for dragging. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/dragto/#elementdragtotarget-domelement--string-targetoffsetx-number-targetoffsety-number-promisevoid] ## element.dragTo: element.dragTo(target: DOMElement | string, targetOffsetX?: number, targetOffsetY?: number): Promise (1/2) Drags the current element to a target element or selector on screen. Performs a pointer drag from the center of the current element to a destination point computed relative to the target element. The destination offsets default to the center of the target when omitted or NaN, and are clamped so the dragged item remains within the visible bounds of the target. - **`target`**: The target DOM element or a CSS selector string to locate the target element. - **`targetOffsetX`**: (Optional) Horizontal offset in pixels inside the target element to drop onto. If undefined or NaN, defaults to target width / 2 (center). - **`targetOffsetY`**: (Optional) Vertical offset in pixels inside the target element to drop onto. If undefined or NaN, defaults to target height / 2 (center). - Returns a promise that resolves once the drag sequence (press → move → release) completes. **Note:** - Dragging is supported only for elements with drag functionality implemented via `mousedown`, `mousemove`, and `mouseup` events. - If the current element is not visible, it will be automatically scrolled into view before the drag. - The computed destination is adjusted so that the dragged item does not extend outside the target’s area. **Caution:** Currently the framework is not capable of dragging element to a target that is not in the visible viewport, you may need to drag the element a bit, scroll the viewport to make the target visible, and then complete the drag operation. Here is an example of how to achieve this: --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/dragto/#elementdragtotarget-domelement--string-targetoffsetx-number-targetoffsety-number-promisevoid] ## element.dragTo: element.dragTo(target: DOMElement | string, targetOffsetX?: number, targetOffsetY?: number): Promise (2/2) ```js describe('Test script', function () { it('Should drag and drop an element into another element', async () => { const el = (await gf.get(`#draggable`)); const dropZoneEl = (await gf.get(`.drop-zone`)); await el.drag(500, 700); await gf.scrollTo(0, 900); await el.dragTo(dropZoneEl); assert(await el.waitForPositionOnScreen({ x: 50, y: 570 })); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/dragto/#usage] ## element.dragTo: Usage #### Drag by selector to the center of the target ```js describe('Test script', function () { it('Drag to target by selector', async () => { const element = await gf.get('.draggable-item'); await element.dragTo('#drop-zone'); }); }); ``` #### Drag by element instance to a specific point inside the target ```js describe('Test script', function () { it('Drag to target with offset', async () => { const element = await gf.get('.draggable-item'); const targetElement = await gf.get('#drop-zone'); await element.dragTo(targetElement, 10, 20); }); }); ``` **Note:** Text elements are not supported for dragging. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/focus/#elementfocus-promiseboolean] ## element.focus: element.focus(): Promise Focuses the DOM element. - Returns a promise that resolves when the element is focused. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/focus/#usage] ## element.focus: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); await element.focus(); assert.equal(await element.isFocused(), true); }); }); ``` **Note:** Focusing text elements is not supported. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/hover/#elementhover-promisevoid] ## element.hover: element.hover(): Promise Simulates hovering over the element. - Returns a promise that resolves when the action is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/hover/#usage] ## element.hover: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-button'); await element.hover(); }); }); ``` **Note:** Hovering on text elements is not supported. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/keydown/#elementkeydownkey-stringnumber-options-object-count-number-promisevoid] ## element.keyDown: element.keyDown(key: string|number, options?: Object, count?: number): Promise Simulates a key down event for the specified key on the element. - **`key`**: Either a key code as number or string. - You can use the `gf.KEYS` object to specify the `key` argument. - **`options.altKey`**: Indicates if the Alt key is pressed. - **`options.ctrlKey`**: Indicates if the Ctrl key is pressed. - **`options.metaKey`**: Indicates if the Meta key is pressed. - **`options.shiftKey`**: Indicates if the Shift key is pressed. - **`count`**: **`(Default = 0)`** The number of times to repeat the key down event. - Returns a promise that resolves when the key down is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/keydown/#usage] ## element.keyDown: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); await element.keyDown('a'); // Will key down - 'a' await element.keyDown('a', void 0, 2); // Will key down - 'a' two times await element.keyDown('a', { altKey: true }, 2); // Will key down - 'a' with alt pressed key two times await element.keyDown(gf.KEYS.TAB, void 0, 2); // Will key down the Tab key two times }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/keypress/#elementkeypresskey-stringnumber-options-object-count-number-promisevoid] ## element.keyPress: element.keyPress(key: string|number, options?: Object, count?: number): Promise Simulates a key press event for the specified key on the element. - **`key`**: Either a key code as number or string. - You can use the `gf.KEYS` object to specify the `key` argument. - **`options.altKey`**: Indicates if the Alt key is pressed. - **`options.ctrlKey`**: Indicates if the Ctrl key is pressed. - **`options.metaKey`**: Indicates if the Meta key is pressed. - **`options.shiftKey`**: Indicates if the Shift key is pressed. - **`count`**: \*\*`(Default = 0)**` The number of times to repeat the key down event. - Returns a promise that resolves when the key press is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/keypress/#usage] ## element.keyPress: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); await element.keyPress('a'); // Will key press - 'a' await element.keyPress('a', void 0, 2); // Will key press - 'a' two times await element.keyPress('a', { altKey: true }, 2); // Will key press - 'a' with alt pressed key two times await element.keyPress(gf.KEYS.TAB, void 0, 2); // Will key press the Tab key two times }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/keyup/#elementkeyupkey-stringnumber-options-object-count-number-promisevoid] ## element.keyUp: element.keyUp(key: string|number, options?: Object, count?: number): Promise Simulates a key up event for the specified key on the element. - **`key`**: Either a key code as number or string. - You can use the `gf.KEYS` object to specify the `key` argument. - **`options.altKey`**: Indicates if the Alt key is pressed. - **`options.ctrlKey`**: Indicates if the Ctrl key is pressed. - **`options.metaKey`**: Indicates if the Meta key is pressed. - **`options.shiftKey`**: Indicates if the Shift key is pressed. - **`count`**: **`(Default = 0)`** The number of times to repeat the key down event. - Returns a promise that resolves when the key up is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/keyup/#usage] ## element.keyUp: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); await element.keyUp('a'); // Will key up - 'a' await element.keyUp('a', void 0, 2); // Will key up - 'a' two times await element.keyUp('a', { altKey: true }, 2); // Will key up - 'a' with alt pressed key two times await element.keyUp(gf.KEYS.TAB, void 0, 2); // Will key up the Tab key two times }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/mousepress/#elementmousepressbutton-leftrightmiddle-options-object-promisevoid] ## element.mousePress: element.mousePress(button: 'left'|'right'|'middle', options?: Object): Promise Simulates a `mousedown` event on the element. - **`button`**: **`(Default = 'left')`** Specifies the mouse button that will be used for the event. - **`options.altKey`**: Indicates if the Alt key is pressed. - **`options.ctrlKey`**: Indicates if the Ctrl key is pressed. - **`options.metaKey`**: Indicates if the Meta key is pressed. - **`options.shiftKey`**: Indicates if the Shift key is pressed. - Returns a promise that resolves when the mouse event is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/mousepress/#usage] ## element.mousePress: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-button'); await element.mousePress(); }); }); ``` **Note:** Mouse pressing on text elements is not supported. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/mouserelease/#elementmousereleasebutton-leftrightmiddle-options-object-promisevoid] ## element.mouseRelease: element.mouseRelease(button: 'left'|'right'|'middle', options?: Object): Promise Simulates a `mouseup` event on the element. - **`button`**: **`(Default = 'left')`** Specifies the mouse button that will be used for the event. - **`options.altKey`**: Indicates if the Alt key is pressed. - **`options.ctrlKey`**: Indicates if the Ctrl key is pressed. - **`options.metaKey`**: Indicates if the Meta key is pressed. - **`options.shiftKey`**: Indicates if the Shift key is pressed. - Returns a promise that resolves when the mouse event is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/mouserelease/#usage] ## element.mouseRelease: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-button'); await element.mouseRelease(); }); }); ``` **Note:** Mouse releasing on text elements is not supported. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/mousewheel/#elementmousewheeldeltax-number-deltay-number-promisevoid] ## element.mouseWheel: element.mouseWheel(deltaX: number, deltaY: number): Promise Simulates a `mousewheel` event on the element. - **`deltaX`**: The horizontal scroll amount. Positive values scroll right, negative values scroll left. - **`deltaY`**: The vertical scroll amount. Positive values scroll down, negative values scroll up. - Returns a promise that resolves when the mouse event is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/mousewheel/#usage] ## element.mouseWheel: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-button'); await element.mouseWheel(); }); }); ``` **Note:** Wheeling on text elements is not supported. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/rightclick/#elementrightclickoptions-object-promisevoid] ## element.rightClick: element.rightClick(options?: Object): Promise Simulates a right click event on the element. - **`options.altKey`**: Indicates if the Alt key is pressed. - **`options.ctrlKey`**: Indicates if the Ctrl key is pressed. - **`options.metaKey`**: Indicates if the Meta key is pressed. - **`options.shiftKey`**: Indicates if the Shift key is pressed. - Returns a promise that resolves when the event is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/rightclick/#usage] ## element.rightClick: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-button'); await element.rightClick(); }); }); ``` **Note:** Right clicking on text elements is not supported. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/scroll/#elementscrolldeltax-number-deltay-number-promisevoid] ## element.scroll: element.scroll(deltaX: number, deltaY: number): Promise Scrolls the element by the specified delta values. - **`deltaX`**: **`(Default = 0)`** The horizontal scroll amount. Positive values scroll right, negative values scroll left. - **`deltaY`**: **`(Default = 0)`** The vertical scroll amount. Positive values scroll down, negative values scroll up. - Returns a promise that resolves when the action is complete. - Will not perform the action on elements that are not scrollable - element is hidden or overflow is set to `visible` or `hidden`. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/scroll/#usage] ## element.scroll: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.scroll-container'); await element.scroll(0, 100); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/scrollintoview/#elementscrollintoviewscrollablearea-domelement-promisevoid] ## element.scrollIntoView: element.scrollIntoView(scrollableArea?: DOMElement): Promise Scrolls the current DOM element into view within a scrollable area. If the scrollable area is not provided, the method attempts to locate the first scrollable parent element in the DOM hierarchy. - **`scrollableArea`**: **`(Default = null)`** The scrollable area in which the element should be scrolled into view. - Returns a promise that resolves when the action is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/scrollintoview/#usage] ## element.scrollIntoView: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-button'); await element.scrollIntoView(); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/scrollto/#elementscrolltox-number-y-number-promisevoid] ## element.scrollTo: element.scrollTo(x: number, y: number): Promise Scrolls the DOM element to the specified coordinates. - **`x`**: The X coordinate where the element will be scrolled to. - **`y`**: The Y coordinate where the element will be scrolled to. - Returns a promise that resolves when the action is complete. - Will not perform the action on elements that are not scrollable - element is hidden or overflow is set to `visible` or `hidden`. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/scrollto/#usage] ## element.scrollTo: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.scroll-container'); await element.scrollTo(0, 100); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/trigger/#elementtriggereventname-string-data-object-promisevoid] ## element.trigger: element.trigger(eventName: string, data?: Object): Promise Triggers a custom event on the element. - **`eventName`**: The name of the custom event. - **`data`**: Optional data to include in the event’s `detail` property. - Returns a promise that resolves when the action is complete. ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); await element.trigger('test-event', { value: 1 }); }); }); ``` **Note:** Triggering custom event on text elements is not supported. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/type/#elementtypekeys-stringstring-options-object-promisevoid] ## element.type: element.type(keys: string|string[], options?: Object): Promise Simulates typing on the element by dispatching key events. This method is compatible with input elements or any elements that have key event listeners such as `keydown`, `keyup`, or `keypress`. - **`keys`**: The keys to type. Can be a string or an array of characters. - **`options.altKey`**: Indicates if the Alt key is pressed. - **`options.ctrlKey`**: Indicates if the Ctrl key is pressed. - **`options.metaKey`**: Indicates if the Meta key is pressed. - **`options.shiftKey`**: Indicates if the Shift key is pressed. - Returns a promise that resolves when the action is complete. --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/interactions/type/#usage] ## element.type: Usage ```js describe('Test script', function () { it('Test 1', async () => { const element = await gf.get('.my-element'); await element.type('text'); const input = await gf.get('input'); await input.type('text'); }); }); ``` --- [SOURCE: https://frontend-tools.coherent-labs.com/e2e/api/domelement/isfocusable/#elementisfocusable-promiseboolean] ## element.isFocusable: element.isFocusable(): Promise Checks if the element is focusable. - Returns a promise that resolves to `true` if the element is focusable, `false` otherwise. - An element is considered focusable if: - It has a `tabindex` attribute. - Is not disabled - has not `disabled` attribute. - It is an input element (e.g., ``, `