codeceptjs 4.0.0-rc.16 → 4.0.0-rc.18

package/lib/helper/Playwright.js

@@ -36,7 +36,7 @@ import MultipleElementsFound from './errors/MultipleElementsFound.js'
 import RemoteBrowserConnectionRefused from './errors/RemoteBrowserConnectionRefused.js'
 import Popup from './extras/Popup.js'
 import Console from './extras/Console.js'
-import { findReact, findVue, findByPlaywrightLocator } from './extras/PlaywrightReactVueLocator.js'
+import { findReact, findByPlaywrightLocator } from './extras/PlaywrightReactVueLocator.js'
 import { dropFile } from './scripts/dropFile.js'
 import WebElement from '../element/WebElement.js'
 import { selectElement } from './extras/elementSelection.js'
@@ -4223,13 +4223,10 @@ async function findByRole(context, locator) {
 }
 
 async function findElements(matcher, locator) {
-  // Check if locator is a Locator object with react/vue type, or a raw object with react/vue property
   const isReactLocator = locator.type === 'react' || (locator.locator && locator.locator.react) || locator.react
-  const isVueLocator = locator.type === 'vue' || (locator.locator && locator.locator.vue) || locator.vue
   const isPwLocator = locator.type === 'pw' || (locator.locator && locator.locator.pw) || locator.pw
 
   if (isReactLocator) return findReact(matcher, locator)
-  if (isVueLocator) return findVue(matcher, locator)
   if (isPwLocator) return findByPlaywrightLocator.call(this, matcher, locator)
 
   // Handle role locators with text/exact options (e.g., {role: 'button', text: 'Submit', exact: true})
@@ -4245,7 +4242,6 @@ async function findElements(matcher, locator) {
 
 async function findElement(matcher, locator) {
   if (locator.react) return findReact(matcher, locator)
-  if (locator.vue) return findVue(matcher, locator)
   if (locator.pw) return findByPlaywrightLocator.call(this, matcher, locator)
 
   locator = new Locator(locator, 'css')

package/lib/helper/extras/PlaywrightReactVueLocator.js

@@ -1,52 +1,61 @@
+import fs from 'fs'
+import { fileURLToPath } from 'url'
+
+let resqScript
+
 async function findReact(matcher, locator) {
-  // Handle both Locator objects and raw locator objects
   const reactLocator = locator.locator || locator
-  let _locator = `_react=${reactLocator.react}`;
-  let props = '';
+  const page = typeof matcher.page === 'function' ? matcher.page() : matcher
 
-  if (reactLocator.props) {
-    props += propBuilder(reactLocator.props);
-    _locator += props;
+  if (!resqScript) {
+    resqScript = fs.readFileSync(fileURLToPath(import.meta.resolve('resq'))).toString()
   }
-  return matcher.locator(_locator).all();
-}
+  await page.evaluate(resqScript)
+  await page.evaluate(() => window.resq.waitToLoadReact())
+
+  const arrayHandle = await page.evaluateHandle(
+    ({ selector, props, state }) => {
+      let elements = window.resq.resq$$(selector)
+      if (Object.keys(props).length) elements = elements.byProps(props)
+      if (Object.keys(state).length) elements = elements.byState(state)
+      if (!elements.length) return []
 
-async function findVue(matcher, locator) {
-  // Handle both Locator objects and raw locator objects
-  const vueLocator = locator.locator || locator
-  let _locator = `_vue=${vueLocator.vue}`;
-  let props = '';
+      let nodes = []
+      elements.forEach(element => {
+        let { node, isFragment } = element
+        if (!node) {
+          isFragment = true
+          node = element.children
+        }
+        if (isFragment) nodes = nodes.concat(node)
+        else nodes.push(node)
+      })
+      return [...nodes]
+    },
+    {
+      selector: reactLocator.react,
+      props: reactLocator.props || {},
+      state: reactLocator.state || {},
+    },
+  )
 
-  if (vueLocator.props) {
-    props += propBuilder(vueLocator.props);
-    _locator += props;
+  const properties = await arrayHandle.getProperties()
+  await arrayHandle.dispose()
+  const result = []
+  for (const property of properties.values()) {
+    const elementHandle = property.asElement()
+    if (elementHandle) result.push(elementHandle)
   }
-  return matcher.locator(_locator).all();
+  return result
 }
 
 async function findByPlaywrightLocator(matcher, locator) {
-  // Handle both Locator objects and raw locator objects
   const pwLocator = locator.locator || locator
   if (pwLocator && pwLocator.toString && pwLocator.toString().includes(process.env.testIdAttribute)) {
-    return matcher.getByTestId(pwLocator.pw.value.split('=')[1]);
+    return matcher.getByTestId(pwLocator.pw.value.split('=')[1])
   }
   const pwValue = typeof pwLocator.pw === 'string' ? pwLocator.pw : pwLocator.pw
-  return matcher.locator(pwValue).all();
-}
-
-function propBuilder(props) {
-  let _props = '';
-
-  for (const [key, value] of Object.entries(props)) {
-    if (typeof value === 'object') {
-      for (const [k, v] of Object.entries(value)) {
-        _props += `[${key}.${k} = "${v}"]`;
-      }
-    } else {
-      _props += `[${key} = "${value}"]`;
-    }
-  }
-  return _props;
+  return matcher.locator(pwValue).all()
 }
 
-export { findReact, findVue, findByPlaywrightLocator };
+export { findReact, findByPlaywrightLocator }

package/lib/html.js

@@ -1,5 +1,8 @@
 import { parse, serialize } from 'parse5'
 import { minify } from 'html-minifier-terser'
+import beautify from 'js-beautify'
+
+const { html: html_beautify } = beautify
 
 async function minifyHtml(html) {
   return minify(html, {
@@ -14,6 +17,62 @@ async function minifyHtml(html) {
   })
 }
 
+const TRASH_HTML_CLASSES = /^(text-|color-|flex-|float-|v-|ember-|d-|border-)/
+
+function isTrashClass(className) {
+  if (!className) return true
+  if (/\d/.test(className)) return true
+  if (TRASH_HTML_CLASSES.test(className)) return true
+  if (/(:|__)/.test(className)) return true
+  return false
+}
+
+function filterClassValue(value) {
+  return (value || '')
+    .split(/\s+/)
+    .filter(c => c && !isTrashClass(c))
+    .join(' ')
+}
+
+const DROP_TAGS = new Set(['style', 'noscript'])
+const DROP_ATTRS = new Set(['style'])
+
+function cleanHtml(html) {
+  const document = parse(html)
+
+  function walk(node) {
+    if (!node) return false
+
+    if (DROP_TAGS.has(node.nodeName) || (node.nodeName === 'script' && !(node.attrs || []).some(a => a.name === 'src'))) {
+      const parent = node.parentNode
+      const idx = parent.childNodes.indexOf(node)
+      if (idx >= 0) parent.childNodes.splice(idx, 1)
+      return true
+    }
+
+    if (node.attrs) {
+      node.attrs = node.attrs.filter(attr => {
+        if (DROP_ATTRS.has(attr.name)) return false
+        if (attr.name === 'class') {
+          attr.value = filterClassValue(attr.value)
+          if (!attr.value) return false
+        }
+        return true
+      })
+    }
+
+    if (node.childNodes) {
+      for (let i = node.childNodes.length - 1; i >= 0; i--) {
+        walk(node.childNodes[i])
+      }
+    }
+    return false
+  }
+
+  walk(document)
+  return serialize(document)
+}
+
 const defaultHtmlOpts = {
   interactiveElements: ['a', 'input', 'button', 'select', 'textarea', 'option'],
   textElements: ['label', 'h1', 'h2'],
@@ -28,7 +87,6 @@ function removeNonInteractiveElements(html, opts = {}) {
   // Parse the HTML into a document tree
   const document = parse(html)
 
-  const trashHtmlClasses = /^(text-|color-|flex-|float-|v-|ember-|d-|border-)/
   // Array to store interactive elements
   const removeElements = ['path', 'script']
 
@@ -103,21 +161,10 @@ function removeNonInteractiveElements(html, opts = {}) {
     if (node.attrs) {
       // Filter and keep allowed attributes, accessibility attributes
       node.attrs = node.attrs.filter(attr => {
-        const { name, value } = attr
-        if (name === 'class') {
-          // Remove classes containing digits
-          attr.value = value
-            .split(' ')
-            // remove classes containing digits/
-            .filter(className => !/\d/.test(className))
-            // remove popular trash classes
-            .filter(className => !className.match(trashHtmlClasses))
-            // remove classes with : and __ in them
-            .filter(className => !className.match(/(:|__)/))
-            .join(' ')
+        if (attr.name === 'class') {
+          attr.value = filterClassValue(attr.value)
         }
-
-        return allowedAttrs.includes(name)
+        return allowedAttrs.includes(attr.name)
       })
     }
 
@@ -258,4 +305,28 @@ function simplifyHtmlElement(html, maxLength = 300) {
   return html
 }
 
-export { scanForErrorMessages, removeNonInteractiveElements, splitByChunks, minifyHtml, simplifyHtmlElement }
+async function formatHtml(html) {
+  let processed = html
+  try {
+    processed = await minifyHtml(processed)
+  } catch (e) {
+    // keep raw html if minification fails
+  }
+  try {
+    processed = cleanHtml(processed)
+  } catch (e) {
+    // keep minified html if cleaning fails
+  }
+  try {
+    return html_beautify(processed, {
+      indent_size: 2,
+      wrap_line_length: 0,
+      preserve_newlines: false,
+      end_with_newline: false,
+    })
+  } catch (e) {
+    return processed
+  }
+}
+
+export { scanForErrorMessages, removeNonInteractiveElements, splitByChunks, minifyHtml, simplifyHtmlElement, formatHtml, cleanHtml, isTrashClass }

package/lib/locator.js

@@ -591,13 +591,24 @@ Locator.clickable = {
       `.//*[@title = ${literal}]`,
       `.//*[@aria-labelledby = //*[@id][normalize-space(string(.)) = ${literal}]/@id ]`,
       `.//*[@role='button'][normalize-space(.)=${literal}]`,
+      `.//*[@role='tab' or @role='link' or @role='menuitem' or @role='menuitemcheckbox' or @role='menuitemradio' or @role='option' or @role='treeitem'][contains(normalize-space(string(.)), ${literal})]`,
     ]),
 
   /**
    * @param {string} literal
    * @returns {string}
    */
-  self: literal => `./self::*[contains(normalize-space(string(.)), ${literal}) or contains(normalize-space(@value), ${literal})]`,
+  self: literal => {
+    // Narrowest-match: prefer the deepest descendant whose string-value contains the literal.
+    // Falling back to `self` without the `not(descendant...)` guard would match a container
+    // whose concatenated text happens to include the literal (e.g. a <ul role="tablist"> whose
+    // tab labels all sit in its string-value) and click the container itself.
+    const narrowest = `contains(normalize-space(string(.)), ${literal}) and not(.//*[contains(normalize-space(string(.)), ${literal})])`
+    return xpathLocator.combine([
+      `.//*[${narrowest}]`,
+      `./self::*[${narrowest} or contains(normalize-space(@value), ${literal})]`,
+    ])
+  },
 }
 
 Locator.field = {

package/lib/pause.js

@@ -18,6 +18,8 @@ let nextStep
 let finish
 let next
 let registeredVariables = {}
+let externalHandler = null
+
 /**
  * Pauses test execution and starts interactive shell
  * @param {Object<string, *>} [passedObject]
@@ -37,10 +39,10 @@ const pause = function (passedObject = {}) {
   })
 
   event.dispatcher.on(event.test.finished, () => {
-    finish()
+    if (typeof finish === 'function') finish()
     recorder.session.restore('pause')
-    rl.close()
-    history.save()
+    if (rl) rl.close()
+    if (!externalHandler) history.save()
   })
 
   recorder.add('Start new session', () => pauseSession(passedObject))
@@ -49,6 +51,15 @@ const pause = function (passedObject = {}) {
 function pauseSession(passedObject = {}) {
   registeredVariables = passedObject
   recorder.session.start('pause')
+
+  if (externalHandler) {
+    store.onPause = true
+    return externalHandler({ registeredVariables }).then(() => {
+      store.onPause = false
+      recorder.session.restore('pause')
+    })
+  }
+
   if (!next) {
     let vars = Object.keys(registeredVariables).join(', ')
     if (vars) vars = `(vars: ${vars})`
@@ -234,5 +245,28 @@ function registerVariable(name, value) {
   registeredVariables[name] = value
 }
 
+/**
+ * Hook for external pause drivers (e.g. the MCP server). When set, pauseSession
+ * delegates to the handler instead of opening a readline REPL. The handler
+ * receives `{ registeredVariables }` and returns a Promise that resolves when
+ * the driver decides to continue (resume) or step.
+ *
+ * The driver controls step-vs-resume by mutating `next` via setNextStep before
+ * resolving its Promise.
+ */
+function setPauseHandler(handler) {
+  externalHandler = handler
+}
+
+/**
+ * Trigger a one-shot pause from outside the test (e.g. the MCP server,
+ * pausing the test at a specific step index without modifying the test).
+ * Schedules pauseSession through the recorder so it slots between steps.
+ */
+function pauseNow(passedObject = {}) {
+  if (store.dryRun) return
+  recorder.add('Triggered pause', () => pauseSession(passedObject))
+}
+
 export default pause
-export { registerVariable }
+export { registerVariable, setPauseHandler, pauseNow }

package/lib/plugin/aiTrace.js

@@ -1,8 +1,6 @@
-import crypto from 'crypto'
 import fs from 'fs'
 import { mkdirp } from 'mkdirp'
 import path from 'path'
-import { fileURLToPath } from 'url'
 
 import store from '../store.js'
 import Container from '../container.js'
@@ -10,11 +8,16 @@ import recorder from '../recorder.js'
 import event from '../event.js'
 import output from '../output.js'
 import { deleteDir, clearString } from '../utils.js'
-import colors from 'chalk'
-
-const supportedHelpers = Container.STANDARD_ACTING_HELPERS
+import { captureSnapshot, pickActingHelper, traceDirFor, artifactLinks } from '../utils/trace.js'
+import {
+  parsePluginArgs,
+  resolveTrigger,
+  matchStepFile,
+  matchUrl,
+} from '../utils/pluginParser.js'
 
 const defaultConfig = {
+  on: 'step',
   deleteSuccessful: false,
   fullPageScreenshots: false,
   output: store.outputDir,
@@ -53,20 +56,26 @@ const defaultConfig = {
  * * `captureHTTP`: capture HTTP requests (requires `trace` or `recordHar` enabled in helper config). Default: true.
  * * `captureDebugOutput`: capture CodeceptJS debug output. Default: true.
  * * `ignoreSteps`: steps to ignore in trace. Array of RegExps is expected.
+ * * `on`: trigger mode — `step` (default), `fail`, `test`, `file`, `url`.
+ *
+ * #### `on=` modes
+ *
+ * * **step** — persist every step (default)
+ * * **fail** — persist only the failed step
+ * * **test** — persist only the last step of each test
+ * * **file** — persist steps from `path=...[;line=...]`
+ * * **url** — persist when the current URL matches `pattern=...`
  *
  * @param {*} config
  */
-export default function (config) {
-  const helpers = Container.helpers()
-  let helper
+export default function (config = {}) {
+  const cliArgs = parsePluginArgs(config._args)
+  const trigger = resolveTrigger(cliArgs, config, { on: defaultConfig.on }, { name: 'aiTrace' })
+  if (!trigger) return
 
   config = Object.assign(defaultConfig, config)
 
-  for (const helperName of supportedHelpers) {
-    if (Object.keys(helpers).indexOf(helperName) > -1) {
-      helper = helpers[helperName]
-    }
-  }
+  const helper = pickActingHelper(Container.helpers())
 
   if (!helper) {
     output.warn('aiTrace plugin: No supported helper found (Playwright, Puppeteer, WebDriver). Plugin disabled.')
@@ -106,13 +115,7 @@ export default function (config) {
     } catch (err) {
       title = test.title
     }
-    const testTitle = clearString(title).slice(0, 200)
-    const uniqueHash = crypto
-      .createHash('sha256')
-      .update(test.file + test.title)
-      .digest('hex')
-      .slice(0, 8)
-    dir = path.join(reportDir, `trace_${testTitle}_${uniqueHash}`)
+    dir = traceDirFor(test.file, title, reportDir)
     mkdirp.sync(dir)
     deleteDir(dir)
     mkdirp.sync(dir)
@@ -141,6 +144,24 @@ export default function (config) {
       output.debug(`aiTrace: Skipping failed step "${step.toString()}" - already handled by step.failed event`)
       return
     }
+
+    // on= filtering
+    if (trigger.on === 'fail') return // failed steps handled by step.failed
+    if (trigger.on === 'file' && !matchStepFile(step, trigger.path, trigger.line)) return
+    if (trigger.on === 'url') {
+      recorder.add('aiTrace:url check', async () => {
+        try {
+          if (!helper.grabCurrentUrl) return
+          const url = await helper.grabCurrentUrl()
+          if (!matchUrl(url, trigger.pattern)) return
+          await persistStep(step)
+        } catch (err) {
+          output.debug(`aiTrace: Error in url-mode step persistence: ${err.message}`)
+        }
+      }, true)
+      return
+    }
+
     const stepPersistPromise = persistStep(step).catch(err => {
       output.debug(`aiTrace: Error saving step: ${err.message}`)
     })
@@ -282,6 +303,7 @@ export default function (config) {
         output.debug(`aiTrace: Browser unavailable, partial artifact capture: ${err.message}`)
       }
 
+      let preExistingScreenshot = false
       if (step.artifacts?.screenshot) {
         const screenshotPath = path.isAbsolute(step.artifacts.screenshot)
           ? step.artifacts.screenshot
@@ -289,6 +311,7 @@ export default function (config) {
         const screenshotFile = path.basename(screenshotPath)
         stepData.artifacts.screenshot = screenshotFile
         step.artifacts.screenshot = screenshotPath
+        preExistingScreenshot = true
 
         if (!fs.existsSync(screenshotPath)) {
           try {
@@ -297,58 +320,31 @@ export default function (config) {
             output.debug(`aiTrace: Could not save screenshot: ${err.message}`)
           }
         }
-      } else {
-        try {
-          const screenshotFile = `${stepPrefix}_screenshot.png`
-          const screenshotPath = path.join(dir, screenshotFile)
-          await helper.saveScreenshot(screenshotPath, config.fullPageScreenshots)
-
-          stepData.artifacts.screenshot = screenshotFile
-          step.artifacts.screenshot = screenshotPath
-        } catch (err) {
-          output.debug(`aiTrace: Could not save screenshot: ${err.message}`)
-        }
       }
 
-      // Save HTML
-      if (config.captureHTML && helper.grabSource && browserAvailable) {
-        if (!step.artifacts?.html) {
-          try {
-            const html = await helper.grabSource()
-            const htmlFile = `${stepPrefix}_page.html`
-            fs.writeFileSync(path.join(dir, htmlFile), html)
-            stepData.artifacts.html = htmlFile
-          } catch (err) {
-            output.debug(`aiTrace: Could not capture HTML: ${err.message}`)
-          }
-        } else {
-          stepData.artifacts.html = step.artifacts.html
-        }
-      }
+      const captured = await captureSnapshot(helper, {
+        dir,
+        prefix: stepPrefix,
+        fullPage: config.fullPageScreenshots,
+        captureHTML: config.captureHTML && browserAvailable,
+        captureARIA: config.captureARIA && browserAvailable,
+        captureBrowserLogs: config.captureBrowserLogs && browserAvailable,
+        captureStorage: false,
+      })
 
-      // Save ARIA snapshot
-      if (config.captureARIA && helper.grabAriaSnapshot && browserAvailable) {
-        try {
-          const aria = await helper.grabAriaSnapshot()
-          const ariaFile = `${stepPrefix}_aria.txt`
-          fs.writeFileSync(path.join(dir, ariaFile), aria)
-          stepData.artifacts.aria = ariaFile
-        } catch (err) {
-          output.debug(`aiTrace: Could not capture ARIA snapshot: ${err.message}`)
-        }
+      if (!preExistingScreenshot && captured.screenshot) {
+        stepData.artifacts.screenshot = captured.screenshot
+        step.artifacts.screenshot = path.join(dir, captured.screenshot)
       }
-
-      // Save browser logs
-      if (config.captureBrowserLogs && helper.grabBrowserLogs && browserAvailable) {
-        try {
-          const logs = await helper.grabBrowserLogs()
-          const logsFile = `${stepPrefix}_console.json`
-          fs.writeFileSync(path.join(dir, logsFile), JSON.stringify(logs || [], null, 2))
-          stepData.artifacts.console = logsFile
-          stepData.meta.consoleCount = logs ? logs.length : 0
-        } catch (err) {
-          output.debug(`aiTrace: Could not capture browser logs: ${err.message}`)
-        }
+      if (step.artifacts?.html) {
+        stepData.artifacts.html = step.artifacts.html
+      } else if (captured.html) {
+        stepData.artifacts.html = captured.html
+      }
+      if (captured.aria) stepData.artifacts.aria = captured.aria
+      if (captured.console) {
+        stepData.artifacts.console = captured.console
+        stepData.meta.consoleCount = captured.consoleCount
       }
     } catch (err) {
       output.plugin(`aiTrace: Can't save step artifacts: ${err}`)
@@ -361,6 +357,12 @@ export default function (config) {
       return
     }
 
+    // on=test: only render the last step in markdown; artifacts of earlier steps
+    // remain on disk unreferenced.
+    if (trigger.on === 'test') {
+      steps = steps.slice(-1)
+    }
+
     const testDuration = ((Date.now() - testStartTime) / 1000).toFixed(2)
 
     let markdown = `file: ${test.file || 'unknown'}\n`
@@ -405,22 +407,8 @@ export default function (config) {
         })
       }
 
-      if (stepData.artifacts.html) {
-        markdown += `  > [HTML](./${stepData.artifacts.html})\n`
-      }
-
-      if (stepData.artifacts.aria) {
-        markdown += `  > [ARIA Snapshot](./${stepData.artifacts.aria})\n`
-      }
-
-      if (stepData.artifacts.screenshot) {
-        markdown += `  > [Screenshot](./${stepData.artifacts.screenshot})\n`
-      }
-
-      if (stepData.artifacts.console) {
-        const count = stepData.meta.consoleCount || 0
-        markdown += `  > [Browser Logs](./${stepData.artifacts.console}) (${count} entries)\n`
-      }
+      const links = artifactLinks(stepData.artifacts, { consoleCount: stepData.meta.consoleCount })
+      if (links) markdown += links + '\n'
 
       if (config.captureHTTP) {
         if (test.artifacts && test.artifacts.har) {

package/lib/plugin/browser.js

@@ -0,0 +1,76 @@
+import output from '../output.js'
+
+/**
+ * Overrides browser helper config from the command line. Works for all browser helpers
+ * (Playwright, Puppeteer, WebDriver, Appium) without touching `codecept.conf`.
+ *
+ * Enable it via `-p` option with one or more colon-chained args:
+ *
+ * ```
+ * npx codeceptjs run -p browser:show
+ * npx codeceptjs run -p browser:hide
+ * npx codeceptjs run -p browser:browser=firefox
+ * npx codeceptjs run -p browser:windowSize=1024x768:video=false
+ * npx codeceptjs run -p browser:hide:browser=webkit:windowSize=800x600
+ * ```
+ *
+ * #### Args
+ *
+ * * **show** — force visible browser
+ * * **hide** — force headless (also injects `--headless` into WebDriver chrome/firefox capability args)
+ * * **`<key>=<value>`** — set `helpers.<eachBrowserHelper>.<key> = <value>`. Three keys
+ *   get per-helper translation via `setBrowserConfig`:
+ *     * `browser=<name>` — Puppeteer receives `product`, Playwright receives `browser`
+ *     * `windowSize=WxH` — also adds `--window-size=W,H` chromium/chrome args
+ *     * `show=true|false` — toggles `show` on Playwright/Puppeteer; injects/strips
+ *       `--headless` in WebDriver chrome/firefox capability args
+ *
+ * Values stay as strings. `true` / `false` are coerced to booleans.
+ *
+ * Requires `@codeceptjs/configure` to be installed; if missing, the plugin
+ * logs a hint and skips the override.
+ */
+export default async function (config = {}) {
+  const opts = parseArgs(config._args || [])
+  if (Object.keys(opts).length === 0) return
+
+  const configure = await tryImportConfigure()
+  if (!configure) return
+
+  configure.setBrowserConfig(opts)
+  output.debug(`browser plugin: applied ${formatOpts(opts)}`)
+}
+
+async function tryImportConfigure() {
+  try {
+    return await import('@codeceptjs/configure')
+  } catch (err) {
+    output.error("browser plugin: '@codeceptjs/configure' is not installed; CLI overrides are skipped. Run `npm i @codeceptjs/configure` to enable.")
+    return null
+  }
+}
+
+function parseArgs(args) {
+  return args.filter(Boolean).reduce((acc, arg) => Object.assign(acc, parseArg(arg)), {})
+}
+
+function parseArg(arg) {
+  if (arg === 'show') return { show: true }
+  if (arg === 'hide') return { show: false }
+  if (arg.includes('=')) {
+    const [key, ...rest] = arg.split('=')
+    return { [key]: parseValue(rest.join('=')) }
+  }
+  output.error(`browser plugin: unknown arg "${arg}"`)
+  return {}
+}
+
+function parseValue(v) {
+  if (v === 'true') return true
+  if (v === 'false') return false
+  return v
+}
+
+function formatOpts(opts) {
+  return Object.entries(opts).map(([k, v]) => `${k}=${v}`).join(', ')
+}