Merge pull request #733 from simonihmig/wc-e2e

Playwright e2e tests for wc-lit demo app

apps/ember-vite/tests/acceptance/local-images-test.js

@@ -74,7 +74,7 @@ module('Acceptance | local images', function (hooks) {
           .hasAttribute(
             'srcset',
             new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
-            `has ${type} with a width of 1x`
+            `has ${type} with a width of 2x`
           );
       }
     });
@@ -147,7 +147,7 @@ module('Acceptance | local images', function (hooks) {
           .hasAttribute(
             'srcset',
             new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
-            `has ${type} with a width of 1x`
+            `has ${type} with a width of 2x`
           );
       }
     });
@@ -183,7 +183,7 @@ module('Acceptance | local images', function (hooks) {
           .hasAttribute(
             'srcset',
             new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
-            `has ${type} with a width of 1x`
+            `has ${type} with a width of 2x`
           );
       }
     });
@@ -218,7 +218,7 @@ module('Acceptance | local images', function (hooks) {
           .hasAttribute(
             'srcset',
             new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
-            `has ${type} with a width of 1x`
+            `has ${type} with a width of 2x`
           );
       }
     });

apps/wc-lit/.gitignore

@@ -22,3 +22,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

apps/wc-lit/package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
   },
   "dependencies": {
     "@responsive-image/cdn": "workspace:*",
@@ -15,7 +17,9 @@
     "lit": "^3.2.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.48.2",
     "@responsive-image/vite-plugin": "workspace:*",
+    "@types/node": "22.9.0",
     "typescript": "5.6.3",
     "vite": "5.4.10"
   }

apps/wc-lit/playwright.config.ts

@@ -0,0 +1,75 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+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. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  // retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:4173',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+
+    testIdAttribute: '',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    // serve the prod build, as the dev build uses vite middleware URLs for images that we don't want in tests
+    command: 'pnpm build && pnpm preview',
+    url: 'http://localhost:4173',
+  },
+});

apps/wc-lit/src/app.ts

@@ -41,7 +41,7 @@ export class MyApp extends LitElement {
 
       <h2>Local</h2>
 
-      <responsive-image .src=${image}></responsive-image>
+      <responsive-image .src=${image} data-test-local-image="responsive"></responsive-image>
       <responsive-image
         .src=${image}
         width=320
@@ -75,6 +75,11 @@ export class MyApp extends LitElement {
     `;
   }
 
+  // no shadow DOM needed
+  protected createRenderRoot() {
+    return this;
+  }
+
   static styles = css``;
 }
 

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

@@ -0,0 +1,214 @@
+import { test, expect } from '@playwright/test';
+
+const sizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+const imageTypes = [
+  ['jpeg', 'jpg'],
+  ['webp', 'webp'],
+];
+
+test('responsive layout', async ({ page }) => {
+  await page.goto('/');
+
+  const img = page.locator('[data-test-local-image="responsive"] img');
+
+  await expect(img).toHaveClass(/ri-responsive/);
+  await expect(img).toHaveAttribute(
+    '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');
+
+  for (const [type, ext] of imageTypes) {
+    for (const size of sizes) {
+      await expect(
+        picture.locator(`source[type="image/${type}"]`),
+        `has ${type} with a width of ${size}`,
+      ).toHaveAttribute(
+        'srcset',
+        new RegExp(`/assets/aurora-${size}w(-[a-zA-Z0-9-_]+)?.${ext} ${size}w`),
+      );
+    }
+  }
+});
+
+test('fixed layout', async ({ page }) => {
+  await page.goto('/');
+
+  const img = page.locator('[data-test-local-image="fixed"] img');
+
+  await expect(img).toHaveClass(/ri-fixed/);
+  await expect(img).toHaveAttribute(
+    'src',
+    new RegExp(`/assets/aurora-[0-9]+w(-[a-zA-Z0-9-_]+)?.jpg`),
+  );
+  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');
+
+  for (const [type, ext] of imageTypes) {
+    for (const size of sizes) {
+      await expect(
+        picture.locator(`source[type="image/${type}"]`),
+        `has ${type} with a width of 1x`,
+      ).toHaveAttribute(
+        'srcset',
+        new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 1x`),
+      );
+
+      await expect(
+        picture.locator(`source[type="image/${type}"]`),
+        `has ${type} with a width of 2x`,
+      ).toHaveAttribute(
+        'srcset',
+        new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
+      );
+    }
+  }
+});
+
+test('fixed layout w/ aspect', async ({ page }) => {
+  await page.goto('/');
+
+  const img = page.locator('[data-test-local-image="fixed,aspect"] img');
+
+  await expect(img).toHaveClass(/ri-fixed/);
+  await expect(img).toHaveAttribute(
+    'src',
+    new RegExp(`/assets/aurora-[0-9]+w(-[a-zA-Z0-9-_]+)?.jpg`),
+  );
+  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');
+
+  for (const [type, ext] of imageTypes) {
+    for (const size of sizes) {
+      await expect(
+        picture.locator(`source[type="image/${type}"]`),
+        `has ${type} with a width of 1x`,
+      ).toHaveAttribute(
+        'srcset',
+        new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 1x`),
+      );
+
+      await expect(
+        picture.locator(`source[type="image/${type}"]`),
+        `has ${type} with a width of 2x`,
+      ).toHaveAttribute(
+        'srcset',
+        new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
+      );
+    }
+  }
+});
+
+test.describe('LQIP', () => {
+  test('color', async ({ page }) => {
+    await page.goto('/');
+
+    const img = page.locator('[data-test-local-image="fixed,lqip-color"] img');
+
+    await expect(img).toHaveClass(/ri-fixed/);
+    await expect(img).toHaveAttribute(
+      'src',
+      new RegExp(`/assets/aurora-[0-9]+w(-[a-zA-Z0-9-_]+)?.jpg`),
+    );
+
+    const picture = page.locator('[data-test-local-image="fixed"] picture');
+
+    for (const [type, ext] of imageTypes) {
+      for (const size of sizes) {
+        await expect(
+          picture.locator(`source[type="image/${type}"]`),
+          `has ${type} with a width of 1x`,
+        ).toHaveAttribute(
+          'srcset',
+          new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 1x`),
+        );
+
+        await expect(
+          picture.locator(`source[type="image/${type}"]`),
+          `has ${type} with a width of 2x`,
+        ).toHaveAttribute(
+          'srcset',
+          new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
+        );
+      }
+    }
+  });
+
+  test('inline', async ({ page }) => {
+    await page.goto('/');
+
+    const img = page.locator('[data-test-local-image="fixed,lqip-inline"] img');
+
+    await expect(img).toHaveClass(/ri-fixed/);
+    await expect(img).toHaveAttribute(
+      'src',
+      new RegExp(`/assets/aurora-[0-9]+w(-[a-zA-Z0-9-_]+)?.jpg`),
+    );
+
+    const picture = page.locator('[data-test-local-image="fixed"] picture');
+
+    for (const [type, ext] of imageTypes) {
+      for (const size of sizes) {
+        await expect(
+          picture.locator(`source[type="image/${type}"]`),
+          `has ${type} with a width of 1x`,
+        ).toHaveAttribute(
+          'srcset',
+          new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 1x`),
+        );
+
+        await expect(
+          picture.locator(`source[type="image/${type}"]`),
+          `has ${type} with a width of 2x`,
+        ).toHaveAttribute(
+          'srcset',
+          new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
+        );
+      }
+    }
+  });
+
+  test('blurhash', async ({ page }) => {
+    await page.goto('/');
+
+    const img = page.locator(
+      '[data-test-local-image="fixed,lqip-blurhash"] img',
+    );
+
+    await expect(img).toHaveClass(/ri-fixed/);
+    await expect(img).toHaveAttribute(
+      'src',
+      new RegExp(`/assets/aurora-[0-9]+w(-[a-zA-Z0-9-_]+)?.jpg`),
+    );
+
+    const picture = page.locator('[data-test-local-image="fixed"] picture');
+
+    for (const [type, ext] of imageTypes) {
+      for (const size of sizes) {
+        await expect(
+          picture.locator(`source[type="image/${type}"]`),
+          `has ${type} with a width of 1x`,
+        ).toHaveAttribute(
+          'srcset',
+          new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 1x`),
+        );
+
+        await expect(
+          picture.locator(`source[type="image/${type}"]`),
+          `has ${type} with a width of 2x`,
+        ).toHaveAttribute(
+          'srcset',
+          new RegExp(`/assets/aurora-640w(-[a-zA-Z0-9-_]+)?.${ext} 2x`),
+        );
+      }
+    }
+  });
+});