[Autofill password import] Misc fixes (#1184)

* fix: supported path

* feat: add a more resilient animation

* fixme: hardcode some offsets

* chore: lint-fix

* fix: use calc

* feat: use overlay to style elements

* style: lint fix

* chore: add some comments

* fix: remove offset

* chore: PR comments

* test: update for expecting overlay

* fix: domcontentloaded event instead of timeout

* feat: refactor for scroll

* refactor: add state

* refactor: store domloaded promise

* fix: remove overlay early

* fix: account for slow inejction

Author: dbajpeyi

injected/integration-test/autofill-password-import.spec.js

@@ -1,23 +1,26 @@
-import { test } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 import { readFileSync } from 'fs';
 import { mockAndroidMessaging, wrapWebkitScripts } from '@duckduckgo/messaging/lib/test-utils.mjs';
 import { perPlatform } from './type-helpers.mjs';
+import { OVERLAY_ID } from '../src/features/autofill-password-import';
 
 test('Password import feature', async ({ page }, testInfo) => {
     const passwordImportFeature = AutofillPasswordImportSpec.create(page, testInfo);
     await passwordImportFeature.enabled();
     await passwordImportFeature.navigate();
-    const didAnimatePasswordOptions = passwordImportFeature.waitForAnimation('a[aria-label="Password options"]');
     await passwordImportFeature.clickOnElement('Home page');
-    await didAnimatePasswordOptions;
+    await passwordImportFeature.waitForAnimation();
 
-    const didAnimateSignin = passwordImportFeature.waitForAnimation('a[aria-label="Sign in"]');
     await passwordImportFeature.clickOnElement('Signin page');
-    await didAnimateSignin;
+    await passwordImportFeature.waitForAnimation();
 
-    const didAnimateExport = passwordImportFeature.waitForAnimation('button[aria-label="Export"]');
     await passwordImportFeature.clickOnElement('Export page');
-    await didAnimateExport;
+    await passwordImportFeature.waitForAnimation();
+
+    // Test unsupported path
+    await passwordImportFeature.clickOnElement('Unsupported page');
+    const overlay = page.locator(`#${OVERLAY_ID}`);
+    await expect(overlay).not.toBeVisible();
 });
 
 export class AutofillPasswordImportSpec {
@@ -91,17 +94,10 @@ export class AutofillPasswordImportSpec {
 
     /**
      * Helper to assert that an element is animating
-     * @param {string} selector
      */
-    async waitForAnimation(selector) {
-        const locator = this.page.locator(selector);
-        return await locator.evaluate((el) => {
-            if (el != null) {
-                return el.getAnimations().some((animation) => animation.playState === 'running');
-            } else {
-                return false;
-            }
-        }, selector);
+    async waitForAnimation() {
+        const locator = this.page.locator(`#${OVERLAY_ID}`);
+        await expect(locator).toBeVisible();
     }
 
     /**

injected/integration-test/test-pages/autofill-password-import/index.html

@@ -32,17 +32,21 @@
         <a aria-label="Sign in">Sign in</a>
     </div>
     <div id="home" class="page">
-        <a aria-label="Password options">Password options</a>
+        <a aria-label="Password options" style="border-radius: 100%;">PO</a>
     </div>
     <div id="options" class="page">
-        <button aria-label="Export">Export</button>
+        <button aria-label="Export" style="border-radius: 100%;">EP</button>
+    </div>
+    <div id="unsupported" class="page">
+        <button aria-label="Unsupported">Unsupported path</button>
     </div>
 
     <script>
         const routes = {
             '/intro': document.getElementById('intro'),
             '/': document.getElementById('home'),
-            '/options': document.getElementById('options')
+            '/options': document.getElementById('options'),
+            '/unsupported': document.getElementById('unsupported'),
         };
 
         function navigate(path) {
@@ -68,6 +72,7 @@
                 <button onclick="navigate('/intro')">Signin page</button>
                 <button onclick="navigate('/')">Home page</button>
                 <button onclick="navigate('/options')">Export page</button>
+                <button onclick="navigate('/unsupported')">Unsupported page</button>
             </nav>
         `);
     </script>