disable animation in playwright tests

Author: marle3003

webui/e2e/dashboard-demo/dashboard.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '../models/fixture-dashboard'
+import { test, expect } from '../models/fixture-website'
 import { getCellByColumnName } from '../helpers/table'
 
 test.use({ colorScheme: 'light' })

webui/e2e/dashboard-demo/kafka.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '../models/fixture-dashboard'
+import { test, expect } from '../models/fixture-website'
 import { getCellByColumnName } from '../helpers/table'
 
 test.use({ colorScheme: 'light' })

webui/e2e/dashboard-demo/ldap.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '../models/fixture-dashboard'
+import { test, expect } from '../models/fixture-website'
 import { getCellByColumnName } from '../helpers/table'
 
 test.use({ colorScheme: 'light' })

webui/e2e/dashboard-demo/mail.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '../models/fixture-dashboard'
+import { test, expect } from '../models/fixture-website'
 import { getCellByColumnName } from '../helpers/table'
 
 test.use({ colorScheme: 'light' })

webui/e2e/dashboard-demo/petstore.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '../models/fixture-dashboard'
+import { test, expect } from '../models/fixture-website'
 import { getCellByColumnName } from '../helpers/table'
 
 test.use({ colorScheme: 'light' })

webui/e2e/models/fixture-website.ts

@@ -8,6 +8,16 @@ type WebsiteFixture = {
 export { expect } from '@playwright/test'
 
 export const test = base.extend<WebsiteFixture>({
+    context: async ({ context }, use) => {
+        await context.addInitScript(() => {
+            const addNoMotionClass = () => {
+                document.body.classList.add('no-motion');
+            };
+            document.addEventListener('DOMContentLoaded', addNoMotionClass);
+        });
+        await use(context);
+    },
+
     home: async ({page}, use) => {
         const home = new HomeModel(page)
         await use(home)

webui/src/assets/main.css

@@ -116,4 +116,15 @@ i.icon {
 .form-select:focus {
   border-color: var(--form-color-border-active);
   box-shadow: 0 0 0 0.2rem rgba(234, 186, 171, 0.25)
+}
+/* class to disable all animations for Playwright tests */
+.no-motion {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0s !important;
+        transition-duration: 0s !important;
+        animation: none !important;
+        transition: none !important;
+    }
 }