Use playwright's emulateMedia to set prefers-reduced-motion

Instead of setting a Chrome-only CLI flag.

For some reason the CLI flag isn't working for me anymore after updating Playwright to 1.14.1 (might be a bug in Playwright).

Investigating that led me to https://playwright.dev/docs/api/class-page#page-emulate-media and microsoft/playwright#6646. This resolves the issue I'm seeing, and also should work in all browsers, instead of just Chrome.

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- [bugfix] Ensure `prefers-reduced-motion` is turned on [#33](https://github.com/chanzuckerberg/axe-storybook-testing/pull/33)
+
 ## 4.0.0 (2021-09-13)
 
 - [breaking] Drop support for Node 10 [#29](https://github.com/chanzuckerberg/axe-storybook-testing/pull/29)

src/browser/TestBrowser.ts

@@ -16,20 +16,22 @@ export default class TestBrowser {
   static async create(options: Options): Promise<TestBrowser> {
     const browser = await playwright[options.browser].launch({
       headless: options.headless,
-      args: [
-        // Force the `prefers-reduced-motion` media query to be true in Chromium. This will prevent
-        // animations (that respect the media query) from causing flaky or failing tests due to the
-        // animation. Only works in Chromium, currently.
-        '--force-prefers-reduced-motion',
-      ],
     });
 
     try {
       const context = await browser.newContext({ bypassCSP: true });
 
       // Create a new page at Storybook's static iframe and with axe-core setup and ready to run.
       const page = await context.newPage();
+
+      // Turn on `prefers-reduced-motion`. This will prevent any animations that respect the media
+      // query from causing flaky or failing tests due to animation.
+      await page.emulateMedia({ reducedMotion: 'reduce' });
+
+      // Visit Storybook's static iframe.
       await page.goto(options.iframePath);
+
+      // Ensure axe-core is setup and ready to run.
       await AxePage.prepare(page);
 
       return new TestBrowser(browser, page);