chore: update web test runner and playwright

Author: TarunAdobe

.circleci/config.yml

@@ -7,7 +7,7 @@ executors:
         resource_class: medium
     node:
         docker:
-            - image: mcr.microsoft.com/playwright:v1.44.0
+            - image: mcr.microsoft.com/playwright:v1.53.1
         resource_class: xlarge
         environment:
             NODE_ENV: development

package.json

@@ -102,7 +102,7 @@
         "@lit/react": "^1.0.4",
         "@open-wc/dev-server-hmr": "^0.2.0",
         "@open-wc/testing": "^4.0.0",
-        "@playwright/test": "^1.44.0",
+        "@playwright/test": "^1.53.1",
         "@rollup/plugin-commonjs": "^25.0.7",
         "@rollup/plugin-json": "^6.0.1",
         "@rollup/plugin-node-resolve": "^15.2.3",
@@ -134,11 +134,11 @@
         "@web/dev-server-rollup": "^0.6.4",
         "@web/rollup-plugin-copy": "^0.5.1",
         "@web/rollup-plugin-html": "^2.3.0",
-        "@web/test-runner": "^0.18.3",
+        "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
-        "@web/test-runner-junit-reporter": "^0.7.2",
-        "@web/test-runner-playwright": "^0.11.0",
-        "@web/test-runner-visual-regression": "^0.9.0",
+        "@web/test-runner-junit-reporter": "^0.8.0",
+        "@web/test-runner-playwright": "^0.11.1",
+        "@web/test-runner-visual-regression": "^0.10.0",
         "@webcomponents/webcomponentsjs": "^2.8.0",
         "@yarnpkg/types": "^4.0.1",
         "alex": "^11.0.1",

packages/.eslintrc.json

@@ -88,7 +88,8 @@
                 "*.test.ts",
                 "*.stories.ts",
                 "**/benchmark/*.ts",
-                "**/test/*.ts"
+                "**/test/*.ts",
+                "**/stories/*.ts"
             ],
             "rules": {
                 "@spectrum-web-components/document-active-element": ["off"],

packages/icons-workflow/bin/build.js

@@ -19,7 +19,7 @@ import prettier from 'prettier';
 import Case from 'case';
 import { fileURLToPath } from 'url';
 
-import systemsIconMapping from './icons-mapping.json' assert { type: 'json' };
+import systemsIconMapping from './icons-mapping.json' with { type: 'json' };
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 

packages/iconset/stories/icons-demo.ts

@@ -31,7 +31,7 @@ import bodyStyles from '@spectrum-web-components/styles/body.js';
 import '@spectrum-web-components/icon/sp-icon.js';
 import '@spectrum-web-components/help-text/sp-help-text.js';
 
-import iconsList from './iconsList.json' assert { type: 'json' };
+import iconsList from './iconsList.json' with { type: 'json' };
 
 import {
     SystemResolutionController,
@@ -209,7 +209,8 @@ export class IconsDemo extends SpectrumElement {
                         var(
                                 --spectrum-alias-focus-ring-gap,
                                 var(--spectrum-spacing-50)
-                            ) * 2
+                            ) *
+                            2
                     );
                 }
             `,

projects/css-custom-vars-viewer/package.json

@@ -59,7 +59,7 @@
         "@web/dev-server": "^0.4.6",
         "@web/storybook-builder": "^0.1.7",
         "@web/storybook-framework-web-components": "^0.1.1",
-        "@web/test-runner": "^0.18.3",
+        "@web/test-runner": "^0.20.2",
         "concurrently": "^8.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",

test/visual/test.ts

@@ -29,7 +29,7 @@ import { StoryDecorator } from '@spectrum-web-components/story-decorator';
 import '@spectrum-web-components/story-decorator/sp-story-decorator.js';
 import { Color, Scale } from '@spectrum-web-components/theme';
 import { emulateMedia, sendKeys } from '@web/test-runner-commands';
-import { visualDiff } from '@web/test-runner-visual-regression';
+import { visualDiff } from '@web/test-runner-visual-regression/browser/commands';
 import { render } from 'lit';
 import { ignoreResizeObserverLoopError } from '../testing-helpers.js';