Actions
Introduction
CSTesting can interact with the page through the browser API: text inputs, checkboxes, radio buttons, select dropdowns, mouse clicks (left, double, right), hover, type text, press keys, and drag and drop. Actions are available both as direct calls (browser.click(selector), browser.type(selector, text)) and on locators (browser.locator(selector).click(), locator.type(text)).
Before performing an action, CSTesting finds the element (by CSS or XPath selector) and scrolls it into view. There is no separate "fill" method — use type to enter text into inputs. File upload and modifier-key clicks (e.g. Shift+click) are not supported in the current API; see the "What is not supported" section for workarounds.
You will learn
- Text input (type)
- Checkboxes and radio buttons (check / uncheck)
- Select options (select)
- Mouse click (click, doubleClick, rightClick, hover)
- Keys and shortcuts (pressKey)
- Drag and drop
- Scrolling and focus
- What is not supported
Text input
Use type to enter text into <input>, <textarea>, or other focusable elements. CSTesting focuses the element and sends the text. For most form fields, this is the main way to set a value.
Direct call:
await browser.type('#username', 'Peter');
await browser.type('[name="email"]', 'user@example.com');
await browser.type('textarea#bio', 'Hello world');Using a locator:
await browser.locator('#username').type('Peter');
await browser.getByAttribute('name', 'email').type('user@example.com');- Selector — CSS or XPath (e.g.
#id,[name="x"],textarea). Uselocator(selector).first()or.nth(n)if multiple elements match. - Text — The full string to enter. There is no character-by-character "pressSequentially" with delay; type sends the text in one go.
For date, time, or datetime-local inputs, use the same type method with the value formatted as the input expects (e.g. 2020-02-02 for date, 13:15 for time).
await browser.type('[type="date"]', '2020-02-02');
await browser.type('[type="time"]', '13:15');Checkboxes and radio buttons
Use check to check a checkbox or select a radio button. Use uncheck to uncheck a checkbox. Works with input[type=checkbox] and input[type=radio].
Check:
await browser.check('#agree');
await browser.locator('[name="subscribe"]').check();Uncheck:
await browser.uncheck('#agree');Assert the checked state — Use isSelected() and expect():
const checked = await browser.locator('#subscribe').isSelected();
expect(checked).toBe(true);Radio buttons — Check the option you want; to "deselect" a radio group you would check another option in the same group. There is no separate "uncheck" for radio.
await browser.locator('[value="XL"]').check();Select options
Use select to choose one or more options in a <select> element. You can match by value, label (visible text), or index (0-based).
Single selection by value or label:
await browser.select('#color', 'blue');
await browser.select('#color', { value: 'blue' });
await browser.select('#color', { label: 'Blue' });
await browser.select('#color', { index: 2 });Multiple selection — Pass an array of options; it replaces the current selection:
await browser.select('#colors', ['red', 'green', 'blue']);
await browser.select('#colors', [{ label: 'Red' }, { value: 'green' }]);Using a locator:
await browser.locator('#color').select({ label: 'Blue' });Mouse click
CSTesting performs a real mouse click at the element's center (after scrolling it into view). You can do a single click, double click, or right click.
Single click (left button):
await browser.click('button[type="submit"]');
await browser.locator('button').click();Double click:
await browser.doubleClick('.item');
await browser.locator('.item').doubleClick();Right click:
await browser.rightClick('.item');
await browser.locator('.item').rightClick();Hover — Move the mouse over the element without clicking:
await browser.hover('.menu-item');
await browser.locator('.menu-item').hover();Multiple elements — If the selector matches more than one element, use .first(), .last(), or .nth(index) on the locator, or pass the index in the low-level API (see the main browser docs). By default, strict mode requires exactly one match for direct browser.click(selector).
Modifier keys (Shift, Ctrl, etc.) — Not supported in the current API. You cannot pass { modifiers: ['Shift'] } to click. Use pressKey for keyboard shortcuts after focusing an element (e.g. focus then pressKey('Control+a') if supported).
Type characters and keys
Type full text — Use type (see Text input). This is the usual way to fill inputs.
Single key or shortcut — Use pressKey. The key is sent to the focused element or the page. Useful for Enter, Tab, shortcuts, etc.
await browser.pressKey('Enter');
await browser.pressKey('Tab');
await browser.locator('#input').pressKey('Control+a');Examples:
// Submit form (focus the submit button or an input first, or use pressKey on the page)
await browser.pressKey('Enter');
// Type a symbol
await browser.locator('#search').type('query');
await browser.locator('#search').pressKey('Enter');CSTesting does not expose a "pressSequentially" with delay between keys. Use type for full text and pressKey for single keys or combinations (e.g. Control+c). Supported key names depend on the underlying CDP; typically you can use single characters and names like Enter, Tab, Backspace, ArrowDown, etc.
Drag and drop
Use dragAndDrop to drag one element to another. CSTesting moves the mouse to the source, presses the left button, moves to the target, and releases.
Direct call:
await browser.dragAndDrop('#item-to-drag', '#drop-zone');Using a locator:
await browser.locator('#item-to-drag').dragTo('#drop-zone');There is no lower-level API (e.g. mouse.down, mouse.move, mouse.up) exposed. For custom drag behavior, use evaluate to run JavaScript in the page.
Focus and scrolling
Focus — There is no dedicated focus(selector) method. type and click focus the element as part of the action. To focus without typing, you can click the element or use evaluate:
await browser.evaluate(`document.querySelector('#password').focus()`);Scrolling — CSTesting scrolls the target element into view before clicking, typing, or other actions (using scrollIntoView). You usually do not need to scroll manually.
If you need to scroll programmatically (e.g. to load more content in an infinite list), use evaluate:
await browser.evaluate(`document.querySelector('.list').scrollTop += 200`);
// Or scroll a specific element into view
await browser.evaluate(`document.querySelector('#footer').scrollIntoView()`);There is no mouse.wheel or scrollIntoViewIfNeeded API; use evaluate for custom scroll behavior.
Upload files
File upload is not supported in the current CSTesting browser API. There is no setInputFiles or equivalent.
Workaround — If you have an <input type="file">, you can set its value or trigger upload logic via evaluate (e.g. create a DataTransfer or set input.files), depending on what the app accepts. For native file chooser dialogs, the API does not expose a way to attach files; use CDP or evaluate if the app allows programmatic file assignment.
What is not supported (current version)
| Feature | Supported? | Workaround |
|---|---|---|
| Text input (type / fill) | Yes | Use browser.type(selector, text) or locator.type(text). |
| Checkboxes / radio (check / uncheck) | Yes | browser.check(selector), browser.uncheck(selector). |
| Select options | Yes | browser.select(selector, option) with { value }, { label }, { index } or array. |
| Click, double, right, hover | Yes | click, doubleClick, rightClick, hover. |
| Drag and drop | Yes | browser.dragAndDrop(source, target) or locator.dragTo(target). |
| Keys (single key / shortcut) | Yes | browser.pressKey(key) or locator.pressKey(key). |
| Click with modifiers (Shift+click, Ctrl+click) | No | Use evaluate to dispatch a click with modifiers, or focus and use pressKey for keyboard-only flows. |
| Type character-by-character with delay | No | Use type for full text; no built-in delay between keys. |
| File upload (setInputFiles) | No | Use evaluate if the app allows setting file input value; no native file chooser handling. |
| Explicit focus(selector) | No | Use click or evaluate to focus. |
| scrollIntoViewIfNeeded / mouse.wheel | No | Scrolling into view is done before actions; use evaluate for custom scroll. |
| force: true (bypass actionability) | No | Use evaluate to dispatch events if needed. |
| position: { x, y } (click at offset) | No | Clicks at element center; use evaluate for coordinate-based click. |
Summary
| Action | API | Example |
|---|---|---|
| Text input | type(selector, text) or locator.type(text) | await browser.type('#email', 'user@test.com') |
| Checkbox / radio | check(selector), uncheck(selector) or locator.check(), locator.uncheck() | await browser.check('#agree') |
| Select option | select(selector, option) or locator.select(option) | await browser.select('#color', { label: 'Blue' }) |
| Click | click(selector) or locator.click() | await browser.click('button') |
| Double click | doubleClick(selector) or locator.doubleClick() | await browser.doubleClick('.item') |
| Right click | rightClick(selector) or locator.rightClick() | await browser.rightClick('.item') |
| Hover | hover(selector) or locator.hover() | await browser.hover('.menu') |
| Key / shortcut | pressKey(key) or locator.pressKey(key) | await browser.pressKey('Enter') |
| Drag and drop | dragAndDrop(source, target) or locator.dragTo(target) | await browser.dragAndDrop('#a', '#b') |
Use waitForSelector before an action if the element appears after a delay. Use locator(selector).first(), .last(), or .nth(n) when multiple elements match.