Simplify selenium clipboard interactions

This PR simplifies the clipboard reading code and introduces a
check to make sure it actually works. This avoids test failing later
when the recovery phrase should be used.

src/frontend/src/test-e2e/util.ts

@@ -36,6 +36,7 @@ export async function runInBrowser(
     args: [
       "--ignore-certificate-errors", // allow self-signed certificates
       "--disable-gpu",
+      "--headless",
       ...(nonNullish(userAgent) ? [`--user-agent=${userAgent}`] : []),
     ],
 

src/frontend/src/test-e2e/views.ts

@@ -183,37 +183,21 @@ export class RecoveryMethodSelectorView extends View {
   }
 
   async getSeedPhrase(): Promise<string> {
-    // This tries to read the recovery phrase by first copying it to the clipboard.
+    // Allow reading and writing clipboard (e.g. for recovery phrase copy).
+    // We do this here rather than when the browser is created, because permissions
+    // are granted for the current origin only.
+    await this.browser.setPermissions({ name: "clipboard-read" }, "granted");
+    await this.browser.setPermissions({ name: "clipboard-write" }, "granted");
 
+    // Writes the recovery phrase to the clipboard
     await this.copySeedPhrase();
 
-    // Our CSP policy prevents us from directly reading the clipboard.
-    // Instead, we mock user input to paste the clipboard content in textarea element and
-    // read the element's value.
-
-    // First, create a new textarea element where the phrase will be pasted
-    await this.browser.execute(() => {
-      const elem = document.createElement("textarea");
-      elem.setAttribute("id", "my-paste-area");
-      document.body.prepend(elem);
-    });
-
-    // Select the element and mock "Ctrl + V" for pasting the clipboard content into said element
-    await this.browser.$("#my-paste-area").click();
-    await this.browser.keys(["Control", "v"]);
-
-    // Read the element's value and clean up
-    const seedPhrase = await this.browser.execute(() => {
-      const elem = document.querySelector(
-        "#my-paste-area"
-      ) as HTMLTextAreaElement;
-      // NOTE: we could also query the value with wdio's $(..).getValue(), but since we have
-      // the element here might as well.
-      const seedPhrase = elem.value!;
-      elem.remove();
-      return seedPhrase;
-    });
-
+    // Read the value
+    const seedPhrase = await this.browser.execute(() =>
+      navigator.clipboard.readText()
+    );
+    // immediately fail, if it did not work
+    assert(seedPhrase.length > 0, "Seed phrase is empty!");
     return seedPhrase;
   }