Component Interaction

createComponentInteraction is used to create a reusable interaction on a declared element of a component.
createStepWrapper is used to group several interactions under a broader Playwright step.

In practice, this is the basis for helpers like Actions and Assertions, but also the right level of abstraction when you want to write your own business interactions.

createComponentInteraction

createComponentInteraction(stepName, step)

Creates a function called with the shape interaction(component, elementKey, ...args).

import { createComponent, createComponentInteraction, 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']"),
			};
		},
	},
);

const submitSearch = createComponentInteraction(
	"$component: I submit $element.",
	async({ element }) => {
		await element.click();
	},
);

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

	await submitSearch(component, "submit");
});

TIP

createComponentInteraction(...) creates a reusable interaction.
It automatically receives component, elementKey, and element.

Parameters

• stepName - the label displayed in test.step(...). $component and $element are replaced at runtime.
• step - the function executed for the interaction. It first receives { component, elementKey, element }, then the business arguments.

createStepWrapper

createStepWrapper(interactions)

Returns a function called with the shape wrapper(stepName).method(...).

Simple example

import { Actions, type Component, createComponentInteraction, createStepWrapper } from "@duplojs/playwright";
import { type Locator } from "playwright";

const submitSearch = createComponentInteraction(
	"$component: I submit $element.",
	async({ element }) => {
		await element.click();
	},
);

const searchStep = createStepWrapper({
	fillQuery: Actions.fill,
	submit: submitSearch,
});

declare const component: Component<"", {
	query: Locator;
	submit: Locator;
}>;

await searchStep("search flow").fillQuery(component, "query", "duplojs");
await searchStep("search flow").submit(component, "submit");

TIP

The wrapper does not change the interactions.
It makes it possible to group several calls under the same business title in the Playwright report.

Parameters

• interactions - an object whose values are already created interactions, for example with createComponentInteraction(...).

What is it for?

• create an interaction once, then reuse it on several components with the same shape
• surface more meaningful steps in the Playwright report
• build business helpers above a component's elements
• factor the building blocks then used by Actions or Assertions

See also

• Component - to define the elements targeted by these interactions.
• Actions - for the ready-to-use interactions built on this model.
• Assertions - for the ready-to-use checks built on this model.