e2e : add general assertions and snapshot tests

Ensure consistent results between local and CI by running E2E tests
inside a Playwright Docker container.

Author: MarionGiusti

.github/workflows/e2e.yml

@@ -15,10 +15,10 @@ jobs:
         node-version: lts/*
     - name: Install dependencies
       run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
+    - name: Build Docker image
+      run: docker build -t playwright-tests .
     - name: Run Playwright tests
-      run: npx playwright test
+      run: npm run test:docker
     - uses: actions/upload-artifact@v4
       if: ${{ !cancelled() }}
       with:

CONTRIBUTING.md

@@ -37,3 +37,21 @@ npm run lint
 ```sh
 npm run test
 ```
+
+
+## Run E2E tests
+
+```sh
+npm run test:docker:build
+npm run test:docker
+```
+
+E2E tests are executed inside a Docker container using Playwright, ensuring consistent results between local and CI environments. The Docker image only needs to be built once before running the tests, unless dependencies change.
+
+### Update snapshots
+
+```sh
+npm run test:docker:update
+```
+
+Visual testing via snapshots is supported by Playwright. To update or create new snapshots, run this command.

Dockerfile

@@ -0,0 +1,15 @@
+FROM mcr.microsoft.com/playwright:v1.61.0-noble
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npx playwright install
+
+RUN apt-get update && apt-get install -y \
+  fonts-noto-core \
+  fonts-noto-extra \
+  && rm -rf /var/lib/apt/lists/* \
+  && fc-cache -fv
+
+CMD ["npx", "playwright", "test"]

package.json

@@ -26,7 +26,10 @@
     "typecheck": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-pattern .gitignore",
     "prepare": "husky",
-    "test": "LANG=en_US.UTF-8 vitest --run"
+    "test": "LANG=en_US.UTF-8 vitest --run",
+    "test:docker:build": "docker build -t playwright-tests .",
+    "test:docker": "docker run --rm --ipc=host -v $PWD:$PWD -w $PWD playwright-tests npx playwright test",
+    "test:docker:update": "docker run --rm --ipc=host -v $PWD:$PWD -w $PWD playwright-tests npx playwright test --update-snapshots"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",

playwright.config.ts

@@ -34,46 +34,16 @@ export default defineConfig({
 
   /* 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: {
-  //   command: 'npm run start',
-  //   url: 'http://localhost:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+  },
 });

src/components/Plan.vue

@@ -502,7 +502,7 @@ function updateNodeSize(node: Node, size: [number, number]) {
         </li>
       </ul>
       <div class="ms-auto me-2 small">
-        <a href="https://github.com/dalibo/pev2" target="_blank">
+        <a href="https://github.com/dalibo/pev2" target="_blank" data-testid="version">
           <LogoImage />
           {{ version }}
         </a>

tests/e2e/example.spec.ts

@@ -0,0 +1,185 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://localhost:5173/');
+  await page.getByRole('button', { name: 'Sample Plans' }).click();
+  await page.getByRole('link', { name: 'Simple join (JSON format)' }).click();
+  await page.getByRole('button', { name: 'Submit' }).click();
+});
+
+test('verify plan has title', async ({ page }) => {
+  await expect(page.getByText('Simple join (JSON format)')).toBeVisible();
+});
+
+test('redirects to home when clicking on New Plan link', async ({ page }) => {
+  await page.getByText('New Plan').click();
+  await expect(page).toHaveURL('http://localhost:5173/');
+});
+
+test('redirects to home when clicking pev2 logo', async ({ page }) => {
+  await page.getByText('New Plan').click();
+  await expect(page).toHaveURL('http://localhost:5173/');
+});
+
+test('switches to dark mode', async ({ page }) => {
+  await page.getByTitle('Switch to dark mode').click();
+  await expect(page).toHaveScreenshot('plan_darkMode.png');
+});
+
+test('redirects to About page', async ({ page }) => {
+  await page.getByText('About').click();
+  await expect(page.getByText('Disclaimer')).toBeVisible();
+});
+
+test('opens pev2 GitHub link in a new tab', async ({ page }) => {
+  await page.getByTestId('version').click();
+  const popupPromise = page.waitForEvent('popup');
+  const popup = await popupPromise;
+
+  await expect(popup).toHaveURL('https://github.com/dalibo/pev2');
+});
+
+test.describe('node', () => {
+  test('node box toggle shows and hides tabs', async ({ page }) => {
+    const node = page.locator('.plan-node', { hasText: 'Nested Loop' });
+
+    const toggle = node.getByRole('heading', { name: 'Nested Loop' })
+    const tabs = node.locator('li.nav-item a');
+    
+    //open
+    await toggle.click();
+    await expect(node).toHaveClass(/detailed/);
+    await expect(tabs).toContainText([
+      'General',
+      'IO & Buffers',
+      'Output',
+      'Workers',
+      'Misc',
+    ]);
+    await expect(node.getByRole('link', { name: 'General' })).toHaveClass(/active/);
+    await expect(node.getByRole('link', { name: 'IO & Buffers' })).toHaveClass(/disabled/);
+  
+    //close
+    await toggle.click();
+    await expect(node).not.toHaveClass('detailed');
+  });  
+});
+
+test.describe('plan style', () => {
+  let rightPanel;
+
+  test.beforeEach(async ({ page }) => {
+    rightPanel = page.locator('.splitpanes__pane.plan');
+  });
+
+
+  test('displays plan', async ({ page }) => {
+    const noneButton = rightPanel.getByRole('button', { name: 'none' });
+
+    await expect(noneButton).toHaveClass(/active/)
+    await expect(page).toHaveScreenshot('plan_none.png');
+  });
+  
+  test('displays plan with duration', async ({ page }) => {
+    const durationButton = rightPanel.getByRole('button', { name: 'duration' });
+    await durationButton.click()
+    
+    await expect(durationButton).toHaveClass(/active/)
+    await expect(page).toHaveScreenshot('plan_duration.png');
+  });
+
+  test('displays plan with rows', async ({ page }) => {
+    const rowsButton = rightPanel.getByRole('button', { name: 'rows' });
+    await rowsButton.click()
+    
+    await expect(rowsButton).toHaveClass(/active/)
+    await expect(page).toHaveScreenshot('plan_rows.png');
+  });
+
+  test('displays plan with cost', async ({ page }) => {
+    const costButton = rightPanel.getByRole('button', { name: 'duration' });
+    await costButton.click()
+    
+    await expect(costButton).toHaveClass(/active/)
+    await expect(page).toHaveScreenshot('plan_cost.png');
+  });
+});
+
+test.describe('diagram view', () => {
+  let leftPanel;
+
+  test.beforeEach(async ({ page }) => {
+    leftPanel = page.locator('.diagram');
+  });
+
+  test('selects node', async ({ page }) => {
+    const row = leftPanel.getByRole('row', { name: /Nested Loop/ })
+    const node = page.locator('.plan-node', { hasText: 'Nested Loop' });
+    await row.click();   
+    
+    await expect(row).toHaveClass(/selected/)
+    await expect(node).toHaveClass(/detailed/)
+    await expect(node).toHaveClass(/selected/);
+    await expect(page).toHaveScreenshot('plan_diagram.png');
+  });
+
+  test('selects buffers button in diagram option', async ({ page }) => {
+    const bufferButton = leftPanel.getByRole('button', { name: 'buffers' });
+    await bufferButton.click();
+   
+    await expect(bufferButton).toHaveClass(/active/);
+    await expect(page).toHaveScreenshot('plan_buffers_diagram.png');
+  });
+});
+
+test.describe('plan tabs', () => {
+  let navPills;
+
+  test.beforeEach(async ({ page }) => {
+    navPills = page.locator('.nav.nav-pills');
+  });
+
+  test('redirects to Plan view', async ({ page }) => {
+    const planLink = navPills.getByRole('link', { name: 'Plan' });
+
+    await planLink.click();
+    await expect(planLink).toHaveClass(/active/)
+    await expect(page).toHaveURL(url => url.hash === '#plan')
+  });
+
+  test('redirects to Grid view', async ({ page }) => {
+    const gridLink = navPills.getByRole('link', { name: 'Grid' });
+    
+    await gridLink.click();
+    await expect(gridLink).toHaveClass(/active/)
+    await expect(page).toHaveURL(url => url.hash === '#grid');
+    await expect(page).toHaveScreenshot('plan_gridView.png');
+  });
+
+  test('redirects to Raw view', async ({ page }) => {
+    const rawLink = navPills.getByRole('link', { name: 'Raw' });
+    
+    await rawLink.click();
+    await expect(rawLink).toHaveClass(/active/)
+    await expect(page).toHaveURL(url => url.hash === '#raw')
+    await expect(page).toHaveScreenshot('plan_rawView.png');
+  });
+
+  test('redirects to Query view', async ({ page }) => {
+    const queryLink = navPills.getByRole('link', { name: 'Query' });
+    
+    await queryLink.click();
+    await expect(queryLink).toHaveClass(/active/)
+    await expect(page).toHaveURL(url => url.hash === '#query')
+    await expect(page).toHaveScreenshot('plan_queryView.png');
+  });
+
+  test('redirects to Stats view', async ({ page }) => {
+    const statsLink = navPills.getByRole('link', { name: 'Stats' });
+    
+    await statsLink.click();
+    await expect(statsLink).toHaveClass(/active/)
+    await expect(page).toHaveURL(url => url.hash === '#stats')
+    await expect(page).toHaveScreenshot('plan_statsView.png');
+  });
+});