@argos-ci/playwright 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */ const argosScreenshot = async (...args)=>{
+    // @ts-ignore
+    const { argosScreenshot  } = await import('./index.mjs');
+    return argosScreenshot(...args);
+};
+exports.argosScreenshot = argosScreenshot;

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import { ElementHandle, LocatorScreenshotOptions, PageScreenshotOptions, Page } from '@playwright/test';
+
+type LocatorOptions = Parameters<Page["locator"]>[1];
+type ScreenshotOptions<TBase extends PageScreenshotOptions | LocatorScreenshotOptions> = Omit<TBase, "encoding" | "type" | "omitBackground" | "path">;
+type ArgosScreenshotOptions = {
+    /**
+     * ElementHandle or string selector of the element to take a screenshot of.
+     */
+    element?: string | ElementHandle;
+} & LocatorOptions & ScreenshotOptions<LocatorScreenshotOptions> & ScreenshotOptions<PageScreenshotOptions>;
+declare function argosScreenshot(page: Page, name: string, { element, has, hasText, ...options }?: ArgosScreenshotOptions): Promise<void>;
+
+export { ArgosScreenshotOptions, argosScreenshot };

package/dist/index.mjs

@@ -0,0 +1,67 @@
+import { mkdir } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+const screenshotFolder = "./screenshots";
+const GLOBAL_STYLES = `
+  /* Hide carets */
+  * { caret-color: transparent !important; }
+
+  /* Hide scrollbars */
+  ::-webkit-scrollbar {
+    display: none !important;
+  }
+
+  /* Generic hide */
+  [data-visual-test="transparent"] {
+    color: transparent !important;
+    font-family: monospace !important;
+    opacity: 0 !important;
+  }
+  
+  [data-visual-test="removed"] {
+    display: none !important;
+  }
+`;
+// Check if the fonts are loaded
+function waitForFontLoading() {
+    return document.fonts.status === "loaded";
+}
+// Check if the images are loaded
+async function waitForImagesLoading() {
+    return Promise.all(Array.from(document.images).filter((img)=>!img.complete).map((img)=>new Promise((resolve)=>{
+            img.onload = img.onerror = resolve;
+        })));
+}
+async function argosScreenshot(page, name, { element , has , hasText , ...options } = {}) {
+    if (!page) throw new Error("A Playwright `page` object is required.");
+    if (!name) throw new Error("The `name` argument is required.");
+    const handle = typeof element === "string" ? page.locator(element, {
+        has,
+        hasText
+    }) : element ?? page;
+    mkdir(screenshotFolder, {
+        recursive: true
+    });
+    await Promise.all([
+        page.addStyleTag({
+            content: GLOBAL_STYLES
+        }),
+        page.waitForSelector('[aria-busy="true"]', {
+            state: "hidden"
+        }),
+        page.waitForFunction(waitForImagesLoading),
+        page.waitForFunction(waitForFontLoading)
+    ]);
+    await handle.screenshot({
+        path: resolve(screenshotFolder, `${name}.png`),
+        type: "png",
+        fullPage: true,
+        mask: [
+            page.locator('[data-visual-test="blackout"]')
+        ],
+        animations: "disabled",
+        ...options
+    });
+}
+
+export { argosScreenshot };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@argos-ci/playwright",
   "description": "Visual testing solution to avoid visual regression. Playwright commands and utilities for Argos visual testing.",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "author": "Smooth Code",
   "license": "MIT",
   "repository": "github:argos-ci/argos-playwright",
@@ -24,27 +24,36 @@
   "type": "module",
   "exports": {
     ".": {
-      "import": "./index.js",
-      "require": "./index.cjs",
-      "types": "./index.d.ts",
-      "default": "./index.js"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
     },
     "./package.json": "./package.json"
   },
   "scripts": {
+    "prebuild": "rm -rf dist",
+    "build": "rollup -c",
     "test": "npx playwright test",
-    "format": "prettier --write .",
+    "format": "prettier --write . --ignore-path .gitignore",
     "check-format": "prettier --check .",
     "lint": "eslint --ignore-path .gitignore .",
     "release": "standard-version && conventional-github-releaser --preset angular"
   },
   "devDependencies": {
-    "@argos-ci/cli": "^0.4.2",
-    "@playwright/test": "^1.29.2",
+    "@argos-ci/cli": "^0.4.4",
+    "@playwright/test": "^1.30.0",
+    "@swc/cli": "^0.1.62",
+    "@swc/core": "^1.3.35",
+    "@typescript-eslint/eslint-plugin": "^5.52.0",
+    "@typescript-eslint/parser": "^5.52.0",
     "conventional-github-releaser": "^3.1.5",
-    "eslint": "^8.23.0",
-    "eslint-plugin-html": "^7.1.0",
-    "prettier": "^2.7.1",
-    "standard-version": "^9.5.0"
+    "eslint": "^8.34.0",
+    "prettier": "^2.8.4",
+    "rollup": "^3.17.1",
+    "rollup-plugin-dts": "^5.2.0",
+    "rollup-plugin-swc3": "^0.8.0",
+    "standard-version": "^9.5.0",
+    "typescript": "^4.9.5"
   }
 }

package/index.cjs

@@ -1,6 +0,0 @@
-const argosScreenshot = async (...args) => {
-  const { argosScreenshot } = await import("./index.js");
-  return argosScreenshot(...args);
-};
-
-exports.argosScreenshot = argosScreenshot;

package/index.d.ts

@@ -1,29 +0,0 @@
-import {
-  Page,
-  PageScreenshotOptions,
-  LocatorScreenshotOptions,
-  ElementHandle,
-} from "@playwright/test";
-
-export interface ArgosScreenshotOptions
-  extends Omit<
-    PageScreenshotOptions | LocatorScreenshotOptions,
-    "encoding" | "type" | "omitBackground" | "path"
-  > {
-  /**
-   * ElementHandle or string selector of the element to take a screenshot of.
-   */
-  element?: string | ElementHandle;
-}
-
-/**
- * Stabilize the UI and takes a screenshot of the application under test.
- * @example
- *    await argosScreenshot(page, "my-screenshot")
- *    await argosScreenshot(page, "my-screenshot", { fullPage: true })
- */
-export function argosScreenshot(
-  page: Page,
-  name: string,
-  options?: ArgosScreenshotOptions
-): Promise<void>;

package/index.js

@@ -1,76 +0,0 @@
-import { mkdir } from "node:fs/promises";
-import { resolve } from "node:path";
-
-const screenshotFolder = "./screenshots";
-
-export async function goto({ page, link }) {
-  await page.goto(link, { waitUntil: "networkidle" });
-}
-
-const GLOBAL_STYLES = `
-  /* Hide carets */
-  * { caret-color: transparent !important; }
-
-  /* Hide scrollbars */
-  ::-webkit-scrollbar {
-    display: none !important;
-  }
-
-  /* Generic hide */
-  [data-visual-test="transparent"] {
-    color: transparent !important;
-    font-family: monospace !important;
-    opacity: 0 !important;
-  }
-  
-  [data-visual-test="removed"] {
-    display: none !important;
-  }
-`;
-
-// Check if the fonts are loaded
-function waitForFontLoading() {
-  return document.fonts.status === "loaded";
-}
-
-// Check if the images are loaded
-async function waitForImagesLoading() {
-  return Promise.all(
-    Array.from(document.images)
-      .filter((img) => !img.complete)
-      .map(
-        (img) =>
-          new Promise((resolve) => {
-            img.onload = img.onerror = resolve;
-          })
-      )
-  );
-}
-
-export async function argosScreenshot(
-  page,
-  name,
-  { element = page, ...options } = {}
-) {
-  if (!page) throw new Error("A Playwright `page` object is required.");
-  if (!name) throw new Error("The `name` argument is required.");
-
-  mkdir(screenshotFolder, { recursive: true });
-
-  const [resolvedElement] = await Promise.all([
-    typeof element === "string" ? page.locator(element) : element,
-    page.addStyleTag({ content: GLOBAL_STYLES }),
-    page.waitForSelector('[aria-busy="true"]', { state: "hidden" }),
-    page.waitForFunction(waitForImagesLoading),
-    page.waitForFunction(waitForFontLoading),
-  ]);
-
-  await resolvedElement.screenshot({
-    path: resolve(screenshotFolder, `${name}.png`),
-    type: "png",
-    fullPage: true,
-    mask: [page.locator('[data-visual-test="blackout"]')],
-    animations: "disabled",
-    ...options,
-  });
-}