use playwright backstop engine and update puppeteer syntax

package.json

@@ -38,7 +38,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-postcss": "^4.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "follow-redirects": "^1.15.6",
     "gulp": "^5.0.0",
     "gulp-clean": "^0.4.0",
@@ -56,9 +56,9 @@
     "jest-environment-puppeteer": "^10.0.1",
     "minimist": "^1.2.8",
     "nunjucks": "^3.2.4",
-    "prettier": "^2.7.1",
-    "puppeteer": "^18.1.0",
-    "sass": "^1.77.4",
+    "prettier": "^3.3.2",
+    "puppeteer": "^22.12.1",
+    "sass": "^1.77.6",
     "start-server-and-test": "^2.0.4",
     "stylelint": "^13.13.1",
     "stylelint-config-prettier": "^9.0.5",

tests/backstop/backstop.js

@@ -7,7 +7,7 @@ module.exports = {
   debug: false,
   debugWindow: false,
   dockerCommandTemplate: 'docker run --rm --network=host --mount type=bind,source="{cwd}",target=/src backstopjs/backstopjs:{version} {backstopCommand} {args}',
-  engine: 'puppeteer',
+  engine: 'playwright',
   engineOptions: {
     args: ['--no-sandbox'],
   },

tests/integration/puppeteer/tabs.test.js

@@ -1,5 +1,5 @@
-import puppeteer from 'puppeteer'
-const iPhone = puppeteer.devices['iPhone 6']
+import puppeteer, { KnownDevices } from 'puppeteer'
+const iPhone = KnownDevices['iPhone 6']
 
 describe('Tabs', () => {
   let page