Component Interaction

createComponentInteraction sert à créer une interaction réutilisable sur un élément déclaré d'un composant.
createStepWrapper sert à regrouper plusieurs interactions sous une étape Playwright plus large.

En pratique, c'est la base des helpers comme Actions et Assertions, mais aussi le bon niveau d'abstraction quand tu veux écrire tes propres interactions métier.

createComponentInteraction

createComponentInteraction(stepName, step)

Crée une fonction appelée avec la forme 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(...) crée une interaction réutilisable.
Elle reçoit automatiquement component, elementKey et element.

Paramètres

• stepName - le libellé affiché dans test.step(...). $component et $element sont remplacés à l'exécution.
• step - la fonction exécutée pour l'interaction. Elle reçoit d'abord { component, elementKey, element }, puis les arguments métier.

createStepWrapper

createStepWrapper(interactions)

Retourne une fonction appelée avec la forme wrapper(stepName).method(...).

Exemple simple

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

Le wrapper ne change pas les interactions.
Il permet de regrouper plusieurs appels sous un même intitulé métier dans le rapport Playwright.

Paramètres

• interactions - un objet dont les valeurs sont des interactions déjà créées, par exemple avec createComponentInteraction(...).

À quoi ça sert ?

• créer une interaction une fois puis la réutiliser sur plusieurs composants du même shape
• faire remonter des étapes plus parlantes dans le rapport Playwright
• construire des helpers métier au-dessus des éléments d'un composant
• factoriser les briques utilisées ensuite par Actions ou Assertions

Voir aussi

• Component - pour définir les éléments ciblés par ces interactions.
• Actions - pour les interactions prêtes à l'emploi construites sur ce modèle.
• Assertions - pour les vérifications prêtes à l'emploi construites sur ce modèle.