@sit-onyx/playwright-utils 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./screenshots/index";
-export * from "./screenshots/types";
+export * from "./screenshots/index.js";
+export * from "./screenshots/types.js";

package/dist/screenshots/index.d.ts

@@ -1,5 +1,5 @@
 import type { Locator, Page } from "@playwright/test";
-import type { HookContext, MatrixScreenshotTestOptions, UseMatrixScreenshotTestOptions } from "./types";
+import type { HookContext, MatrixScreenshotTestOptions, UseMatrixScreenshotTestOptions } from "./types.js";
 /**
  * Creates a screenshot utility that can be used to capture matrix screenshots.
  * Useful for capturing a single screenshot/image that contains multiple variants of a component.

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@sit-onyx/playwright-utils",
   "description": "Utilities for Vue component testing with Playwright",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "type": "module",
+  "author": "Schwarz IT KG",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/schwarzit/onyx",
@@ -19,8 +23,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     }
   },
   "peerDependencies": {
@@ -32,7 +35,7 @@
   "devDependencies": {
     "typescript": "5.8.3",
     "vite": "7.0.0",
-    "@sit-onyx/shared": "1.0.0-beta.3"
+    "@sit-onyx/shared": "1.0.0-beta.4"
   },
   "scripts": {
     "build": "vite build && vue-tsc --emitDeclarationOnly"

package/dist/index.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("playwright/jsx-runtime"),h=require("@playwright/experimental-ct-vue"),d=t=>t.replace(/\W/g,"-"),E=t=>{const o=()=>{const e=[`"blank ${t.columns.map(r=>`column-${d(r)}`).join(" ")}"`];return t.rows.forEach(r=>{e.push(`"row-${d(r)} ${t.columns.map(n=>`${d(r)}-${d(n)}`).join(" ")}"`)}),e.join(`
-`)};return i.jsxs("div",{style:{width:"max-content",fontFamily:"Arial, sans-serif"},children:[i.jsxs("div",{style:{marginBottom:"2rem"},children:[i.jsxs("h1",{style:{fontSize:"1.25rem",lineHeight:"1.75rem",margin:"0"},children:["Screenshot test: ",t.name]}),i.jsxs("div",{children:["Browser: ",t.browserName]})]}),i.jsxs("div",{style:{display:"grid",gap:"2rem",gridTemplateRows:"auto",width:"max-content",alignItems:"center",justifyContent:"center",gridTemplateColumns:`auto repeat(${t.columns.length}, 1fr)`,gridTemplateAreas:o()},children:[i.jsx("div",{style:{gridArea:"blank"}}),t.children]})]})},k=({defaults:t})=>({executeMatrixScreenshotTest:async e=>{h.test(`${e.name}`,async({mount:r,page:n,browserName:g,context:f})=>{h.test.setTimeout(e.columns.length*e.rows.length*25e3);const b=async(a,s,l)=>{await n.getByRole("document").focus(),await n.getByRole("document").hover({position:{x:0,y:0},force:!0}),await n.mouse.up();const c=await r(a);await t?.hooks?.beforeEach?.(c,n,s,l,e.context),await e.hooks?.beforeEach?.(c,n,s,l,e.context);const x=await c.screenshot({animations:"disabled"}),m=await c.boundingBox(),A=`${d(l)}-${d(s)}`;return await t?.hooks?.afterEach?.(c,n,s,l,e.context),await e.hooks?.afterEach?.(c,n,s,l,e.context),{box:m,id:A,screenshot:x}},u=new Map;for(const a of e.rows)for(const s of e.columns){const l=e.component(s,a),c=e.removePadding??t?.removePadding,m=await b(i.jsx("div",{style:{display:"grid",width:"max-content",padding:c?void 0:"1rem"},children:l}),s,a);u.set(m.id,m)}const w="/_playwright-matrix-screenshot";await f.route(`${w}*`,(a,s)=>{const c=new URL(s.url()).searchParams.get("id")??"";return a.fulfill({status:200,contentType:"image/png",body:u.get(c)?.screenshot})});const v=Array.from(u.values()).map(({box:a,id:s})=>i.jsx("img",{width:a?.width,height:a?.height,style:{gridArea:s},src:`${w}?id=${s}`,alt:s})),S=e.rows.map(a=>y({name:a,type:"row"})),$=e.columns.map(a=>y({name:a,type:"column"})),j=E({columns:e.columns,rows:e.rows,name:e.name,browserName:g,children:[...v,...S,...$]}),T=await r(j);await h.expect(T).toHaveScreenshot(`${e.name}.png`),await n.unroute(`${w}*`)})}}),P=async t=>{await h.expect(t).toBeVisible(),await t.evaluate(o=>{o.style.height=`${o.scrollHeight}px`,o.style.width=`${o.scrollWidth}px`})},y=t=>i.jsx("div",{style:{textAlign:"center",gridArea:`${t.type}-${d(t.name)}`},children:t.name}),M=async({component:t,page:o,state:e})=>{if(e==="hover"&&await t.hover(),e==="focus-visible"&&await o.keyboard.press("Tab"),e==="active"){const r=await t.boundingBox(),n={x:r.x+r.width/2,y:r.y+r.height/2};await o.mouse.move(n.x,n.y),await o.mouse.down()}};exports.adjustSizeToAbsolutePosition=P;exports.useFocusStateHooks=M;exports.useMatrixScreenshotTest=k;