feat: persist/restore state

Author: tuyen-at-work

.engine_scripts/playwright/actions.js

@@ -176,19 +176,7 @@ module.exports = async (context) => {
 
     if (!!action.persist) {
       console.log(logPrefix + 'persist:', action.persist);
-      const states = await browserContext.storageState();
-      setStorageState(action.persist, states);
+      await browserContext.storageState({ path: action.path });
     }
   }
 };
-
-function setStorageState(stateName, states) {
-  const statePath = path.join(process.cwd(), 'states', `${stateName}.yaml`);
-  const parentDir = path.dirname(statePath);
-  if (!fs.existsSync(parentDir)) {
-    fs.mkdirSync(parentDir, { recursive: true });
-  }
-
-  const yaml = YAML.dump(states, { lineWidth: -1, noCompatMode: true });
-  fs.writeFileSync(statePath, yaml);
-}

.gitignore

@@ -4,4 +4,5 @@ backstop_data/
 src/**/*.js
 src/**/*.d.ts
 src/**/*.map
-*.tsbuildinfo
+*.tsbuildinfo
+.states/

package-lock.json

@@ -9,9 +9,9 @@
   },
   "scripts": {
     "build": "tsc --project tsconfig.json",
-    "ref": "node src/index.js -- --command test --ref",
-    "approve": "node src/index.js -- --command approve",
-    "test": "node src/index.js -- --command test"
+    "ref": "tsx src/index.js ref",
+    "approve": "tsx src/index.js approve",
+    "test": "tsx src/index.js test"
   },
   "repository": {
     "type": "git",
@@ -31,15 +31,15 @@
     "chalk": "^5.4.1",
     "js-yaml": "^4.1.0",
     "ncp": "^2.0.0",
-    "slash": "^5.1.0",
-    "tsx": "^4.19.2"
+    "slash": "^5.1.0"
   },
   "devDependencies": {
     "@types/backstopjs": "^6.1.3",
     "@types/js-yaml": "^4.0.9",
     "@types/ncp": "^2.0.8",
     "@types/node": "^22.10.5",
     "ts-node": "^10.9.2",
+    "tsx": "^4.19.2",
     "typescript": "^5.7.3"
   }
-}
+}

package.json

@@ -3,11 +3,12 @@ import { Config, Scenario, ViewportNext } from 'backstopjs';
 import { createScenario } from './scenarios.js';
 import path from 'path';
 import { getFlagArg, getStringArg, parseDataFromFile, getLibraryPath } from './helpers.js';
-import { TestSuiteModel, ScenarioModel } from './types.js';
+import { TestSuiteModel, ScenarioModel, PersistAction } from './types.js';
 import chalk from 'chalk';
 import { exit } from 'process';
 import YAML from 'js-yaml';
 import { getTestUrl } from './replacements.js';
+import { getStatePath } from './state.js';
 
 const libraryPath = getLibraryPath();
 const engine: 'puppeteer' | 'playwright' = 'playwright';
@@ -126,11 +127,6 @@ function getScenarios(args: string[], testSuite: string, isRef: boolean, globalR
         total: data.scenarios.length,
         delay: s.delay ?? 1000,
         state: s.state ?? data.state,
-        restore: !data.restore
-          ? s.restore
-          : !s.restore
-          ? data.restore
-          : [...(typeof data.restore === 'string' ? [data.restore] : data.restore), ...(typeof s.restore === 'string' ? [s.restore] : s.restore)],
         hideSelectors: s.hideSelectors ?? data.hideSelectors,
         removeSelectors: s.removeSelectors ?? data.removeSelectors,
         useCssOverride: s.useCssOverride ?? data.useCssOverride,
@@ -154,6 +150,14 @@ function getScenarios(args: string[], testSuite: string, isRef: boolean, globalR
         opts.restore = opts.restore.filter((value, index, self) => self.indexOf(value) === index);
       }
 
+      if (opts.actions && Array.isArray(opts.actions)) {
+        let persistActions = opts.actions.filter((a) => (a as PersistAction).persist) as PersistAction[];
+        for (const persistAction of persistActions) {
+          persistAction.path = getStatePath(persistAction.persist as string);
+          console.log('Persist action: ', persistAction);
+        }
+      }
+
       const scenario = createScenario(opts);
       scenarios.push(scenario);
     });
@@ -193,6 +197,7 @@ export function getConfig(args: string[]): Config {
       browser: data?.browser ?? 'chromium',
       ignoreHTTPSErrors: data && typeof data?.ignoreSslErrors === 'boolean' ? data.ignoreSslErrors : true,
       headless: data?.debug ? undefined : 'new',
+      storageState: data?.state ? getStatePath(data.state) : undefined,
     },
     asyncCaptureLimit: data?.asyncCaptureLimit ?? 5,
     asyncCompareLimit: data?.asyncCompareLimit ?? 50,

src/config.ts

@@ -0,0 +1,11 @@
+import fs from 'fs';
+import path from 'path';
+
+export function getStatePath(stateName: string) {
+  const stateFolder = path.join(process.cwd(), '.states');
+  if (!fs.existsSync(stateFolder)) {
+    fs.mkdirSync(stateFolder, { recursive: true });
+  }
+
+  return path.join(stateFolder, `${stateName}.json`);
+}