Get started

Guides

Actions

Introduction

CSTesting can interact with HTML elements such as text inputs, checkboxes, radio buttons, select options, mouse clicks (click, double-click, right-click), typing text, hover, and drag-and-drop. Use locators (e.g. browser.locator("selector")) to target elements; all actions accept either a selector string or a Locator. When multiple elements match, use .first(), .last(), or .nth(index) before performing an action.

Text input

type(selector, text) or locator.type(text) is the main way to fill form fields. It focuses the element, clears any existing value, and types the given text. It works for <input>, <textarea>, and similar elements.

// By selector
browser.type("id=username", "Peter");
browser.type("name=email", "user@example.com");

// By locator (chain with first() if multiple match)
browser.locator("id=username").type("Peter");
browser.locator("[name='Birth date']").type("2020-02-02");
browser.locator("textarea").first().type("Hello");

Checkboxes and radio buttons

Use check(selector) / check(Locator) to check a checkbox or select a radio button, and uncheck(selector) / uncheck(Locator) to uncheck. Works with input[type=checkbox] and input[type=radio]. No-op if the element is already in the desired state.

// Check the checkbox
browser.locator("id=agree").check();
browser.check("name=subscribe");

// Assert the checked state
browser.assertThat(browser.locator("name=subscribe")).isVisible();  // or use isSelected via getValue/evaluate if needed

// Select a radio button
browser.locator("id=size-xl").check();
browser.check("name=size");  // if only one with name=size; otherwise use locator("name=size").nth(1).check()

Select options

Use select(selector, option) for a single-select dropdown and selectOptions(selector, options...) for one or more options (single or multi-select). Option can be a value, visible label, or 0-based index (Integer). Use deselectOptions to clear options in a multi-select.

// Single selection by value or label
browser.locator("#color").select("blue");
browser.locator("#color").select("Blue");   // label

// Single selection by index
browser.locator("#color").select(2);

// Multi-select
browser.locator("#colors").selectOptions("red", "green", "blue");
browser.locator("#colors").selectOptions(0, 2, 4);

// Deselect
browser.locator("#colors").deselectOptions("blue");

// Read selected
List<String> values = browser.getSelectedValues(browser.locator("#colors"));
List<String> labels = browser.getSelectedLabels(browser.locator("#colors"));

Mouse click

click(selector) / click(Locator) performs a left click. doubleClick and rightClick are also available. hover(selector) / hover(Locator) moves the mouse to the element. Actions use the center of the element.

// Generic click
browser.locator("button").click();
browser.click("id=submit");

// Double click
browser.locator("text=Item").doubleClick();
browser.doubleClick("#item");

// Right click (context menu)
browser.locator("text=Item").rightClick();
browser.rightClick("#row");

// Hover
browser.locator("#menu").hover();

Under the hood, actions (when using the CDP implementation) scroll the element into view and wait for it to be visible before performing the click or other action.

Type characters

Use type(selector, text) or locator.type(text) to enter text. This replaces the current value (like a "fill"). For character-by-character input or special key events, use evaluate() to run JavaScript (e.g. dispatch KeyboardEvent) if your app relies on key-level handling.

browser.locator("#area").type("Hello World!");

Drag and drop

Use dragAndDrop(fromSelector, toSelector) or fromLocator.dragAndDrop(toLocator) to drag one element to another. The action moves the mouse to the source, presses the button, moves to the target, and releases.

browser.dragAndDrop("#source", "#target");
browser.locator(".card").first().dragAndDrop(browser.locator(".drop-zone"));

Scrolling

CSTesting scrolls the target element into view before actions like click when needed. For explicit scrolling, use:

  • scrollToPageTop() / scrollToPageBottom() – scroll to top or bottom of the page.
  • scrollUp() / scrollDown() – scroll by one viewport height.
  • scrollBy(dx, dy) – scroll by a pixel offset (e.g. scrollBy(0, 300) to scroll down 300px).
  • scrollToSelector(selector) / locator.scrollToSelector() – scroll until the element is in view (centered).
// Scroll so the button is visible, then click
browser.scrollToSelector("#submit");
browser.locator("#submit").click();

// Scroll the page
browser.scrollToPageBottom();
browser.scrollBy(0, 300);
browser.locator("#footer").scrollToSelector();   // scroll element into view
Previous « Test runners Next Waits »