feat: add WebDriverIO support and tests (#8)

* feat: add WebDriverIO support and tests

* docs: update readme test section

* docs: .

Author: userquin

README.md

@@ -39,8 +39,21 @@ const { detect } = require('detect-browser-es')
 ## New Features
 
 - Detect [Happy DOM](https://github.com/capricorn86/happy-dom) and [JSDOM](https://github.com/jsdom/jsdom) when using test environments like [Vitest](https://github.com/vitest-dev/vitest) (check the [test](https://github.com/userquin/detect-browser-es/tree/main/test) folder).
+- Detect [WebDriverIO](https://github.com/webdriverio/webdriverio) when using WebDriverIO tests or test environments like [Vitest](https://github.com/vitest-dev/vitest).
 - ServerInfo via [std-env](https://github.com/unjs/std-env) with [provider](https://github.com/unjs/std-env#provider-detection) and [runtime](https://github.com/unjs/std-env#runtime-detection) detection.
 
+## Testing
+
+To run the tests, from root folder run `nr test`, the script will run:
+- the original tests from `detect-browser`
+- Happy DOM and JSDOM tests, except WebDriverIO detection
+
+To test WebDriverIO detection, run one of the following commands (requires Vitest v1.0.0-beta.2, not yet released, tests will not work):
+- `nr wdio-chrome`: Chrome must be installed
+- `nr wdio-edge`: Edge must be installed
+- `nr wdio-firefox`: Firefox must be installed
+- `nr wdio-safari`: Safari must be installed and only on macOS machine.
+
 ## License
 
 [MIT](./LICENSE)

browser-test/browser.test.ts

@@ -4,59 +4,23 @@ import { detect } from '../src'
 
 // TODO: update to vitest 1.beta.2: will not work with 1.beta.1
 
-const provider = env.VITE_PROVIDER
 const browser = env.VITE_BROWSER
 
-describe(`Browser Detection test: ${provider}`, () => {
-  describe.skipIf(platform !== 'win32')('Windows', () => {
-    test('User Agent found', () => {
-      expect(typeof navigator).toBeDefined()
-      expect(typeof navigator?.userAgent).toBeDefined()
-    })
-    test.skipIf(browser !== 'chrome')('Chrome', () => {
-      expect(detect()).toBe('chrome')
-    })
-    test.skipIf(provider === 'webdriverio' || browser !== 'chromium')('Chromium', () => {
-      expect(detect()).toBe('chromium')
-    })
-    test.skipIf(browser !== 'edge')('Edge', () => {
-      expect(detect()).toBe('edge')
-    })
-    test.skipIf(browser !== 'firefox')('FireFox', () => {
-      expect(detect()).toBe('firefox')
-    })
-  })
-  /*
-  describe.skipIf(platform !== 'darwin')('MacOS', () => {
-    test('User Agent found', () => {
-      expect(typeof navigator).toBeDefined()
-      expect(typeof navigator?.userAgent).toBeDefined()
-    })
-    test.skipIf(browser !== 'chrome')('Chrome', () => {
-      expect(detect()).toBe('chrome')
-    })
-    test.skipIf(provider === 'webdriverio' || browser !== 'chromium')('Chromium', () => {
-      expect(detect()).toBe('chromium')
-    })
-    test.skipIf(browser !== 'firefox')('FireFox', () => {
-      expect(detect()).toBe('firefox')
-    })
-  })
+describe('Browser Detection test', () => {
   test('User Agent found', () => {
     expect(typeof navigator).toBeDefined()
     expect(typeof navigator?.userAgent).toBeDefined()
   })
   test.skipIf(browser !== 'chrome')('Chrome', () => {
-    expect(detect()).toBe('chrome')
-  })
-  test.skipIf(provider === 'webdriverio' || browser !== 'chromium')('Chromium', () => {
-    expect(detect()).toBe('chromium')
+    expect(detect()?.name).toBe('chrome')
   })
   test.skipIf(browser !== 'edge')('Edge', () => {
-    expect(detect()).toBe('edge')
+    expect(detect()?.name).toBe('edge')
   })
   test.skipIf(browser !== 'firefox')('FireFox', () => {
-    expect(detect()).toBe('firefox')
+    expect(detect()?.name).toBe('firefox')
+  })
+  test.skipIf(platform !== 'darwin' || browser !== 'safari')('FireFox', () => {
+    expect(detect()?.name).toBe('safari')
   })
-   */
 })

package.json

@@ -37,6 +37,7 @@
     "wdio-chrome": "BROWSER=chrome vitest --c vitest-browser.config.mts",
     "wdio-edge": "BROWSER=edge vitest --c vitest-browser.config.mts",
     "wdio-firefox": "BROWSER=firefox vitest --c vitest-browser.config.mts",
+    "wdio-safari": "BROWSER=safari vitest --c vitest-browser.config.mts",
     "wdio-test": "pnpm run wdio-chrome && pnpm run wdio-edge && pnpm run wdio-firefox"
   },
   "dependencies": {

src/index.ts

@@ -13,6 +13,7 @@ export type DetectedInfoType =
   | 'node'
   | 'jsdom'
   | 'happy-dom'
+  | 'webdriverio'
   | 'bot-device'
   | 'bot'
   | 'react-native'
@@ -105,6 +106,16 @@ implements DetectedInfo<'happy-dom', Browser, OperatingSystem | null, string> {
   ) {}
 }
 
+export class WebDriverIOInfo
+implements DetectedInfo<'webdriverio', Browser, OperatingSystem | null, string> {
+  public readonly type = 'webdriverio'
+  constructor(
+    public readonly name: Browser,
+    public readonly version: string,
+    public readonly os: OperatingSystem | null,
+  ) {}
+}
+
 export type Browser =
   | 'aol'
   | 'edge'
@@ -138,6 +149,7 @@ export type Browser =
   | 'searchbot'
   | 'jsdom'
   | 'happy-dom'
+  | 'webdriverio'
 export type OperatingSystem =
   | 'iOS'
   | 'Android OS'
@@ -247,17 +259,7 @@ const operatingSystemRules: OperatingSystemRule[] = [
   ['OS/2', /OS\/2/],
 ]
 
-export function detect(
-  userAgent?: string,
-):
-  | BrowserInfo
-  | SearchBotDeviceInfo
-  | BotInfo
-  | ServerInfo
-  | ReactNativeInfo
-  | JSDOMInfo
-  | HappyDomInfo
-  | null {
+export function detect(userAgent?: string) {
   if (userAgent)
     return parseUserAgent(userAgent)
 
@@ -274,13 +276,21 @@ export function detect(
       return new JSDOMInfo(browser.name, browser.version, browser.os)
   }
 
-  if (typeof window !== 'undefined' && 'happyDOM' in window) {
-    const happyDOM: HappyDOMOptions | undefined = window.happyDOM as unknown as any
-    const ua = happyDOM?.settings?.navigator?.userAgent
-    if (ua) {
-      const browser = parseUserAgent(ua)
+  if (typeof window !== 'undefined') {
+    if ('happyDOM' in window) {
+      const happyDOM: HappyDOMOptions | undefined = window.happyDOM as unknown as any
+      const ua = happyDOM?.settings?.navigator?.userAgent
+      if (ua) {
+        const browser = parseUserAgent(ua)
+        if (browser instanceof BrowserInfo)
+          return new HappyDomInfo(browser.name, browser.version, browser.os)
+      }
+    }
+
+    if ('__wdioSpec__' in window) {
+      const browser = parseUserAgent(navigator.userAgent)
       if (browser instanceof BrowserInfo)
-        return new HappyDomInfo(browser.name, browser.version, browser.os)
+        return new WebDriverIOInfo(browser.name, browser.version, browser.os)
     }
   }
 
@@ -290,7 +300,7 @@ export function detect(
   return getServerVersion()
 }
 
-function matchUserAgent(ua: string): UserAgentMatch {
+function matchUserAgent(ua: string) {
   // opted for using reduce here rather than Array#first with a regex.test call
   // this is primarily because using the reduce we only perform the regex
   // execution once rather than once for the test and for the exec again below
@@ -310,14 +320,12 @@ function matchUserAgent(ua: string): UserAgentMatch {
   )
 }
 
-export function browserName(ua: string): Browser | null {
+export function browserName(ua: string) {
   const data = matchUserAgent(ua)
   return data ? data[0] : null
 }
 
-export function parseUserAgent(
-  ua: string,
-): BrowserInfo | SearchBotDeviceInfo | BotInfo | null {
+export function parseUserAgent(ua: string) {
   const matchedRule: UserAgentMatch = matchUserAgent(ua)
 
   if (!matchedRule)
@@ -346,13 +354,13 @@ export function parseUserAgent(
   const os = detectOS(ua)
   const searchBotMatch = SEARCHBOT_OS_REGEX.exec(ua)
 
-  if (searchBotMatch && searchBotMatch[1])
+  if (searchBotMatch?.[1])
     return new SearchBotDeviceInfo(name, version, os, searchBotMatch[1])
 
   return new BrowserInfo(name, version, os)
 }
 
-export function detectOS(ua: string): OperatingSystem | null {
+export function detectOS(ua: string) {
   for (let ii = 0, count = operatingSystemRules.length; ii < count; ii++) {
     const [os, regex] = operatingSystemRules[ii]
     const match = regex.exec(ua)
@@ -363,12 +371,12 @@ export function detectOS(ua: string): OperatingSystem | null {
   return null
 }
 
-export function getServerVersion(): ServerInfo | null {
+export function getServerVersion() {
   return nodeVersion ? new ServerInfo(`${nodeVersion}`) : null
 }
 
-function createVersionParts(count: number): string[] {
-  const output = []
+function createVersionParts(count: number) {
+  const output: string[] = []
   for (let ii = 0; ii < count; ii++)
     output.push('0')
 

vitest-browser.config.mts

@@ -1,21 +1,20 @@
 import process from 'node:process'
 import { defineConfig } from 'vitest/config'
 
-const provider = process.env.PROVIDER ?? 'webdriverio'
-const name = process.env.BROWSER ?? 'chromium'
+const name = process.env.BROWSER ?? 'chrome'
 
 export default defineConfig({
   define: {
-    'process.env.VITE_PROVIDER': JSON.stringify(provider),
     'process.env.VITE_BROWSER': JSON.stringify(name),
   },
   test: {
     globals: true,
     include: ['browser-test/*.test.ts'],
     browser: {
       enabled: true,
-      provider,
+      provider: 'webdriverio',
       name,
+      headless: true,
     },
   },
 })