Actions

Actions groups the ready-to-use interactions applied to a component and one of its element keys.

In practice, this namespace avoids writing low-level Playwright calls everywhere in the tests and gives the suite a more consistent vocabulary.

Simple example

import { Actions, createComponent, createWebsite, type Website } from "@duplojs/playwright";
import test from "playwright/test";

interface TestFixtures {
	website: Website;
}

const testClient = test.extend<TestFixtures>({
	async website({ page, context }, use) {
		const website = createWebsite({
			playwrightPage: page,
			playwrightBrowserContext: context,
			envConfig: {
				baseUrl: "https://example.com",
			},
		});

		await use(website);
	},
});

const searchForm = createComponent(
	"searchForm",
	{
		getMainElement({ body }) {
			return body.locator("[data-search-form]");
		},
		getElements({ mainElement }) {
			return {
				query: mainElement.locator("input"),
				submit: mainElement.locator("button[type='submit']"),
			};
		},
	},
);

testClient("actions example", async({ website }) => {
	const component = await website.iWantToSee(searchForm);

	await Actions.fill(component, "query", "duplojs");
	await Actions.click(component, "submit");
});

What is happening here

• the component exposes named elements
• Actions.fill(...) and Actions.click(...) rely on these element keys
• the test stays focused on intention rather than raw Playwright calls

What is it for?

Actions is mainly used to:

• share frequent interactions
• keep a consistent writing style
• reuse the same behaviors across several components
• avoid scattering locator calls in tests

click

Actions.click(component, elementKey)

Clicks a declared element of the component.

forceClick

Actions.forceClick(component, elementKey)

Forces a click with click({ force: true }).

hover

Actions.hover(component, elementKey)

Hovers over a declared element of the component.

focus

Actions.focus(component, elementKey)

Focuses a declared element of the component.

fill

Actions.fill(component, elementKey, content)

Fills an element with a text value.

type

Actions.type(component, elementKey, text, options?)

Types text sequentially into an element.

clear

Actions.clear(component, elementKey)

Clears the current value of an element.

press

Actions.press(component, elementKey, key)

Sends a keyboard key to an element.

check

Actions.check(component, elementKey)

Checks a compatible element.

uncheck

Actions.uncheck(component, elementKey)

Unchecks a compatible element.

selectOption

Actions.selectOption(component, elementKey, values)

Selects one or more options on an element.

dragTo

Actions.dragTo(component, elementKey, target, options?)

Moves an element to a target locator.

extractContent

Actions.extractContent(component, elementKey)

Returns the text content of an element.

withStep

Actions.withStep(label).action(component, elementKey, ...args)

Returns the same actions, but grouped under a custom test.step(...). The useful call is then chained on the returned wrapper.

See also

• Assertions - for ready-to-use checks on components.
• Component - to define the elements the actions apply to.
• Component Interaction - to create custom interactions if the provided actions are not enough.