feat: limit animations when possible (#651)

* feat: add PANTHER_REDUCED_MOTION to limit animations * fix legacy array "moz:firefoxOptions" * review * tests and fix * Update ChromeManager.php --------- Co-authored-by: Kévin Dunglas <[email protected]>
symfony · Jan 8, 2025 · 1e8718e · 1e8718e
1 parent 8449573
commit 1e8718e
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,11 @@
 CHANGELOG
 =========
 
+2.2.0
+-----
+
+* Add a `PANTHER_NO_REDUCED_MOTION` environment variable to instruct the website to disable the reduction of non-essential movement
+
 2.1.2
 -----
 

diff --git a/README.md b/README.md
@@ -366,6 +366,7 @@ The following environment variables can be set to change some Panther's behavior
 * `PANTHER_ERROR_SCREENSHOT_DIR`: to set a base directory for your failure/error screenshots (e.g. `./var/error-screenshots`)
 * `PANTHER_DEVTOOLS`: to toggle the browser's dev tools (default `enabled`, useful to debug)
 * `PANTHER_ERROR_SCREENSHOT_ATTACH`: to add screenshots mentioned above to test output in junit attachment format
+* `PANTHER_NO_REDUCED_MOTION`: to instruct the website to disable the reduction of non-essential movement
 
 ### Changing the Hostname and Port of the Built-in Web Server
 

diff --git a/src/ProcessManager/ChromeManager.php b/src/ProcessManager/ChromeManager.php
@@ -115,6 +115,11 @@ private function getDefaultArguments(): array
             $args[] = '--no-sandbox';
         }
 
+        // Prefer reduced motion, see https://developer.mozilla.org/docs/Web/CSS/@media/prefers-reduced-motion
+        if (!filter_var($_SERVER['PANTHER_NO_REDUCED_MOTION'] ?? false, \FILTER_VALIDATE_BOOLEAN)) {
+            $args[] = '--force-prefers-reduced-motion';
+        }
+
         // Add custom arguments with PANTHER_CHROME_ARGUMENTS
         if ($_SERVER['PANTHER_CHROME_ARGUMENTS'] ?? false) {
             $arguments = explode(' ', $_SERVER['PANTHER_CHROME_ARGUMENTS']);

diff --git a/src/ProcessManager/FirefoxManager.php b/src/ProcessManager/FirefoxManager.php
@@ -13,6 +13,7 @@
 
 namespace Symfony\Component\Panther\ProcessManager;
 
+use Facebook\WebDriver\Firefox\FirefoxOptions;
 use Facebook\WebDriver\Remote\DesiredCapabilities;
 use Facebook\WebDriver\Remote\RemoteWebDriver;
 use Facebook\WebDriver\WebDriver;
@@ -64,6 +65,15 @@ public function start(): WebDriver
         $capabilities = DesiredCapabilities::firefox();
         $capabilities->setCapability('moz:firefoxOptions', $firefoxOptions);
 
+        // Prefer reduced motion, see https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-reduced-motion
+        if (!filter_var($_SERVER['PANTHER_NO_REDUCED_MOTION'] ?? false, \FILTER_VALIDATE_BOOLEAN)) {
+            /** @var FirefoxOptions|array $firefoxOptions */
+            $firefoxOptions = $capabilities->getCapability('moz:firefoxOptions') ?? [];
+            $firefoxOptions = $firefoxOptions instanceof FirefoxOptions ? $firefoxOptions->toArray() : $firefoxOptions;
+            $firefoxOptions['prefs']['ui.prefersReducedMotion'] = 1;
+            $capabilities->setCapability('moz:firefoxOptions', $firefoxOptions);
+        }
+
         foreach ($this->options['capabilities'] as $capability => $value) {
             $capabilities->setCapability($capability, $value);
         }

diff --git a/tests/ClientTest.php b/tests/ClientTest.php
@@ -13,6 +13,7 @@
 
 namespace Symfony\Component\Panther\Tests;
 
+use Facebook\WebDriver\Exception\ElementClickInterceptedException;
 use Facebook\WebDriver\Exception\InvalidSelectorException;
 use Facebook\WebDriver\Exception\StaleElementReferenceException;
 use Facebook\WebDriver\Exception\TimeoutException;
@@ -577,4 +578,36 @@ public function testCreateHttpBrowserClientWithInvalidHttpClientOptions(): void
             'http_client_options' => 'bad http client option data type',
         ]);
     }
+
+    /**
+     * @dataProvider providePrefersReducedMotion
+     */
+    public function testPrefersReducedMotion(string $browser): void
+    {
+        $client = self::createPantherClient(['browser' => $browser]);
+        $client->request('GET', '/prefers-reduced-motion.html');
+
+        $client->clickLink('Click me!');
+        $this->assertStringEndsWith('#clicked', $client->getCurrentURL());
+    }
+
+    /**
+     * @dataProvider providePrefersReducedMotion
+     */
+    public function testPrefersReducedMotionDisabled(string $browser): void
+    {
+        $this->expectException(ElementClickInterceptedException::class);
+
+        $_SERVER['PANTHER_NO_REDUCED_MOTION'] = true;
+        $client = self::createPantherClient(['browser' => $browser]);
+        $client->request('GET', '/prefers-reduced-motion.html');
+
+        $client->clickLink('Click me!');
+    }
+
+    public function providePrefersReducedMotion(): iterable
+    {
+        yield 'Chrome' => [PantherTestCase::CHROME];
+        yield 'Firefox' => [PantherTestCase::FIREFOX];
+    }
 }
diff --git a/tests/fixtures/prefers-reduced-motion.html b/tests/fixtures/prefers-reduced-motion.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>WaitFor</title>
+    <style>
+        #overlay {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            animation: animation 5s forwards;
+        }
+
+        @keyframes animation {
+            from {
+                opacity: 1;
+            }
+            to {
+                opacity: 0;
+                visibility: hidden;
+            }
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            #overlay {
+                animation: none;
+                opacity: 0;
+                visibility: hidden;
+            }
+        }
+    </style>
+</head>
+<body>
+<div id="overlay"></div>
+<a href="#clicked">Click me!</a>
+</body>
+</html>