Quick Start

This page shows the minimum needed to run a first test with @duplojs/playwright.

Installation

npm

npm install -D playwright @duplojs/playwright @duplojs/utils

pnpm

pnpm add -D playwright @duplojs/playwright @duplojs/utils

yarn

yarn add -D playwright @duplojs/playwright @duplojs/utils

If Playwright is not initialized in the project yet:

npm

npx playwright install --with-deps

pnpm

pnpm exec playwright install --with-deps

yarn

yarn playwright install --with-deps

Playwright config playwright.config.ts

import { defineConfig, devices } from "playwright/test";
import { environmentVariableOrThrow } from "@duplojs/server-utils";
import { DPE } from "@duplojs/utils";

const envs = await environmentVariableOrThrow({
	CI: DPE.coerce.boolean(),
	RETRIES: DPE.coerce.number(),
	WORKERS: DPE.coerce.number(),
});

export default defineConfig({
	testDir: "./tests",
	fullyParallel: true,
	forbidOnly: envs.CI,
	retries: envs.RETRIES,
	workers: envs.WORKERS,
	reporter: [
		[
			"html",
			{
				open: "never",
				outputFolder: "playwright-report",
			},
		],
		["list"],
	],
	use: {
		headless: true,
		trace: "retain-on-failure",
		screenshot: "only-on-failure",
	},
	projects: [
		{
			name: "chromium",
			use: { ...devices["Desktop Chrome"] },
		},
	],
});

TIP

Here, the config stays minimal: Chromium, few workers in CI, and a few useful artifacts in case of failure.

package.json script

{
  "scripts": {
    "test:playwright": "playwright test -c playwright.config.ts"
  }
}

First test

import { Assertions, 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 homePage = createPage(
	"home",
	{
		makePath() {
			return "/";
		},
		getMainElement({ body }) {
			return body.locator("main");
		},
		getElements({ mainElement }) {
			return {
				title: mainElement.locator("h1"),
			};
		},
	},
);

testClient("home page", async({ website }) => {
	const home = await website.iNavigateTo(homePage);

	await Assertions.toBeVisible(home, "title");
});

What is happening here

• the extended Playwright client creates a Website
• it describes a Page
• the test gets website from this client
• then it navigates to this page with website.iNavigateTo(...)
• finally, it applies a simple assertion

Expected result

Terminal

$ npm run test:playwright

Running 1 test using 1 worker

 ✓ 1 [chromium] › tests/home.test.ts:1:1 › home page (133ms)

1 passed (842ms)