configure playwright to use reduced motion

kettanaito · kettanaito · commit 4aa1d3e0779f · 2025-07-10T15:38:52.000+02:00
diff --git a/exercises/01.basics/02.problem.running-the-app/app/routes/_marketing+/index.tsx b/exercises/01.basics/02.problem.running-the-app/app/routes/_marketing+/index.tsx
@@ -34,7 +34,7 @@ export default function Index() {
 				<div className="flex max-w-md flex-col items-center text-center xl:order-2 xl:items-start xl:text-left">
 					<a
 						href="https://www.epicweb.dev/stack"
-						className="animate-slide-top xl:animate-slide-left [animation-fill-mode:backwards] xl:[animation-delay:0.5s] xl:[animation-fill-mode:backwards]"
+						className="motion-safe:animate-slide-top xl:motion-safe:animate-slide-left [animation-fill-mode:backwards] xl:[animation-delay:0.5s] xl:[animation-fill-mode:backwards]"
 					>
 						<svg
 							className="text-foreground size-20 xl:-mt-4"
@@ -50,13 +50,13 @@ export default function Index() {
 					</a>
 					<h1
 						data-heading
-						className="animate-slide-top text-foreground xl:animate-slide-left mt-8 text-4xl font-medium [animation-delay:0.3s] [animation-fill-mode:backwards] md:text-5xl xl:mt-4 xl:text-6xl xl:[animation-delay:0.8s] xl:[animation-fill-mode:backwards]"
+						className="motion-safe:animate-slide-top text-foreground xl:motion-safe:animate-slide-left mt-8 text-4xl font-medium [animation-delay:0.3s] [animation-fill-mode:backwards] md:text-5xl xl:mt-4 xl:text-6xl xl:[animation-delay:0.8s] xl:[animation-fill-mode:backwards]"
 					>
 						<a href="https://www.epicweb.dev/stack">The Epic Stack</a>
 					</h1>
 					<p
 						data-paragraph
-						className="animate-slide-top text-muted-foreground xl:animate-slide-left mt-6 text-xl/7 [animation-delay:0.8s] [animation-fill-mode:backwards] xl:mt-8 xl:text-xl/6 xl:leading-10 xl:[animation-delay:1s] xl:[animation-fill-mode:backwards]"
+						className="motion-safe:animate-slide-top text-muted-foreground xl:motion-safe:animate-slide-left mt-6 text-xl/7 [animation-delay:0.8s] [animation-fill-mode:backwards] xl:mt-8 xl:text-xl/6 xl:leading-10 xl:[animation-delay:1s] xl:[animation-fill-mode:backwards]"
 					>
 						Check the{' '}
 						<a
@@ -76,7 +76,7 @@ export default function Index() {
 								className={cn(
 									columnClasses[logo.column],
 									rowClasses[logo.row],
-									'animate-roll-reveal [animation-fill-mode:backwards]',
+									'motion-safe:animate-roll-reveal [animation-fill-mode:backwards]',
 								)}
 								style={{ animationDelay: `${i * 0.07}s` }}
 							>
diff --git a/exercises/01.basics/02.solution.running-the-app/app/routes/_marketing+/index.tsx b/exercises/01.basics/02.solution.running-the-app/app/routes/_marketing+/index.tsx
@@ -34,7 +34,7 @@ export default function Index() {
 				<div className="flex max-w-md flex-col items-center text-center xl:order-2 xl:items-start xl:text-left">
 					<a
 						href="https://www.epicweb.dev/stack"
-						className="animate-slide-top xl:animate-slide-left [animation-fill-mode:backwards] xl:[animation-delay:0.5s] xl:[animation-fill-mode:backwards]"
+						className="motion-safe:animate-slide-top xl:motion-safe:animate-slide-left [animation-fill-mode:backwards] xl:[animation-delay:0.5s] xl:[animation-fill-mode:backwards]"
 					>
 						<svg
 							className="text-foreground size-20 xl:-mt-4"
@@ -50,13 +50,13 @@ export default function Index() {
 					</a>
 					<h1
 						data-heading
-						className="animate-slide-top text-foreground xl:animate-slide-left mt-8 text-4xl font-medium [animation-delay:0.3s] [animation-fill-mode:backwards] md:text-5xl xl:mt-4 xl:text-6xl xl:[animation-delay:0.8s] xl:[animation-fill-mode:backwards]"
+						className="motion-safe:animate-slide-top text-foreground xl:motion-safe:animate-slide-left mt-8 text-4xl font-medium [animation-delay:0.3s] [animation-fill-mode:backwards] md:text-5xl xl:mt-4 xl:text-6xl xl:[animation-delay:0.8s] xl:[animation-fill-mode:backwards]"
 					>
 						<a href="https://www.epicweb.dev/stack">The Epic Stack</a>
 					</h1>
 					<p
 						data-paragraph
-						className="animate-slide-top text-muted-foreground xl:animate-slide-left mt-6 text-xl/7 [animation-delay:0.8s] [animation-fill-mode:backwards] xl:mt-8 xl:text-xl/6 xl:leading-10 xl:[animation-delay:1s] xl:[animation-fill-mode:backwards]"
+						className="motion-safe:animate-slide-top text-muted-foreground xl:motion-safe:animate-slide-left mt-6 text-xl/7 [animation-delay:0.8s] [animation-fill-mode:backwards] xl:mt-8 xl:text-xl/6 xl:leading-10 xl:[animation-delay:1s] xl:[animation-fill-mode:backwards]"
 					>
 						Check the{' '}
 						<a
@@ -76,7 +76,7 @@ export default function Index() {
 								className={cn(
 									columnClasses[logo.column],
 									rowClasses[logo.row],
-									'animate-roll-reveal [animation-fill-mode:backwards]',
+									'motion-safe:animate-roll-reveal [animation-fill-mode:backwards]',
 								)}
 								style={{ animationDelay: `${i * 0.07}s` }}
 							>
diff --git a/exercises/01.basics/02.solution.running-the-app/playwright.config.ts b/exercises/01.basics/02.solution.running-the-app/playwright.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
+		contextOptions: {
+			reducedMotion: 'reduce',
+		},
 	},
 
 	projects: [
diff --git a/exercises/02.test-setup/01.problem.custom-fixtures/playwright.config.ts b/exercises/02.test-setup/01.problem.custom-fixtures/playwright.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
+		contextOptions: {
+			reducedMotion: 'reduce',
+		},
 	},
 
 	projects: [
diff --git a/exercises/02.test-setup/01.solution.custom-fixtures/playwright.config.ts b/exercises/02.test-setup/01.solution.custom-fixtures/playwright.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
+		contextOptions: {
+			reducedMotion: 'reduce',
+		},
 	},
 
 	projects: [
diff --git a/exercises/02.test-setup/03.problem.authentication/playwright.config.ts b/exercises/02.test-setup/03.problem.authentication/playwright.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
+		contextOptions: {
+			reducedMotion: 'reduce',
+		},
 	},
 
 	projects: [
diff --git a/exercises/02.test-setup/03.solution.authentication/playwright.config.ts b/exercises/02.test-setup/03.solution.authentication/playwright.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
+		contextOptions: {
+			reducedMotion: 'reduce',
+		},
 	},
 
 	projects: [
diff --git a/exercises/02.test-setup/04.solution.api-mocking/playwright.config.ts b/exercises/02.test-setup/04.solution.api-mocking/playwright.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
+		contextOptions: {
+			reducedMotion: 'reduce',
+		},
 	},
 
 	projects: [
diff --git a/exercises/03.guides/01.problem.recording-interactions/playwright.config.ts b/exercises/03.guides/01.problem.recording-interactions/playwright.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
+		contextOptions: {
+			reducedMotion: 'reduce',
+		},
 	},
 
 	projects: [
diff --git a/exercises/03.guides/01.solution.recording-interactions/playwright.config.ts b/exercises/03.guides/01.solution.recording-interactions/playwright.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
+		contextOptions: {
+			reducedMotion: 'reduce',
+		},
 	},
 
 	projects: [
diff --git a/exercises/03.guides/02.problem.test-annotations/playwright.config.ts b/exercises/03.guides/02.problem.test-annotations/playwright.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
+		contextOptions: {
+			reducedMotion: 'reduce',
+		},
 	},
 
 	projects: [
diff --git a/exercises/03.guides/02.solution.test-annotations/playwright.config.ts b/exercises/03.guides/02.solution.test-annotations/playwright.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
 	use: {
 		baseURL: `http://localhost:${PORT}/`,
 		trace: 'on-first-retry',
+		contextOptions: {
+			reducedMotion: 'reduce',
+		},
 	},
 
 	projects: [
diff --git a/exercises/03.guides/02.solution.test-annotations/tests/e2e/homepage.test.ts b/exercises/03.guides/02.solution.test-annotations/tests/e2e/homepage.test.ts
@@ -13,7 +13,7 @@ test(
 		await navigate('/')
 
 		await expect(
-			page.getByRole('heading', { name: 'The Most Epic of Stacks' }),
+			page.getByRole('heading', { name: 'The Epic Stack' }),
 		).toBeVisible()
 	},
 )
