Page

createPage permet de décrire une page sur le même modèle qu'un composant, avec en plus une fonction makePath(...) pour construire son chemin.

En pratique, c'est la bonne abstraction quand un écran doit être à la fois navigable et manipulable comme un composant.

Exemple simple

import { createComponent, createPage, 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 toolbar = createComponent(
	"toolbar",
	{
		getMainElement({ body }) {
			return body.locator("[data-toolbar]");
		},
	},
);

const articlePage = createPage(
	"article",
	{
		makePath({ slug }: { slug: string }) {
			return `/articles/${slug}`;
		},
		getMainElement({ body }) {
			return body.locator("main");
		},
		getElements({ mainElement }) {
			return {
				title: mainElement.locator("h1"),
			};
		},
		components: [toolbar],
	},
);

testClient("page example", async({ website }) => {
	const article = await website.iNavigateTo(articlePage, { slug: "articleId" });

	const toolbar = await article.iWantToSeeComponent("toolbar");
});

Ce qui se passe ici

• l'exemple montre un client Playwright étendu, puis la définition de la page.
• createPage(...) décrit une page article.
• makePath(...) construit le chemin de navigation.
• getMainElement(...) définit l'élément principal de la page.
• la page expose ensuite ses éléments comme un composant classique.

Paramètres

• name - le nom public de la page dans le modèle de test.
• params.makePath - construit le chemin de la page.
• params.getMainElement - retourne le locator racine de la page.
• params.getElements? - expose des éléments nommés.
• params.getMethods? - expose des méthodes construites à partir du contexte de la page.
• params.components? - enregistre des sous-composants accessibles depuis la page.

Syntaxe

interface CreatePageParams {
	makePath(...args: any[]): string;
	getMainElement(params: {
		body: Locator;
	}): Locator;
	getElements?(params: {
		mainElement: Locator;
		body: Locator;
	}): Record<string, Locator>;
	getMethods?(params: {
		mainElement: Locator;
		body: Locator;
		elements: Record<string, Locator> | undefined;
		website: Website;
	}): Record<string, (...args: any[]) => any>;
	components?: ComponentEngine[];
}

type PageEngine = (website: Website) => Page;

interface Page extends Component {
	makePath(...args: any[]): string;
}

À quoi ça sert ?

Page sert à réunir dans un même objet :

• la construction d'un chemin
• l'accès aux éléments d'un écran
• les méthodes propres à cette page
• la composition avec d'autres composants

Autrement dit, il permet de naviguer vers une page puis de la manipuler avec la même abstraction.

Voir aussi

• Website - pour naviguer vers une page avec iNavigateTo(...) ou iGoTo(...).
• Component - pour le modèle commun utilisé aussi par les pages.
• Component Interaction - pour créer des interactions réutilisables sur les éléments d'une page.
• Actions - pour les actions prêtes à l'emploi sur les éléments de la page.
• Assertions - pour les assertions prêtes à l'emploi sur les éléments de la page.