Init future possibility to check clipboard content

.config/.cypress.js

@@ -3,5 +3,35 @@ module.exports = {
     // Base URL is set via Docker environment variable
     viewportHeight: 1000,
     viewportWidth: 1400,
+
+    // https://docs.cypress.io/api/plugins/browser-launch-api#Changing-browser-preferences
+    setupNodeEvents(on, _config) {
+      on("before:browser:launch", (browser, launchOptions) => {
+        if (browser.family === "chromium" && browser.name !== "electron") {
+          // auto open devtools
+          launchOptions.args.push("--auto-open-devtools-for-tabs");
+
+          // TODO (clipboard): We use the obsolete clipboard API from browsers, i.e.
+          // document.execCommand("copy"). There's a new Clipboard API that is supported
+          // by modern browsers. Once we switch to that API, use the following code
+          // to allow requesting permission (clipboard permission) in a non-secure
+          // context (http). Remaining TODO in this case: search for the equivalent
+          // flag in Firefox & Electron (if we also want to test them).
+          // launchOptions.args.push("--unsafely-treat-insecure-origin-as-secure=http://mampf:3000");
+        }
+
+        if (browser.family === "firefox") {
+          // auto open devtools
+          launchOptions.args.push("-devtools");
+        }
+
+        if (browser.name === "electron") {
+          // auto open devtools
+          launchOptions.preferences.devTools = true;
+        }
+
+        return launchOptions;
+      });
+    },
   },
 };

spec/cypress/e2e/vouchers_spec.cy.js

@@ -68,6 +68,17 @@ describe("If the lecture is not a seminar", () => {
         testInvalidateVoucher(role);
       });
     });
+
+    it.skip("copies the voucher hash to the clipboard", function () {
+      ROLES.filter(role => role !== "speaker").forEach((role) => {
+        cy.getBySelector(`create-${role}-voucher-btn`).click();
+        cy.getBySelector(`${role}-voucher-secure-hash`).then(($hash) => {
+          const hashText = $hash.text();
+          cy.getBySelector(`copy-${role}-voucher-btn`).click();
+          cy.assertCopiedToClipboard(hashText);
+        });
+      });
+    });
   });
 });
 

spec/cypress/support/commands.js

@@ -20,6 +20,57 @@ Cypress.Commands.add("clickExpectNewTab", { prevSubject: true }, ($subject, args
   return cy.wrap($subject).invoke("removeAttr", "target").click(args);
 });
 
+Cypress.Commands.add("assertCopiedToClipboard", (_expectedText) => {
+  cy.fail("Not implemented yet");
+
+  // An old method would consist of something like this:
+  // adapted from https://stackoverflow.com/a/69571115
+  // and https://stackoverflow.com/a/33928558
+
+  //////////////////////////////////////////////////////////////////////////////
+  // NEW PROPOSED SOLUTION for the new Clipboard API
+  //////////////////////////////////////////////////////////////////////////////
+
+  // TODO (clipboard): We currently use the obsolete clipboard API from browsers,
+  // i.e. document.execCommand("copy") via the clipboard.js library.
+  // There's a new Clipboard API that is supported by modern browsers.
+  // Once we switch to that API, use the following code to test copying to
+  // the clipboard. Also see this GitHub issue for more information:
+  // https://github.com/cypress-io/cypress/issues/2752
+  //
+  // Note that another option to test the clipboard content then would be
+  // https://github.com/cypress-io/cypress/issues/2752#issuecomment-1039285381
+  // which wouldn't even require requesting permissions but might have its
+  // own limitations.
+
+  // Request clipboard permissions
+  // by https://stackoverflow.com/a/73329952/9655481
+  // Note that this won't work by default in a non-secure context (http), so we need to
+  // pass the flag --unsafely-treat-insecure-origin-as-secure=http://mampf:3000
+  // to the browser when starting it (see the cypress config)
+  // cy.wrap(Cypress.automation("remote:debugger:protocol", {
+  //   command: "Browser.grantPermissions",
+  //   params: {
+  //     permissions: ["clipboardReadWrite", "clipboardSanitizedWrite"],
+  //   },
+  // }));
+
+  // Make sure clipboard permissions were granted
+  // https://stackoverflow.com/questions/61650737/how-to-fetch-copied-to-clipboard-content-in-cypress/73329952#comment137190789_69571115
+  // cy.window().its("navigator.permissions")
+  //   .then(api => api.query({ name: "clipboard-read" }))
+  //   .its("state").should("equal", "granted");
+
+  // https://stackoverflow.com/a/75928308/
+  // cy.window().its("navigator.clipboard")
+  //   .then(clip => clip.readText())
+  //   .should("equal", expectedText);
+});
+
+////////////////////////////////////////////////////////////////////////////////
+// Custom commands for backend interaction
+////////////////////////////////////////////////////////////////////////////////
+
 Cypress.Commands.add("cleanDatabase", () => {
   return BackendCaller.callCypressRoute("database_cleaner", "cy.cleanDatabase()", {});
 });