webdriverio · christian-bromann · Sep 27, 2025 · Sep 26, 2025 · Sep 26, 2025 · Sep 26, 2025
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -7,6 +7,7 @@ jobs:
       matrix:
         exampleDir:
           - click
+          - clipboard
           - customMatchers
           - deleteCookies
           - emulate

diff --git a/clipboard/README.md b/clipboard/README.md
@@ -0,0 +1,20 @@
+# `clipboard` Example
+
+This directory contains the example files for interacting with the system clipboard using
+WebDriverIO.
+
+## Prerequisite
+
+Make sure to run this first, to set up the example repository:
+
+```sh
+npm install
+```
+
+## Example
+
+Run example via:
+
+```sh
+npm run clipboard
+```
diff --git a/clipboard/chrome-example.js b/clipboard/chrome-example.js
@@ -0,0 +1,39 @@
+import { browser, expect, $ } from '@wdio/globals'
+
+describe('Clipboard: Chrome', () => {
+    before(() => browser.url('/example.html'))
+
+    it('should allow the browser to read the clipboard', async () => {
+        // set clipboard permissions
+        await browser.setPermissions({ name: 'clipboard-read' }, 'granted')
+
+        const btn = await $('#copyBtn')
+        await btn.click()
+
+        // Use a focus event to trigger the async clipboard read, then save
+        // the result to a global variable on the window object
+        // Without this the clipboard read may be blocked
+        // with "NotAllowedError: Document is not focused."
+        // See: https://stackoverflow.com/questions/56306153/domexception-on-calling-navigator-clipboard-readtext
+        await browser.execute(() => {
+          const _asyncCopyFn = (async () => {
+            setTimeout(async () => {
+              window.clipboardText = await navigator.clipboard.readText();
+              document.body.removeEventListener("click", _asyncCopyFn);
+            }, 200);
+          });
+          document.body.addEventListener("click", _asyncCopyFn);
+        });
+
+        await $('body').click();
+
+        await browser.pause(300);
+
+        // now you can read the clipboard text from the global variable
+        const clipboardText = await browser.execute(() => window.clipboardText);
+        console.log('Clipboard text:', clipboardText);
+
+        await expect(clipboardText).toBe('Hello from WebdriverIO clipboard test!')
+    })
+
+})
diff --git a/clipboard/example.html b/clipboard/example.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Clipboard Test</title>
+</head>
+<body>
+  <button id="copyBtn">Copy Text</button>
+
+  <script>
+    document.getElementById('copyBtn').addEventListener('click', async () => {
+      const textToCopy = "Hello from WebdriverIO clipboard test!";
+      try {
+        await navigator.clipboard.writeText(textToCopy);
+      } catch (err) {
+        console.error("Failed to copy:", err);
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/clipboard/firefox-example.js b/clipboard/firefox-example.js
@@ -0,0 +1,16 @@
+import { browser, expect } from '@wdio/globals'
+
+describe('Clipboard: Firefox', () => {
+    before(() => browser.url('/example.html'))
+
+    it('should allow the browser to read the clipboard', async () => {
+        const btn = await $('#copyBtn')
+        await btn.click()
+
+        // now you can read the clipboard via, e.g.
+        const clipboardText = await browser.execute(() => navigator.clipboard.readText())
+
+        await expect(clipboardText).toBe('Hello from WebdriverIO clipboard test!')
+    })
+
+})
diff --git a/package.json b/package.json
@@ -23,6 +23,9 @@
   "scripts": {
     "api/webdriver": "cross-env EXAMPLE_RECIPE=api wdio run ./wdio.conf.js --spec ./api/webdriver/*.js",
     "click": "cross-env EXAMPLE_RECIPE=click wdio run ./wdio.conf.js --spec ./click/example.js",
+    "clipboard": "run-s clipboard:*",
+    "clipboard:chrome": "cross-env BROWSER=chrome EXAMPLE_RECIPE=clipboard wdio run ./wdio.browserChoice.conf.js --spec ./clipboard/chrome-example.js",
+    "clipboard:firefox": "cross-env BROWSER=firefox EXAMPLE_RECIPE=clipboard wdio run ./wdio.browserChoice.conf.js --spec ./clipboard/firefox-example.js",
     "component-testing": "run-s component-testing:*",
     "component-testing:svelte": "wdio run ./wdio.comp.conf.js --spec ./component-testing/svelte-example.js",
     "customMatchers": "cross-env TS_NODE_PROJECT=./customMatchers/tsconfig.json EXAMPLE_RECIPE=customMatchers wdio run ./wdio.conf.js --spec ./customMatchers/example.ts",

diff --git a/wdio.browserChoice.conf.js b/wdio.browserChoice.conf.js
@@ -15,8 +15,9 @@ const { FIREFOX_BINARY_PATH } = process.env
 const chromeOptions = {
     capabilities: {
         browserName: 'chrome',
+        acceptInsecureCerts: true,
         "goog:chromeOptions": {
-          args: process.env.CI ? ['headless', 'disable-gpu'] : ['disable-gpu'],
+            args: process.env.CI ? ['headless', 'disable-gpu'] : [],
             prefs: {
                 "download.default_directory": downloadsDir
             }
@@ -31,6 +32,7 @@ const firefoxOptions = {
         "moz:firefoxOptions": {
             args: process.env.CI ? ['-headless'] : [],
             prefs: {
+                "dom.events.asyncClipboard.readText": true, // Allow clipboard read
                 "browser.download.dir": downloadsDir,
                 "browser.download.folderList": 2,
                 "browser.download.manager.showWhenStarting": false,