fix: regression in browser runner + add playgrounds with vue

.github/workflows/e2e.yml

@@ -31,7 +31,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        workspace: [jasmine, jest, multi-remote-mocha]
+        workspace: [jasmine, jest, multi-remote-mocha, browser-runner]
     steps:
       - uses: actions/checkout@v7
       - uses: actions/setup-node@v7

docs/Framework.md

@@ -305,3 +305,7 @@ describe('My tests', async () => {
 ### Cucumber
 
 More details to come. In short, when paired with [`@wdio/cucumber-framework`](https://www.npmjs.com/package/@wdio/cucumber-framework), you can use WebDriverIO's `expect` library seamlessly within your Cucumber step definitions and [Gherkin-based](https://www.npmjs.com/package/@cucumber/gherkin) tests.
+
+### Browser Runner
+
+Browser Runner is a special case that relies on standard `expect` and only registers `expect-webdriverio` matchers. Because it does not fully leverage `expect-webdriverio`, features such as `DefaultOption`, `SoftAssertion`, `expect.oneOf`, and `some` are currently unsupported.

docs/MultipleElements.md

@@ -35,6 +35,10 @@ before: function (_capabilities, _specs) {
   - For `containing` use Asymmetric Matchers (`expect.stringContaining('Example')`)
 - Passing an array of "containing" values is a legacy behavior and only used by default with `toHaveText` when `useToHaveTextStrictMultiElementsCompareStrategy` is disabled.
 
+### Browser Runner
+
+Since the Browser Runner uses standard `expect` by only extending the `expect-webdriverio` matchers, `expect.oneOf` and `some` are not currently supported.
+
 ## Supported types
 
 You can pass any of these element types to `expect`:

playgrounds/browser-runner/README.md

@@ -0,0 +1,7 @@
+# Browser Runner Playground
+
+This playground project uses the local build of `expect-webdriverio` with the Browser Runner to test integration with vue.
+
+## Framework
+
+Browser runner is a special case not relying on the `expect-webdriverio` configuration per see. It actual rely mainly on `expect` and only register wdio custom matchers using `expect` lib `expect.extend()` and NOT the one from `expect-webdriverio`!

playgrounds/browser-runner/components/Component.vue

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <p class="text-amber-600">Times clicked: {{ count }}</p>
+        <button @click="increment">increment</button>
+    </div>
+</template>
+
+<script>
+export default {
+    data: () => ({
+        count: 0,
+    }),
+
+    methods: {
+        increment() {
+            this.count++
+        },
+    },
+}
+</script>

playgrounds/browser-runner/eslint.config.mjs

@@ -0,0 +1,33 @@
+
+import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import mochaPlugin from 'eslint-plugin-mocha';
+
+export default {
+  files: ['**/*.ts', '**/*.js'],
+  languageOptions: {
+    parser: tsParser,
+    parserOptions: {
+      project: './tsconfig.json',
+      sourceType: 'module',
+      ecmaVersion: 2021,
+    },
+    globals: {
+      NodeJS: true,
+      require: true,
+      module: true,
+      __dirname: true,
+      process: true,
+    },
+  },
+  plugins: {
+    '@typescript-eslint': tsEslintPlugin,
+    'mocha': mochaPlugin,
+  },
+  rules: {
+    ...tsEslintPlugin.configs['recommended'].rules,
+    '@typescript-eslint/no-floating-promises': 'error',
+    'mocha/no-exclusive-tests': 'error',
+    'mocha/no-identical-title': 'error',
+  },
+};

playgrounds/browser-runner/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "expect-wdio-playground-browser-runner",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Playground project for testing expect-webdriverio",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "wdio run wdio.conf.ts",
+    "lint": "eslint .",
+    "checks:all": "npm run typecheck && npm run lint && npm test"
+  },
+  "devDependencies": {
+    "vite": "^5.4.21",
+    "@testing-library/vue": "^8.1.0",
+    "@vue/test-utils": "^2.4.11",
+    "eslint-plugin-mocha": "^11.3.0",
+    "@vitejs/plugin-vue": "^5.2.4"
+  }
+}

playgrounds/browser-runner/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}

playgrounds/browser-runner/test/specs/vue.test.ts

@@ -0,0 +1,73 @@
+import { $, expect } from '@wdio/globals'
+import { render } from '@testing-library/vue'
+import Component from '../../components/Component.vue'
+import { some } from 'expect-webdriverio'
+
+describe('Vue Component Testing', () => {
+
+    describe('when button clicked', () => {
+        beforeEach(async () => {
+            const { getByText } = render(Component)
+
+            const button = await $(getByText('increment'))
+            await button.click()
+        })
+
+        describe('single element support', () => {
+            it('to exists', async () => {
+                await expect($('p=Times clicked: 1')).toExist()
+                await expect(await $('p=Times clicked: 1')).toExist()
+                await expect($('p=Times clicked: 2')).not.toExist()
+            })
+
+            it('to have text', async () => {
+                await expect($('p=Times clicked: 1')).toHaveText('Times clicked: 1')
+                await expect(await $('p=Times clicked: 1')).toHaveText('Times clicked: 1')
+                await expect($('p=Times clicked: 1')).toHaveText(['Times clicked: 1', 'Times clicked: 0'])
+                // TODO oneOf matcher is not working with toHaveText, need to investigate why
+                //await expect(await $('p=Times clicked: 1')).toHaveText(expect.oneOf('Times clicked: 1', 'Times clicked: 0'))
+            })
+
+            it.skip('to have attribute', async () => {
+                await expect($('p=Times clicked: 1')).toHaveAttribute('class')
+                await expect($('p=Times clicked: 1')).toHaveAttribute('class', undefined, { wait: 0 })
+                await expect($('p=Times clicked: 1')).toHaveAttribute('class', expect.anything(), { wait: 0 })
+            })
+        })
+
+        describe('multi-element support', () => {
+            it('to exists', async () => {
+                await expect($$('p=Times clicked: 1')).toExist()
+                await expect(await $$('p=Times clicked: 2')).not.toExist()
+            })
+
+            it('to have text', async () => {
+                await expect($$('p=Times clicked: 1')).toHaveText('Times clicked: 1')
+                await expect(await $$('p=Times clicked: 1')).toHaveText(['Times clicked: 1', 'Times clicked: 0'])
+            })
+
+            it.skip('to have some text', async () => {
+                await expect(some($$('p=Times clicked: 1'))).toHaveText('Times clicked: 1',  { featureFlags: { 'useToHaveTextStrictMultiElementsCompareStrategy': true } })
+                // TODO oneOf matcher is not working with toHaveText, need to investigate why
+                //await expect(await $('p=Times clicked: 1')).toHaveText(expect.oneOf('Times clicked: 1', 'Times clicked: 0'))
+            })
+
+            it('to have any text', async () => {
+                await expect($$('p=Times clicked: 1')).toHaveText(expect.anything(),  { featureFlags: { 'useToHaveTextStrictMultiElementsCompareStrategy': true } })
+            })
+
+            it.skip('to have attribute', async () => {
+                await expect($$('p=Times clicked: 1')).toHaveAttribute('class')
+                await expect(await $$('p=Times clicked: 1')).toHaveAttribute('class', undefined, { wait: 0 })
+                await expect($$('p=Times clicked: 1')).toHaveAttribute('class', expect.anything(), { wait: 0 })
+                await expect($$('p=Times clicked: 1')).toHaveAttribute('class', expect.anything(), { wait: 0 })
+            })
+        })
+
+        // TODO to fix
+        it.skip('should support tailwindcss', async () => {
+            const elem = await $('p=Times clicked: 1')
+            await expect(elem).toHaveStyle({ color: 'rgba(217,119,6,1)' })
+        })
+    })
+})

playgrounds/browser-runner/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "types": [
+      "node",
+      "expect-webdriverio/expect-global", // Pull the development version from this project
+      "expect-webdriverio", // Pull the development version from this project
+      "@wdio/mocha-framework", // Must be listed after development versions so they take priority
+      "@wdio/globals/types", // Must be listed after development versions so they take priority
+    ],
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "strict": true
+  },
+  "include": [
+    "test/**/*.ts",
+    "wdio.conf.ts",
+    "shims-vue.d.ts",
+  ]
+}

playgrounds/browser-runner/wdio.conf.ts

@@ -0,0 +1,68 @@
+export const config: WebdriverIO.Config = {
+
+    //
+    // ====================
+    // Runner Configuration
+    // ====================
+    //
+    runner: ['browser', { preset: 'vue' }],
+
+    //
+    // ==================
+    // Specify Test Files
+    // ==================
+    //
+    specs: [
+        './test/specs/vue.test.ts',
+    ],
+
+    //
+    // ============
+    // Capabilities
+    // ============
+    //
+    /**
+     * capabilities
+     */
+    capabilities: [{
+        browserName: 'chrome',
+        'goog:chromeOptions': {
+            args: ['--headless', '--disable-gpu']
+        },
+    }],
+
+    /**
+     * test configurations
+     */
+    logLevel: 'trace',
+    framework: 'mocha',
+    reporters: ['spec'],
+
+    mochaOpts: {
+        ui: 'bdd',
+        timeout: 150000,
+    },
+
+    // =====
+    // Hooks
+    // =====
+    //
+    before: () => {
+        // Fail on loading expect-webdriverio, TODO fix this???
+        // setOptions({ wait: 250 })
+        // setDefaultOptions({ wait: 250 })
+        // setFeatureFlags({})
+    },
+    afterTest: async function (test, context, { passed, error }) {
+        if (!passed) {
+        console.log(`Test failed: "${test.title}". Keeping browser open for inspection...`)
+        console.log('error:', error)
+
+        // Pause indefinitely (or set a high timeout like 600000 ms / 10 mins)
+        // await browser.pause(600000)
+
+        // Alternatively, start an interactive REPL session:
+        // await browser.debug()
+        }
+    }
+}