test: Add a browser runner playgrounds with vue

[dprevost-LMI]

The browser runner uses only the expect library when registering custom wdio matchers, which makes things tricky!
Adding a playground to test this configuration

[greptile-apps]

Greptile Summary

The PR adds a Vue-based WebdriverIO browser-runner playground with component interaction and matcher coverage.

• Adds a Vue component and browser-runner test suite.
• Adds workspace configuration, dependencies, TypeScript, and ESLint setup.
• Updates the parent playground workspace and dependency lock.

Confidence Score: 3/5

The PR is not yet safe to merge because the browser-runner style test remains guaranteed to fail and the nested lockfile still misrepresents the package dependency graph.

The test expects Tailwind-generated styling without loading Tailwind, while npm commands launched inside the new playground can consume a stale nested lockfile that omits the playground and its dependencies.

Files Needing Attention: playgrounds/browser-runner/test/specs/vue.test.ts, playgrounds/browser-runner/package-lock.json

Important Files Changed

Filename	Overview
playgrounds/browser-runner/test/specs/vue.test.ts	Adds Vue interaction and style assertions, but the Tailwind color assertion remains unsupported by the playground configuration.
playgrounds/browser-runner/package-lock.json	The nested lockfile remains stale and does not describe the browser-runner package or its dependencies.
playgrounds/package-lock.json	Updates the authoritative parent lockfile to include the browser-runner workspace and dependency graph.
playgrounds/browser-runner/wdio.conf.ts	Configures the WebdriverIO browser runner with the Vue preset and platform-specific browser capabilities.
playgrounds/browser-runner/components/Component.vue	Adds the counter component exercised by the browser-runner tests.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  Test["vue.test.ts"] --> Render["Vue Testing Library / Vue Test Utils"]
  Render --> Component["Component.vue"]
  Test --> WDIO["WebdriverIO browser runner"]
  WDIO --> Matchers["expect-webdriverio matchers"]

Loading

_{Reviews (2): Last reviewed commit: "Ensure to override all occurences of `ex..." | Re-trigger Greptile}

[greptile-apps]

Tailwind style rule is absent

When this test runs, the component uses text-amber-600 without any Tailwind dependency, generated stylesheet, or Vite plugin, so the paragraph retains its default color and the toHaveStyle assertion fails.

[dprevost-LMI]

Can you help set up that?

[greptile-apps]

Here's what needs to be added to make the Tailwind test pass. The wdio.conf.ts uses the browser runner's vue preset, which runs through Vite — so you just need to wire in Tailwind's Vite plugin and a CSS entry point.

1. Add the dependency to package.json:

Suggested change

	it('should support tailwindcss', async () => {
	const { getByText } = render(Component)
	const elem = await $(getByText('Times clicked: 0'))
	await expect(elem).toHaveStyle({ color: 'rgba(217,119,6,1)' })
	"devDependencies": {
	"vite": "^5.4.21",
	"@testing-library/vue": "^8.1.0",
	"@vue/test-utils": "^2.4.11",
	"eslint-plugin-mocha": "^11.3.0",
	"@wdio/browser-runner": "^9.30.1",
	"@vitejs/plugin-vue": "^5.2.4",
	"expect": "^30.4.1",
	"tailwindcss": "^4.0.0",
	"@tailwindcss/vite": "^4.0.0"
	},

2. Create playgrounds/browser-runner/src/tailwind.css (or any path you prefer):

@import "tailwindcss";

3. Update wdio.conf.ts to pass a custom Vite config that loads the plugin and the CSS:

import tailwindcss from '@tailwindcss/vite'

// inside the runner config:
runner: ['browser', {
    preset: 'vue',
    viteConfig: {
        plugins: [tailwindcss()],
    },
}],

4. Import the CSS in your test file so Vite includes it in the bundle:

import '../src/tailwind.css'   // add near the top of vue.test.ts

This is the Tailwind v4 approach (Vite plugin only, no postcss.config.js needed). If you want to stay on v3, swap to tailwindcss + autoprefixer in a postcss.config.js and use @tailwind base/components/utilities in the CSS file instead.

[dprevost-LMI]

@greptileai, how can I override the dependencies of the browser-runner that spawns a node_module at runtime?

[greptile-apps]

The PR's approach is using npm overrides in the workspace root playgrounds/package.json. For runtime-spawned modules (like the Vite dev server the browser-runner spins up), npm overrides propagate through the entire dependency tree, so you can redirect any transitive dependency to your local version:

// playgrounds/package.json
"overrides": {
  "@wdio/browser-runner": {
    "expect-webdriverio": "$expect-webdriverio"
  }
}

The $expect-webdriverio syntax is an npm alias that references the local workspace version defined in devDependencies.

For deeper Vite-level control (if the browser-runner's bundler resolves modules independently of npm), you can use the commented-out viteConfig in wdio.conf.ts to add explicit aliases:

runner: ['browser', {
    preset: 'vue',
    viteConfig: {
        resolve: {
            alias: {
                'expect-webdriverio': path.resolve(__dirname, '../../src/index.ts')
            }
        }
    }
}],

This forces Vite to use your local source directly, bypassing whatever node_modules copy the browser-runner would otherwise resolve at runtime. The npm override handles the Node.js side; the Vite alias handles the browser bundle side.

The tricky part here (per the PR description) is that the browser-runner registers matchers using only the bare expect package from Jest — not expect-webdriverio. That's why playgrounds/browser-runner/package.json also has a separate overrides for the expect version itself.

[dprevost-LMI]

@greptileai, can you help fix the issue below?

[{
	"resource": expect-webdriverio/playgrounds/browser-runner/test/specs/vue.test.ts",
	"owner": "typescript",
	"code": "2307",
	"severity": 8,
	"message": "Cannot find module '../../components/Component.vue' or its corresponding type declarations.",
	"source": "ts",
	"startLineNumber": 4,
	"startColumn": 23,
	"endLineNumber": 4,
	"endColumn": 55,
	"modelVersionId": 1,
	"origin": "extHost1"
}]

[greptile-apps]

The tsconfig.json doesn't include a Vue shim, so TypeScript can't resolve *.vue imports. Two changes needed:

1. Create playgrounds/browser-runner/shims-vue.d.ts:

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
  export default component
}

2. Add the shim to tsconfig.json's include:

  "include": [
    "test/**/*.ts",
    "wdio.conf.ts",
    "shims-vue.d.ts"
  ]

The shim tells TypeScript how to type any *.vue file import. Without it, TS has no type declaration for that module and throws error 2307.