test(e2e): initial commit to setup playwright with devtools package

.github/workflows/playwright.yml

@@ -0,0 +1,29 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main]
+  pull_request:
+  workflow_dispatch:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm install -g pnpm && pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Build
+        run: pnpm run build
+      - name: Run Playwright tests
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -53,3 +53,7 @@ Temporary Items
 packages/devtools/README.md
 
 clones
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

local.ts

@@ -22,13 +22,14 @@ import { defineNuxtModule, logger } from '@nuxt/kit'
 import { getPort } from 'get-port-please'
 import { resolve } from 'pathe'
 import { searchForWorkspaceRoot } from 'vite'
-import { defaultOptions } from './packages/devtools/src/constant'
+import { CLIENT_BASE, defaultOptions } from './packages/devtools/src/constant'
 import { packageDir } from './packages/devtools/src/dirs'
 import { enableModule } from './packages/devtools/src/module-main'
 import { startSubprocess } from './packages/devtools-kit/src/index'
 
 export type { ModuleOptions }
 
+export const clientRouteName = '/__nuxt_devtools__/client'
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: '@nuxt/devtools',
@@ -45,7 +46,7 @@ export default defineNuxtModule<ModuleOptions>({
       // add proxy to client
       config.server.proxy ||= {}
       // TODO: ws proxy is not working
-      config.server.proxy['/__nuxt_devtools__/client'] = {
+      config.server.proxy[CLIENT_BASE] = {
         target: `http://localhost:${PORT}`,
         changeOrigin: true,
         followRedirects: true,

package.json

@@ -16,8 +16,10 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "release": "pnpm test && bumpp -r -x \"pnpm run changelog\" --all",
     "test": "pnpm lint",
+    "test:e2e": "pnpm playwright test",
     "docs": "nuxi dev docs",
     "docs:build": "CI=true nuxi generate docs",
+    "fixture:empty": "pnpm -C playgrounds/empty run dev",
     "typecheck": "vue-tsc --noEmit",
     "postinstall": "npx simple-git-hooks && pnpm -C docs install",
     "prepare": "pnpm -r --filter=\"./packages/*\" run dev:prepare"
@@ -31,6 +33,7 @@
     "@nuxt/module-builder": "catalog:",
     "@nuxt/schema": "catalog:",
     "@opentelemetry/api": "catalog:",
+    "@playwright/test": "catalog:",
     "@types/markdown-it": "catalog:",
     "@types/node": "catalog:",
     "@types/which": "catalog:",

packages/devtools/client/pages/index.vue

@@ -27,9 +27,9 @@ function visit() {
 <template>
   <NPanelGrids flex="~ col" relative h-screen w-full>
     <div flex="~ auto col gap3" items-center justify-center text-center>
-      <p my2 text-3em text-primary font-bold font-stylish>
+      <h1 my2 text-3em text-primary font-bold font-stylish aria-label="Nuxt DevTools Welcome">
         👋 Hi there, welcome to Nuxt DevTools!
-      </p>
+      </h1>
       <p max-w-190 text-lg>
         <NuxtLogo mr-0.5 inline-block h-5 translate-y--1.1 align-mid /> is a set of visual tools that help you to know your Nuxt app better, and enhance your
         development experience with Nuxt. Enjoy!<br>
@@ -41,7 +41,7 @@ function visit() {
         </NLink>
       </p>
 
-      <NButton to="/modules/overview" n="lg primary" @click="visit">
+      <NButton to="/modules/overview" n="lg primary" aria-label="Get Started" @click="visit">
         <span>Get Started</span>
       </NButton>
     </div>

packages/devtools/client/pages/modules/overview.vue

@@ -52,12 +52,11 @@ function authorize() {
 
       <!-- Banner -->
       <div flex="~ col" mt-5 items-center md:mt-20>
-        <NuxtLink
-          flex="~" mt--10 items-center justify-center
-          to="https://devtools.nuxt.com/" target="_blank"
-        >
-          <NuxtLogo h-10 />
-        </NuxtLink>
+        <h1 aria-label="Nuxt DevTools">
+          <NuxtLink flex="~" mt--10 items-center justify-center to="https://devtools.nuxt.com/" target="_blank">
+            <NuxtLogo h-10 />
+          </NuxtLink>
+        </h1>
         <button mb6 mt3 text-center text-sm flex="~ gap-1 wrap" @click="goIntro">
           <span op40>
             Nuxt DevTools
@@ -147,8 +146,8 @@ function authorize() {
       </div>
       <div flex="~ gap-6 wrap" mt-5 items-center justify-center>
         <a
-          href="https://github.com/nuxt/devtools" target="_blank" flex="~ gap1" items-center op50 hover="op100 text-blue"
-          transition
+          href="https://github.com/nuxt/devtools" target="_blank" flex="~ gap1" items-center op50
+          hover="op100 text-blue" transition
         >
           <div i-carbon-star />
           Star on GitHub

packages/devtools/smoke.e2e.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test'
+
+test('DevTools renders', async ({ page }) => {
+  await page.goto('./', { waitUntil: 'networkidle' })
+
+  expect(new URL(page.url()).pathname).toBe('/__nuxt_devtools__/client')
+
+  await page.waitForTimeout(2000) // TODO: A smarter wait for loading state
+
+  // Expect a heading to be visible (using this as a smoke test)
+  const welcome = await page.getByRole('heading', { name: 'Nuxt DevTools Welcome' })
+  expect(welcome).toBeVisible()
+
+  const getStarted = await page.getByRole('link', { name: 'Get Started' })
+  expect(getStarted).toBeVisible()
+
+  await getStarted.click()
+})

packages/devtools/src/constant.ts

@@ -5,6 +5,8 @@ export const WS_EVENT_NAME = 'nuxt:devtools:rpc'
 
 const isSandboxed = provider === 'stackblitz' || provider === 'codesandbox'
 
+export const CLIENT_BASE = '__nuxt_devtools__/client'
+
 export const defaultOptions: ModuleOptions = {
   enabled: undefined, // determine multiple conditions
   componentInspector: true,

packages/devtools/src/runtime/plugins/view/client.ts

@@ -15,6 +15,7 @@ import { popupWindow, state } from './state'
 // eslint-disable-next-line ts/ban-ts-comment
 // @ts-ignore tsconfig
 import { useAppConfig, useRuntimeConfig } from '#imports'
+import { CLIENT_BASE } from '../../../constant'
 
 const clientRef = shallowRef<NuxtDevtoolsHostClient>()
 
@@ -126,8 +127,7 @@ export async function setupDevToolsClient({
   function getIframe() {
     if (!iframe) {
       const runtimeConfig = useRuntimeConfig()
-      const CLIENT_BASE = '/__nuxt_devtools__/client'
-      const CLIENT_PATH = `${runtimeConfig.app.baseURL.replace(CLIENT_BASE, '/')}${CLIENT_BASE}`.replace(/\/+/g, '/')
+      const CLIENT_PATH = `/${runtimeConfig.app.baseURL.replace(CLIENT_BASE, '/')}${CLIENT_BASE}`.replace(/\/+/g, '/')
       const initialUrl = CLIENT_PATH + state.value.route
       iframe = document.createElement('iframe')
 

playwright.config.ts

@@ -0,0 +1,88 @@
+import { defineConfig, devices } from '@playwright/test'
+import { CLIENT_BASE } from './packages/devtools/src/constant'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './packages',
+  testMatch: '**/*.e2e.spec.ts',
+  /* 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:3000/${CLIENT_BASE}/`,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* 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: 'pnpm run fixture:empty',
+
+    // Wait for a 2XX response for this URL
+    // before considering the server running.
+    url: `http://localhost:3000/${CLIENT_BASE}`,
+
+    stdout: 'pipe',
+    stderr: 'pipe',
+
+    reuseExistingServer: !process.env.CI,
+  },
+})