@letsrunit/playwright 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@letsrunit/playwright",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Playwright extensions and utilities for letsrunit",
   "keywords": [
     "testing",
@@ -42,18 +42,12 @@
   },
   "packageManager": "yarn@4.10.3",
   "dependencies": {
-    "@letsrunit/utils": "0.21.0",
+    "@letsrunit/utils": "0.22.0",
     "@playwright/test": "1.58.2",
     "case": "^1.6.3",
     "diff": "^8.0.3",
     "fast-json-stable-stringify": "^2.1.0",
     "jsdom": "^27.4.0",
-    "metascraper-description": "^5.49.15",
-    "metascraper-image": "^5.49.15",
-    "metascraper-logo": "^5.49.15",
-    "metascraper-logo-favicon": "^5.49.15",
-    "metascraper-title": "^5.49.15",
-    "metascraper-url": "^5.49.15",
     "rehype-format": "^5.0.1",
     "rehype-parse": "^9.0.1",
     "rehype-stringify": "^10.0.1",

package/src/fallback-locator.ts

@@ -2,6 +2,7 @@ import { Locator } from '@playwright/test';
 
 type LocatorMethod = (...args: any[]) => any;
 type ProxyProperty = string | symbol;
+export const FALLBACK_LOCATOR_CANDIDATES = Symbol('letsrunit.playwright.fallback-locator-candidates');
 
 const ACTION_METHODS = new Set([
   'blur',
@@ -158,6 +159,7 @@ export function createFallbackLocator(candidates: Locator[]): Locator {
 
   const proxy = new Proxy(primary as unknown as object, {
     get(_target, prop: ProxyProperty) {
+      if (prop === FALLBACK_LOCATOR_CANDIDATES) return candidates;
       if (typeof prop !== 'string') return (primary as any)[prop];
       if (passthroughMetaProperties.has(prop)) return (primary as any)[prop];
 
@@ -195,3 +197,7 @@ export function createFallbackLocator(candidates: Locator[]): Locator {
 
   return proxy as Locator;
 }
+
+export function getFallbackLocatorCandidates(locator: Locator): Locator[] | null {
+  return ((locator as any)[FALLBACK_LOCATOR_CANDIDATES] as Locator[] | undefined) ?? null;
+}

package/src/field/index.ts

@@ -55,9 +55,7 @@ export async function setFieldValue(el: Locator, value: Value, options?: SetOpti
     setFallback,
   );
 
-  if ((await el.count()) > 1) {
-    el = await pickFieldElement(el);
-  }
+  el = await pickFieldElement(el);
 
   const tag = await el.evaluate((e) => e.tagName.toLowerCase(), options);
   const type = (

package/src/page-info.ts

@@ -1,33 +1,22 @@
-import metascraper, { type MetascraperOptions } from 'metascraper';
-import metascraperDescription from 'metascraper-description';
-import metascraperImage from 'metascraper-image';
-import metascraperLang from 'metascraper-lang';
-import metascraperLogo from 'metascraper-logo';
-import metascraperLogoFavicon from 'metascraper-logo-favicon';
-import metascraperTitle from 'metascraper-title';
-import metascraperUrl from 'metascraper-url';
+import type { Page } from '@playwright/test';
+import { extractPageMetadata } from './page-metadata';
+import { screenshot as takeScreenshot } from './screenshot';
 import type { PageInfo, Snapshot } from './types';
+import { isPage } from './utils/type-check';
 
-const scrape = metascraper([
-  metascraperTitle(),
-  metascraperDescription(),
-  metascraperImage(),
-  metascraperLogo(),
-  metascraperLogoFavicon(),
-  metascraperLang(),
-  metascraperUrl(),
-]);
+type PageLike = Page | Partial<Snapshot> & { url: string; html: string };
 
-export async function extractPageInfo(options: MetascraperOptions & Partial<Snapshot>): Promise<PageInfo> {
-  const meta = await scrape(options);
+export async function extractPageInfo(page: PageLike): Promise<PageInfo> {
+  const snapshot = isPage(page)
+    ? {
+        url: page.url(),
+        html: await page.content(),
+        screenshot: await takeScreenshot(page),
+      }
+    : page;
 
   return {
-    url: meta.url || options.url,
-    name: meta.title || undefined,
-    description: meta.description || undefined,
-    image: meta.image || undefined,
-    favicon: meta.logo || undefined,
-    lang: meta.lang || undefined,
-    screenshot: options.screenshot,
+    ...extractPageMetadata(snapshot),
+    screenshot: snapshot.screenshot,
   };
 }

package/src/page-metadata.ts

@@ -0,0 +1,69 @@
+import { JSDOM } from 'jsdom';
+import type { PageInfo, Snapshot } from './types';
+
+export function extractPageMetadata(snapshot: Pick<Snapshot, 'url' | 'html'>): Omit<PageInfo, 'screenshot'> {
+  const dom = new JSDOM(snapshot.html, { url: snapshot.url });
+  const doc = dom.window.document;
+
+  return {
+    url: resolveCanonicalUrl(doc, snapshot.url),
+    name: firstNonEmpty(
+      metaContent(doc, 'property', 'og:title'),
+      metaContent(doc, 'name', 'twitter:title'),
+      doc.title,
+    ),
+    description: firstNonEmpty(
+      metaContent(doc, 'name', 'description'),
+      metaContent(doc, 'property', 'og:description'),
+      metaContent(doc, 'name', 'twitter:description'),
+    ),
+    image: resolveUrl(
+      snapshot.url,
+      firstNonEmpty(
+        metaContent(doc, 'property', 'og:image'),
+        metaContent(doc, 'name', 'twitter:image'),
+      ),
+    ),
+    logo: resolveUrl(snapshot.url, firstLinkHref(doc, ['link[rel~="apple-touch-icon"]', 'link[rel~="icon"]'])),
+    author: firstNonEmpty(metaContent(doc, 'name', 'author')),
+    publisher: firstNonEmpty(
+      metaContent(doc, 'property', 'article:publisher'),
+      metaContent(doc, 'name', 'publisher'),
+      metaContent(doc, 'property', 'og:site_name'),
+    ),
+    lang: firstNonEmpty(doc.documentElement.lang),
+    favicon: resolveUrl(snapshot.url, firstLinkHref(doc, ['link[rel~="icon"]', 'link[rel="shortcut icon"]'])),
+  };
+}
+
+function metaContent(doc: Document, attr: 'name' | 'property', value: string): string | undefined {
+  return firstNonEmpty(doc.querySelector(`meta[${attr}="${value}"]`)?.getAttribute('content') ?? undefined);
+}
+
+function firstLinkHref(doc: Document, selectors: string[]): string | undefined {
+  for (const selector of selectors) {
+    const href = firstNonEmpty(doc.querySelector(selector)?.getAttribute('href') ?? undefined);
+    if (href) return href;
+  }
+
+  return undefined;
+}
+
+function resolveCanonicalUrl(doc: Document, fallbackUrl: string): string {
+  return resolveUrl(fallbackUrl, firstLinkHref(doc, ['link[rel="canonical"]'])) ?? fallbackUrl;
+}
+
+function resolveUrl(baseUrl: string, candidate?: string): string | undefined {
+  const value = firstNonEmpty(candidate);
+  if (!value) return undefined;
+
+  try {
+    return new URL(value, baseUrl).toString();
+  } catch {
+    return value;
+  }
+}
+
+function firstNonEmpty(...values: Array<string | undefined>): string | undefined {
+  return values.find((value) => value !== undefined && value.trim() !== '')?.trim();
+}

package/src/utils/pick-field-element.ts

@@ -1,8 +1,24 @@
 import type { Locator } from '@playwright/test';
+import { getFallbackLocatorCandidates } from '../fallback-locator';
+
+async function resolveConcreteFieldLocator(elements: Locator): Promise<Locator> {
+  const fallbackCandidates = getFallbackLocatorCandidates(elements);
+  if (!fallbackCandidates) return elements;
+
+  for (const candidate of fallbackCandidates) {
+    try {
+      if ((await candidate.count()) > 0) return candidate;
+    } catch {}
+  }
+
+  return elements;
+}
 
 export async function pickFieldElement(elements: Locator): Promise<Locator> {
+  elements = await resolveConcreteFieldLocator(elements);
+
   const count = await elements.count();
-  if (count === 1) return elements;
+  if (count <= 1) return elements.first();
 
   const candidates: { el: Locator; tag: string; role: string | null; isVisible: boolean }[] = [];
 
@@ -43,6 +59,5 @@ export async function pickFieldElement(elements: Locator): Promise<Locator> {
     return elements.nth(isParent);
   }
 
-  // Return both elements and let the error (on evaluate) occur.
-  return elements;
+  return elements.first();
 }