tabwright 1.0.0

package/src/snapshots/hacker-news-accessibility-full.md

@@ -0,0 +1,81 @@
+[return value]       - layouttable:
+          - layouttablerow:
+            - layouttablecell "Hacker Newsnew | past | comments | ask | show | jobs | submit login":
+              - layouttable:
+                  - layouttablerow:
+                    - layouttablecell:
+                      - role=link
+                    - layouttablecell "Hacker Newsnew | past | comments | ask | show | jobs | submit":
+                      - role=link[name="Hacker News"]
+                      - role=link[name="new"]
+                      - role=link[name="past"] >> nth=0
+                      - role=link[name="comments"]
+                      - role=link[name="ask"]
+                      - role=link[name="show"]
+                      - role=link[name="jobs"]
+                      - role=link[name="submit"]
+                    - layouttablecell:
+                      - role=link[name="login"]
+          - layouttablerow:
+            - layouttablecell "Y Combinator (ycombinator.com) 57 points by pg on Oct 9, 2006 | hide | past | favorite | 3 comments sama on Oct 9, 2006 | [–] \"the rising star of venture capital\" -unknown VC eating lunch on SHR pg on Oct 9, 2006":
+              - layouttable:
+                  - layouttablerow:
+                    - layouttablecell:
+                      - link [id="up_1"]
+                    - layouttablecell "Y Combinator (ycombinator.com)":
+                      - role=link[name="Y Combinator"]
+                      - role=link[name="ycombinator.com"]
+                  - layouttablerow:
+                    - layouttablecell "57 points by pg on Oct 9, 2006 | hide | past | favorite | 3 comments":
+                      - role=link[name="pg"] >> nth=0
+                      - role=link[name="on Oct 9, 2006"] >> nth=0
+                      - role=link[name="hide"]
+                      - role=link[name="past"] >> nth=1
+                      - role=link[name="favorite"]
+                      - role=link[name="3 comments"]
+              - layouttable:
+                  - layouttablerow:
+                    - layouttablecell:
+                      - layouttable:
+                          - layouttablerow:
+                            - layouttablecell:
+                              - link [id="up_15"]
+                            - layouttablecell "sama on Oct 9, 2006 | [–] \"the rising star of venture capital\" -unknown VC eating lunch on SHR":
+                              - role=link[name="sama"]
+                              - role=link[name="on Oct 9, 2006"] >> nth=1
+                              - link "[–]" [id="15"]
+                  - layouttablerow:
+                    - layouttablecell:
+                      - layouttable:
+                          - layouttablerow:
+                            - layouttablecell:
+                              - link [id="up_17"]
+                            - layouttablecell "pg on Oct 9, 2006 | | [–] Is there anywhere to eat on Sandhill Road?":
+                              - role=link[name="pg"] >> nth=1
+                              - role=link[name="on Oct 9, 2006"] >> nth=2
+                              - link "[–]" [id="17"]
+                  - layouttablerow:
+                    - layouttablecell:
+                      - layouttable:
+                          - layouttablerow:
+                            - layouttablecell:
+                              - link [id="up_1079"]
+                            - layouttablecell "dmon on Feb 25, 2007 | | | [–] sure":
+                              - role=link[name="dmon"]
+                              - role=link[name="on Feb 25, 2007"]
+                              - link "[–]" [id="1079"]
+          - layouttablerow:
+            - layouttablecell "Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact":
+                - role=link[name="Guidelines"]
+                - role=link[name="FAQ"]
+                - role=link[name="Lists"]
+                - role=link[name="API"]
+                - role=link[name="Security"]
+                - role=link[name="Legal"]
+                - role=link[name="Apply to YC"]
+                - role=link[name="Contact"]
+                - form:
+                  - text: "Search:"
+                  - role=textbox
+
+use refToLocator({ ref: 'e3' }) to get locators for ref strings.

package/src/snapshots/hacker-news-accessibility-interactive.md

@@ -0,0 +1,43 @@
+[return value]           - role=link
+          - role=link[name="Hacker News"]
+          - role=link[name="new"]
+          - role=link[name="past"] >> nth=0
+          - role=link[name="comments"]
+          - role=link[name="ask"]
+          - role=link[name="show"]
+          - role=link[name="jobs"]
+          - role=link[name="submit"]
+          - role=link[name="login"]
+          - link [id="up_1"]
+          - role=link[name="Y Combinator"]
+          - role=link[name="ycombinator.com"]
+          - role=link[name="pg"] >> nth=0
+          - role=link[name="on Oct 9, 2006"] >> nth=0
+          - role=link[name="hide"]
+          - role=link[name="past"] >> nth=1
+          - role=link[name="favorite"]
+          - role=link[name="3 comments"]
+            - link [id="up_15"]
+            - role=link[name="sama"]
+            - role=link[name="on Oct 9, 2006"] >> nth=1
+            - link "[–]" [id="15"]
+            - link [id="up_17"]
+            - role=link[name="pg"] >> nth=1
+            - role=link[name="on Oct 9, 2006"] >> nth=2
+            - link "[–]" [id="17"]
+            - link [id="up_1079"]
+            - role=link[name="dmon"]
+            - role=link[name="on Feb 25, 2007"]
+            - link "[–]" [id="1079"]
+          - role=link[name="Guidelines"]
+          - role=link[name="FAQ"]
+          - role=link[name="Lists"]
+          - role=link[name="API"]
+          - role=link[name="Security"]
+          - role=link[name="Legal"]
+          - role=link[name="Apply to YC"]
+          - role=link[name="Contact"]
+          - form:
+            - role=textbox
+
+use refToLocator({ ref: 'e3' }) to get locators for ref strings.

package/src/snapshots/page-markdown-output.txt

@@ -0,0 +1,16 @@
+Console output:
+[log] # Test Article Title
+
+Home About
+Test Article Title
+
+This is the first paragraph of the article content.
+
+This is the second paragraph with more details about the topic.
+
+The article continues with important information here.
+
+Related Posts
+Post 1
+Post 2
+Copyright 2024

package/src/snapshots/shadcn-ui-accessibility-full.md

@@ -0,0 +1,201 @@
+[return value]   - banner:
+        - navigation:
+          - role=link[name="Home"] >> nth=0
+          - role=link[name="Docs"]
+          - role=link[name="Components"]
+          - role=link[name="Blocks"]
+          - role=link[name="Charts"]
+          - role=link[name="Directory"]
+          - role=link[name="Typeset"]
+          - role=link[name="Create"]
+            - role=button[name="Search documentation..."]
+          - role=link[name="119k"]
+          - role=button[name="Toggle theme"]
+            - role=link[name="New"]
+  - main:
+          - role=link[name="Introducing shadcn/typeset"]
+          - heading "The Foundation for your Design System"
+          - paragraph:
+            - text: "A set of beautifully designed components that you can customize, extend, and build on. Start here then make it your own. Open Source. Open Code."
+            - role=link[name="Build Your Own"]
+                  - role=button[name="Button"]
+                  - role=button[name="Secondary"]
+                  - role=button[name="Outline"]
+                  - textbox "Name" [id="base-ui-_R_l4l9bsnqbr6lb_"]
+                  - role=textbox[name="Message"]
+                      - text: "Badge"
+                      - text: "Secondary"
+                  - radiogroup "Fruit preference":
+                    - radio "Apple" [id="base-ui-_R_39kl9bsnqbr6lb_"]
+                    - radio "Banana" [id="base-ui-_R_59kl9bsnqbr6lb_"]
+                    - checkbox "Enable email alerts" [id="base-ui-_R_1dkl9bsnqbr6lb_"]
+                  - switch "Enable compact notifications" [id="base-ui-_R_hkl9bsnqbr6lb_"]
+                  - button "Alert Dialog" [id="base-ui-_R_6m4l9bsnqbr6lb_"]
+                  - role=button[name="Button Group"]
+                  - button "Open quick actions" [id="base-ui-_R_7a4l9bsnqbr6lb_"]
+                        - text: "Overview"
+                        - list:
+                          - listitem:
+                            - role=button[name="Analytics"]
+                          - listitem:
+                            - role=button[name="Transactions"]
+                          - listitem:
+                            - role=button[name="Investments"]
+                          - listitem:
+                            - role=button[name="Accounts"]
+                          - listitem:
+                            - role=button[name="Spending"]
+                        - text: "Planning"
+                        - list:
+                          - listitem:
+                            - role=button[name="Documents"]
+                          - listitem:
+                            - role=button[name="Budget"]
+                          - listitem:
+                            - role=button[name="Reports"]
+                          - listitem:
+                            - role=button[name="Goals"]
+                          - listitem:
+                            - role=button[name="Calendar"]
+                        - text: "Support"
+                        - list:
+                          - listitem:
+                            - role=button[name="Help Center"]
+                          - listitem:
+                            - role=button[name="Docs"]
+                          - listitem:
+                            - role=button[name="Contact Us"]
+                          - listitem:
+                            - role=button[name="Status"]
+                          - listitem:
+                            - role=button[name="Community"]
+                        - text: "Account"
+                        - list:
+                          - listitem:
+                            - role=button[name="Profile"]
+                          - listitem:
+                            - role=button[name="Billing"]
+                          - listitem:
+                            - role=button[name="Notifications"]
+                          - listitem:
+                            - role=button[name="Security"]
+                          - listitem:
+                            - role=button[name="Appearance"]
+                - text: "Savings Targets"
+                - text: "Active milestones for 2024 across your portfolio. Monitor how close you are to each savings goal."
+                - list:
+                  - listitem:
+                      - paragraph:
+                        - text: "RETIREMENT"
+                        - text: "$420,000"
+                      - progressbar "Retirement savings progress":
+                        - text: "x"
+                        - text: "65% achieved"
+                        - text: "$273,000"
+                  - listitem:
+                      - paragraph:
+                        - text: "REAL ESTATE"
+                        - text: "$85,000"
+                      - progressbar "Real estate savings progress":
+                        - text: "x"
+                        - text: "32% achieved"
+                        - text: "$27,200"
+                - text: "You have not met your targets for this year."
+                - text: "Contribution History"
+                - text: "Last 6 months of activity"
+                - image "Last 6 months of contribution activity":
+                      - text: "Dec"
+                      - text: "Jan"
+                      - text: "Feb"
+                      - text: "Mar"
+                      - text: "Apr"
+                      - paragraph:
+                        - text: "UPCOMING"
+                        - text: "May 2024"
+                        - text: "Scheduled"
+                      - paragraph:
+                        - text: "SAVINGS PLAN"
+                        - text: "Accelerated"
+                        - text: "Recurring"
+                - role=button[name="View Full Report"]
+                - text: "Claimable Balance"
+                - text: "$"
+                - text: "1,211.29"
+                  - text: "Pending Setup"
+                        - text: "Net Royalties"
+                        - text: "$"
+                        - text: "1,248.75"
+                        - text: "Processing Fee"
+                        - text: "-$"
+                        - text: "37.46"
+                        - text: "Total Ready to Claim"
+                        - text: "$"
+                        - text: "1,211.29"
+                        - text: "USD"
+                - text: "Once your bank is connected, balances over $10.00 are automatically eligible for monthly distribution on the 15th of each month."
+                - text: "Q2 Dividend Income"
+                - text: "Quarterly dividend payouts across your portfolio holdings."
+                - role=button[name="Dismiss dividend income"]
+                - list:
+                  - listitem:
+                        - text: "Vanguard"
+                      - paragraph:
+                        - text: "450 Shares"
+                    - image "Vanguard quarterly dividends"
+                  - listitem:
+                        - text: "S&P 500 VOO"
+                      - paragraph:
+                        - text: "112 Shares"
+                    - image "S&P 500 VOO quarterly dividends"
+                  - listitem:
+                        - text: "Apple AAPL"
+                      - paragraph:
+                        - text: "85 Shares"
+                    - image "Apple AAPL quarterly dividends"
+                  - listitem:
+                        - text: "Realty Income"
+                      - paragraph:
+                        - text: "320 Shares"
+                    - image "Realty Income quarterly dividends"
+                  - image "Connect device QR code"
+                - text: "Scan to connect your mobile device"
+                - text: "Open the Ledger mobile app and scan this code to link your device."
+                  - text: "New Chat"
+                  - text: "How can I help you today?"
+                  - role=button[name="Reset conversation"]
+                      - text: "Morning, shadcn!"
+                      - text: "What are we working on today? Press send to start a new conversation"
+                  - form:
+                        - text: "I'm building a chat for our app and the scroll behavior is driving me nuts. Every time the AI streams a reply, the whole thread jumps around."
+                    - button "Add files" [id="radix-_R_1mq59bsnqbr6lb_"]
+                    - role=button[name="Send"]
+                - navigation "breadcrumb":
+                  - list:
+                    - listitem:
+                      - role=link[name="Home"] >> nth=1
+                    - listitem:
+                      - button "Account options" [id="base-ui-_R_1mu59bsnqbr6lb_"]
+                    - listitem:
+                      - role=link[name="Payments"]
+                - list:
+                  - listitem:
+                    - role=link[name="Change transfer limit Adjust how much you can send from your balance."]
+                  - listitem:
+                    - role=link[name="Scheduled transfers Set up a transfer to send at a later date."]
+                  - listitem:
+                    - role=link[name="Recurring card payments Manage your repeated card transactions."]
+  - contentinfo:
+        - text: "Built by"
+        - role=link[name="shadcn"]
+        - text: "at"
+        - role=link[name="Vercel"]
+        - text: ". The source code is available on"
+        - role=link[name="GitHub"]
+        - text: "."
+  - region "Notifications alt+T"
+  - toolbar "Tabwright tools":
+    - role=button[name="Pin element — click any element to copy inspection code for a tabwright -e call"]
+    - role=button[name="Start Tabwright demonstration recording"]
+    - role=button[name="Close Tabwright toolbar"]
+
+use refToLocator({ ref: 'e3' }) to get locators for ref strings.

package/src/snapshots/shadcn-ui-accessibility-interactive.md

@@ -0,0 +1,109 @@
+[return value]   - banner:
+        - navigation:
+          - role=link[name="Home"] >> nth=0
+          - role=link[name="Docs"]
+          - role=link[name="Components"]
+          - role=link[name="Blocks"]
+          - role=link[name="Charts"]
+          - role=link[name="Directory"]
+          - role=link[name="Typeset"]
+          - role=link[name="Create"]
+            - role=button[name="Search documentation..."]
+          - role=link[name="119k"]
+          - role=button[name="Toggle theme"]
+            - role=link[name="New"]
+  - main:
+          - role=link[name="Introducing shadcn/typeset"]
+            - role=link[name="Build Your Own"]
+                  - role=button[name="Button"]
+                  - role=button[name="Secondary"]
+                  - role=button[name="Outline"]
+                  - textbox "Name" [id="base-ui-_R_l4l9bsnqbr6lb_"]
+                  - role=textbox[name="Message"]
+                  - radio "Apple" [id="base-ui-_R_39kl9bsnqbr6lb_"]
+                  - radio "Banana" [id="base-ui-_R_59kl9bsnqbr6lb_"]
+                    - checkbox "Enable email alerts" [id="base-ui-_R_1dkl9bsnqbr6lb_"]
+                  - switch "Enable compact notifications" [id="base-ui-_R_hkl9bsnqbr6lb_"]
+                  - button "Alert Dialog" [id="base-ui-_R_6m4l9bsnqbr6lb_"]
+                  - role=button[name="Button Group"]
+                  - button "Open quick actions" [id="base-ui-_R_7a4l9bsnqbr6lb_"]
+                        - list:
+                          - listitem:
+                            - role=button[name="Analytics"]
+                          - listitem:
+                            - role=button[name="Transactions"]
+                          - listitem:
+                            - role=button[name="Investments"]
+                          - listitem:
+                            - role=button[name="Accounts"]
+                          - listitem:
+                            - role=button[name="Spending"]
+                        - list:
+                          - listitem:
+                            - role=button[name="Documents"]
+                          - listitem:
+                            - role=button[name="Budget"]
+                          - listitem:
+                            - role=button[name="Reports"]
+                          - listitem:
+                            - role=button[name="Goals"]
+                          - listitem:
+                            - role=button[name="Calendar"]
+                        - list:
+                          - listitem:
+                            - role=button[name="Help Center"]
+                          - listitem:
+                            - role=button[name="Docs"]
+                          - listitem:
+                            - role=button[name="Contact Us"]
+                          - listitem:
+                            - role=button[name="Status"]
+                          - listitem:
+                            - role=button[name="Community"]
+                        - list:
+                          - listitem:
+                            - role=button[name="Profile"]
+                          - listitem:
+                            - role=button[name="Billing"]
+                          - listitem:
+                            - role=button[name="Notifications"]
+                          - listitem:
+                            - role=button[name="Security"]
+                          - listitem:
+                            - role=button[name="Appearance"]
+                - list:
+                  - listitem
+                  - listitem
+                - role=button[name="View Full Report"]
+                - role=button[name="Dismiss dividend income"]
+                - list:
+                  - listitem
+                  - listitem
+                  - listitem
+                  - listitem
+                  - role=button[name="Reset conversation"]
+                  - form:
+                    - button "Add files" [id="radix-_R_1mq59bsnqbr6lb_"]
+                    - role=button[name="Send"]
+                - navigation "breadcrumb":
+                  - list:
+                    - listitem:
+                      - role=link[name="Home"] >> nth=1
+                    - listitem:
+                      - button "Account options" [id="base-ui-_R_1mu59bsnqbr6lb_"]
+                    - listitem:
+                      - role=link[name="Payments"]
+                - list:
+                  - listitem:
+                    - role=link[name="Change transfer limit Adjust how much you can send from your balance."]
+                  - listitem:
+                    - role=link[name="Scheduled transfers Set up a transfer to send at a later date."]
+                  - listitem:
+                    - role=link[name="Recurring card payments Manage your repeated card transactions."]
+  - contentinfo:
+        - role=link[name="shadcn"]
+        - role=link[name="Vercel"]
+        - role=link[name="GitHub"]
+  - region "Notifications alt+T"
+
+use refToLocator({ ref: 'e3' }) to get locators for ref strings.

package/src/start-relay-server.ts

@@ -0,0 +1,69 @@
+import { startTabwrightCDPRelayServer } from './cdp-relay.js'
+import { createFileLogger } from './create-logger.js'
+import { waitForRelayVersion } from './relay-client.js'
+import { LOG_CDP_FILE_PATH } from './utils.js'
+
+process.title = 'tabwright-ws-server'
+
+const logger = createFileLogger()
+
+process.on('uncaughtException', async (err) => {
+  await logger.error('Uncaught Exception:', err)
+  process.exit(1)
+})
+
+process.on('unhandledRejection', async (reason) => {
+  await logger.error('Unhandled Rejection:', reason)
+  process.exit(1)
+})
+
+process.on('exit', async (code) => {
+  await logger.log(`Process exiting with code: ${code}`)
+})
+
+export async function startServer({
+  port = 19988,
+  host = '127.0.0.1',
+  token,
+}: { port?: number; host?: string; token?: string } = {}) {
+  let server
+  try {
+    server = await startTabwrightCDPRelayServer({ port, host, token, logger })
+  } catch (err: unknown) {
+    // When two relay processes race to start (issue #75), the loser gets
+    // EADDRINUSE. Check if the winner is a valid relay and exit cleanly
+    // instead of crashing with a scary error in the logs.
+    const errWithCode = err as NodeJS.ErrnoException
+    if (errWithCode?.code === 'EADDRINUSE') {
+      // The winner may have bound the port but not be ready to answer /version
+      // yet, so poll for up to 2 seconds before giving up.
+      const version = await waitForRelayVersion({ port })
+      if (version) {
+        await logger.log(`Another relay (v${version}) already bound to port ${port}, exiting gracefully`)
+        process.exit(0)
+      }
+      await logger.error(`Port ${port} is in use by a non-relay process`)
+      process.exit(1)
+    }
+    throw err
+  }
+
+  console.log('CDP Relay Server running. Press Ctrl+C to stop.')
+  console.log('Logs are being written to:', logger.logFilePath)
+  console.log('CDP logs are being written to:', LOG_CDP_FILE_PATH)
+
+  process.on('SIGINT', () => {
+    console.log('\nShutting down...')
+    server.close()
+    process.exit(0)
+  })
+
+  process.on('SIGTERM', () => {
+    console.log('\nShutting down...')
+    server.close()
+    process.exit(0)
+  })
+
+  return server
+}
+startServer().catch(logger.error)

package/src/styles-examples.ts

@@ -0,0 +1,84 @@
+import { page, getStylesForLocator, formatStylesAsText, console } from './debugger-examples-types.js'
+
+// Example: Get styles for an element and display them
+async function getElementStyles() {
+  const loc = page.locator('.my-button')
+  const styles = await getStylesForLocator({ locator: loc })
+  console.log(formatStylesAsText(styles))
+}
+
+// Example: Inspect computed styles for a specific element
+async function inspectButtonStyles() {
+  const button = page.getByRole('button', { name: 'Submit' })
+  const styles = await getStylesForLocator({ locator: button })
+
+  console.log('Element:', styles.element)
+
+  if (styles.inlineStyle) {
+    console.log('Inline styles:', styles.inlineStyle)
+  }
+
+  for (const rule of styles.rules) {
+    console.log(`${rule.selector}: ${JSON.stringify(rule.declarations)}`)
+    if (rule.source) {
+      console.log(`  Source: ${rule.source.url}:${rule.source.line}`)
+    }
+  }
+}
+
+// Example: Include browser default (user-agent) styles
+async function getStylesWithUserAgent() {
+  const loc = page.locator('input[type="text"]')
+  const styles = await getStylesForLocator({
+    locator: loc,
+    includeUserAgentStyles: true,
+  })
+  console.log(formatStylesAsText(styles))
+}
+
+// Example: Find where a CSS property is defined
+async function findPropertySource() {
+  const loc = page.locator('.card')
+  const styles = await getStylesForLocator({ locator: loc })
+
+  const backgroundRule = styles.rules.find((r) => 'background-color' in r.declarations)
+  if (backgroundRule) {
+    console.log('background-color defined by:', backgroundRule.selector)
+    if (backgroundRule.source) {
+      console.log(`  at ${backgroundRule.source.url}:${backgroundRule.source.line}`)
+    }
+  }
+}
+
+// Example: Check inherited styles
+async function checkInheritedStyles() {
+  const loc = page.locator('.nested-text')
+  const styles = await getStylesForLocator({ locator: loc })
+
+  const inheritedRules = styles.rules.filter((r) => r.inheritedFrom)
+  for (const rule of inheritedRules) {
+    console.log(`Inherited from ${rule.inheritedFrom}: ${rule.selector}`)
+    console.log('  Properties:', rule.declarations)
+  }
+}
+
+// Example: Compare styles between two elements
+async function compareStyles() {
+  const primary = await getStylesForLocator({ locator: page.locator('.btn-primary') })
+  const secondary = await getStylesForLocator({ locator: page.locator('.btn-secondary') })
+
+  console.log('Primary button:')
+  console.log(formatStylesAsText(primary))
+
+  console.log('Secondary button:')
+  console.log(formatStylesAsText(secondary))
+}
+
+export {
+  getElementStyles,
+  inspectButtonStyles,
+  getStylesWithUserAgent,
+  findPropertySource,
+  checkInheritedStyles,
+  compareStyles,
+}