add closed shadow dom test (#488)

Author: audreyality

abstractions/test-pages.ts

@@ -5,6 +5,8 @@ type FillProperties = {
   multiStepNextInputKey?: string;
   preFillActions?: (page: Page) => void;
   selector: string | ((page: Page) => Promise<Locator>);
+  /** How autofill verification reads the filled value. "value" (default): `toHaveValue`. "text": `toHaveText` — for non-input mirrors used as side channels (e.g. inputs inside closed shadow roots that Playwright can't reach directly). */
+  verifyAccessor?: "value" | "text";
   /** Represents the expectation that the inline menu should not appear on the input */
   shouldNotHaveInlineMenu?: boolean;
   /** Represents the expectation that the input should not be autofilled */

constants/test-pages.ts

@@ -217,6 +217,33 @@ export const testPages: PageTest[] = [
     },
     skipTests: [],
   },
+  {
+    url: `${testSiteHost}/forms/login/shadow-root-inputs-closed`,
+    inputs: {
+      username: {
+        selector: '[data-mirror="username"]',
+        verifyAccessor: "text",
+        value: testUserName,
+      },
+      password: {
+        selector: '[data-mirror="password"]',
+        verifyAccessor: "text",
+        value: "fakeShadowRootInputsClosedPassword",
+      },
+    },
+    actions: {
+      submit: async (page) =>
+        await page.getByRole("button", { name: "Login", exact: true }).click(),
+    },
+    skipTests: [
+      // these tests require focusing an input to perform autofill. Playwright cannot focus these
+      // because it cannot locate elements in closed shadow roots
+      // see: https://playwright.dev/docs/locators#locate-in-shadow-dom
+      TestNames.InlineMenuAutofill,
+      TestNames.NewCredentialsNotification,
+      TestNames.PasswordUpdateNotification,
+    ],
+  },
   // @TODO add test for /forms/create/create-account
   // @TODO add test for /forms/create/create-account-extended/
   // Card and Identity Ciphers currently cannot be autofilled through the same mechanism that Login Ciphers are. This is because of how we handle messaging for autofilling login items. The extension will need to be updated to handle these types of Ciphers.

constants/vault-ciphers.ts

@@ -132,7 +132,8 @@ export const pageCiphers: PageCipher[] = [
   },
   {
     cipherType: CipherType.Login,
-    url: `${testSiteHost}/forms/login/shadow-root-inputs`,
+    // Trailing slash distinguishes from `/shadow-root-inputs-closed`; both pages are served with trailing slashes by Docusaurus.
+    url: `${testSiteHost}/forms/login/shadow-root-inputs/`,
     uriMatchType: UriMatchType.StartsWith,
     fields: {
       username: {
@@ -143,6 +144,19 @@ export const pageCiphers: PageCipher[] = [
       },
     },
   },
+  {
+    cipherType: CipherType.Login,
+    url: `${testSiteHost}/forms/login/shadow-root-inputs-closed`,
+    uriMatchType: UriMatchType.StartsWith,
+    fields: {
+      username: {
+        value: testUserName,
+      },
+      password: {
+        value: "fakeShadowRootInputsClosedPassword",
+      },
+    },
+  },
   {
     cipherType: CipherType.Login,
     url: `${testSiteHost}/forms/create/create-account`,

tests/static/autofill-forms.spec.ts

@@ -74,7 +74,12 @@ test.describe("Extension autofills forms when triggered", () => {
           typeof firstInputSelector === "string"
             ? await testPage.locator(firstInputSelector).first()
             : await firstInputSelector(testPage);
-        await firstInputElement.waitFor(defaultWaitForOptions);
+        // text-mode mirrors have no rendered size until autofill populates them, so wait for attachment, not visibility
+        await firstInputElement.waitFor(
+          firstInput.verifyAccessor === "text"
+            ? { ...defaultWaitForOptions, state: "attached" }
+            : defaultWaitForOptions,
+        );
 
         await doAutofill(background);
 
@@ -95,7 +100,13 @@ test.describe("Extension autofills forms when triggered", () => {
             ? ""
             : currentInput.value;
 
-          await expect(currentInputSelectedElement).toHaveValue(expectedValue);
+          if (currentInput.verifyAccessor === "text") {
+            await expect(currentInputSelectedElement).toHaveText(expectedValue);
+          } else {
+            await expect(currentInputSelectedElement).toHaveValue(
+              expectedValue,
+            );
+          }
 
           await testPage.screenshot({
             fullPage: true,