Actions

Actions regroupe les interactions prêtes à l'emploi appliquées à un composant et à l'une de ses clés d'élément.

En pratique, cette namespace évite d'écrire les appels Playwright bas niveau partout dans les tests et donne un vocabulaire plus homogène à la suite.

Exemple simple

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");
});

Ce qui se passe ici

• le composant expose des éléments nommés
• Actions.fill(...) et Actions.click(...) s'appuient sur ces clés d'élément
• le test reste centré sur l'intention plutôt que sur les appels Playwright bruts

À quoi ça sert ?

Actions sert surtout à :

• mutualiser les interactions fréquentes
• garder un style d'écriture homogène
• réutiliser les mêmes comportements sur plusieurs composants
• éviter de disperser les appels locator dans les tests

click

Actions.click(component, elementKey)

Clique sur un élément déclaré du composant.

forceClick

Actions.forceClick(component, elementKey)

Force un clic avec click({ force: true }).

hover

Actions.hover(component, elementKey)

Survole un élément déclaré du composant.

focus

Actions.focus(component, elementKey)

Donne le focus à un élément déclaré du composant.

fill

Actions.fill(component, elementKey, content)

Remplit un élément avec une valeur texte.

type

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

Tape du texte séquentiellement dans un élément.

clear

Actions.clear(component, elementKey)

Vide la valeur actuelle d'un élément.

press

Actions.press(component, elementKey, key)

Envoie une touche clavier à un élément.

check

Actions.check(component, elementKey)

Coche un élément compatible.

uncheck

Actions.uncheck(component, elementKey)

Décoche un élément compatible.

selectOption

Actions.selectOption(component, elementKey, values)

Sélectionne une ou plusieurs options sur un élément.

dragTo

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

Déplace un élément vers un locator cible.

extractContent

Actions.extractContent(component, elementKey)

Retourne le contenu texte d'un élément.

withStep

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

Retourne les mêmes actions, mais regroupées sous un test.step(...) personnalisé. L'appel utile est ensuite chaîné sur le wrapper retourné.

Voir aussi

• Assertions - pour les vérifications prêtes à l'emploi sur les composants.
• Component - pour définir les éléments sur lesquels les actions s'appliquent.
• Component Interaction - pour créer des interactions personnalisées si les actions fournies ne suffisent pas.