Merge pull request #14 from withuno/smithki/visible-login-targets

add `getVisibleLoginTarget` function

src/index.ts

@@ -4,4 +4,4 @@ import { getSharedObserver } from './unload-observer';
 getSharedObserver();
 
 export { LoginTarget, LoginTargetType } from './login/login-target';
-export { getLoginTarget, getLoginTargets } from './login';
+export { getVisibleLoginTarget, getLoginTarget, getLoginTargets } from './login';

src/login/index.ts

@@ -1,9 +1,32 @@
 /* eslint-disable prefer-destructuring */
 
+import isVisible from 'is-visible';
+
 import { findFormsWithInputs } from './login-inputs';
 import { LoginTarget } from './login-target';
 import { revealShySubmitButtons } from './reveal-shy-submit-buttons';
 
+/**
+ * Get the best login (visible) target on the current page.
+ *
+ * @param queryEl The element to query within
+ * @returns A login target or `null` if none found
+ * @see getLoginTarget
+ */
+export function getVisibleLoginTarget(queryEl: Document | HTMLElement = document) {
+  const bestTarget = getLoginTarget(queryEl);
+  const isTargetVisible = [
+    bestTarget?.form,
+    bestTarget?.usernameField,
+    bestTarget?.passwordField,
+    bestTarget?.submitButton,
+  ].some((el) => {
+    console.log('isVisible', !!el && isVisible(el), el);
+    return !!el && isVisible(el);
+  });
+  return isTargetVisible ? bestTarget : null;
+}
+
 /**
  * Get the best login target on the current page.
  *

test/integration/login/index.ts

@@ -121,8 +121,8 @@ async function executeOnDemandTest(url: string, page: Page) {
       // If no login targets are found after 15s, we give up.
       setTimeout(() => {
         clearInterval(interval);
-        reject(new Error('No login targets found after 15s'));
-      }, 15000);
+        reject(new Error('No login targets found after 30s'));
+      }, 30_000);
     });
   });
 

test/integration/puppeteer.ts

@@ -40,7 +40,7 @@ export async function waitForPageLoad(page: Page) {
         }
 
         // Image hasn’t loaded yet, add an event listener to know when it does...
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
           img.addEventListener('load', resolve);
           // We don't mind if an image fails to load...
           img.addEventListener('error', resolve);