Playwright engine - disable animations option

[ppozniakESG]

Would it be possible to pass down that option to playwright from backstopjs configuration? https://playwright.dev/docs/api/class-locator#locator-screenshot-option-animations

[garris]

Did you check if engineOptions parameter enables this already?

[maxfenton]

How would that be formatted? Like this?

"engineOptions": {
        "args": [
            "--no-sandbox",
        ],
        "animations": "disabled",
    },

I'm similarly trying to pass "reducedMotion": "reduce", into playwright somehow.

[Alexbirvik]

@maxfenton Hey! Did you find a way? Nothing works in my case :(

"engineOptions": {
        "args": [
            "--no-sandbox",
        ],
        "animations": "disabled",
    },

Also tried set this in onBefore.js

`await page.emulateMedia({ reducedMotion: 'reduce' });`

[garris]

Here is the internal entry point for the playwright instantiation in backstop. You can probably take a look at this and see how this parameter is getting sent to playwright and even hardcode your setting to just see if this approach will eventually solve your issue... https://github.com/garris/BackstopJS/blob/141938c763c8902fc75911969f38f2761fa377c5/core/util/runPlaywright.js#L37

Sorry I can't be more of a help. Good luck!

[dgrebb]

This is not an engine option, but a param for the screenshot API.

E.g. await page.getByRole('link').screenshot({ animations: 'disabled', path: 'link.png' });.

@Alexbirvik I, too, have tried but was never successful in getting any reduced motion args to work with either Playwright or Puppeteer (or Lighthouse, FWIW).

BackstopJS configuration does not currently expose this layer of args — they only go as far as run playwright. It's a bummer Playwright doesn't expose this as a global arg.

This is a good candidate for a future feature @garris — I'll add to the backlog.

@Alexbirvik you might be able to get this working by patching this portion of the source:

File: core/util/runPlaywright.js
437:       await page.screenshot({

In context:

async function captureScreenshot (page, browserContext, selector, selectorMap, config, selectors, viewport) {
  let filePath;
  const fullPage = (selector === NOCLIP_SELECTOR || selector === DOCUMENT_SELECTOR);
  if (selector) {
    filePath = selectorMap[selector].filePath;
    ensureDirectoryPath(filePath);

    try {
      await page.screenshot({
        path: filePath,
        fullPage
      });
    } catch (e) {
      console.log(chalk.red('Error capturing..'), e);
      return fs.copy(config.env.backstop + ERROR_SELECTOR_PATH, filePath);
    }

If you end up trying that I would be grateful to see any results!