Add playwright image snapshots

apps/wc-lit/package.json

@@ -7,7 +7,8 @@
     "start": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test": "playwright test"
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
   },
   "dependencies": {
     "@responsive-image/cdn": "workspace:*",

apps/wc-lit/playwright.config.ts

@@ -5,6 +5,8 @@ import { defineConfig, devices } from '@playwright/test';
  */
 export default defineConfig({
   testDir: './tests',
+  snapshotPathTemplate:
+    '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */

apps/wc-lit/tests/responsive-image.spec.ts

@@ -16,6 +16,7 @@ test('responsive layout', async ({ page }) => {
     'src',
     new RegExp(`/assets/aurora-[0-9]+w(-[a-zA-Z0-9-_]+)?.jpg`),
   );
+  await expect(img).toHaveScreenshot();
 
   const picture = page.locator('[data-test-local-image="responsive"] picture');
 
@@ -44,6 +45,7 @@ test('fixed layout', async ({ page }) => {
   );
   await expect(img).toHaveAttribute('width', '320');
   await expect(img).toHaveAttribute('height', /213/);
+  await expect(img).toHaveScreenshot();
 
   const picture = page.locator('[data-test-local-image="fixed"] picture');
 
@@ -80,6 +82,7 @@ test('fixed layout w/ aspect', async ({ page }) => {
   );
   await expect(img).toHaveAttribute('width', '320');
   await expect(img).toHaveAttribute('height', '480');
+  await expect(img).toHaveScreenshot();
 
   const picture = page.locator('[data-test-local-image="fixed"] picture');