chore(webkit): driver updates for clicking/typing actions and related…

… tests (#23522)

* detect playwright-webkit browser

* fix: use stdio for CDP instead of TCP (#14348)

* wip: begin launchin webkit

* run mode works w webkit in 10.0

* reset previous cdp changes

* run driver webkit tests

* always detect webkit in non-prod

* fix version detection

* actually run new job

* cleanup

* fix run

* try caching pw binary

* npx install pw binary

* install-deps

* add experimentalSessionAndOrigin wk tests

* wk experimentalSessionAndOrigin tests

* browser icon

* fix some tests

* reset browsers.ts change

* fix more tests

* fix even more tests, skip driver CI for now

* comma

* fix server-unit-test

* fix websockets_spec

* refactor wkautomation to initialize self from static async method

* fix(proxy/prerequests): fix duplicate key behavior, fallthrough

* Apply suggestions from code review

Co-authored-by: Blue F <blue@cypress.io>

* simpler name for StackMap

* fix proxy-logging spec, some xhr specs

* fix last xhr test

* update testConfigOverrides

* skip webcam.cy.js

* reenable driver tests

* ci?

* Suggestions from code review

* skip remaining failures which won't be fixed here

* fix/skip a couple tests

* fix tests

* skip crashy specs

* skip hidden suites

* Scoping down range of skipped type tests

* Scoping down click test skips

* Updating webkit contenteditable selection handling and associated test

* Adding additional mouse event filtering when disabled. Validated by opening playwright-webkit outside of cypress and validating logged events when enabled/disabled.

* Updating click 'mouseout coords' tests to account for default style changes

* Updating a few more click 'mouse state' tests

* Getting all click tests passing with no webkit skips. Fixing _most_ type tests, selection focus is troublesome.

* Updating cross-origin type action test

* Tweaking coords for CI rendering

* Adding workaround for webkit default input selection.

* Webkit -> WebKit

* Adding logic and test for handling capture-phase focus event selections

* Type errors tests now passing

* Adding a couple more WebKit keyboard/mouse tweaks

* Couple more tweaks for special_chars tests.

* Updating contenteditable beforeinput event tests

* Making WebKit checks more consistent

* Don't expose webkit in public types

* Adding comments and doing a little cleanup

* PR updates

* Simplifying workaround for webkit focus selection

* Removing unnecessary test

* Revert "Removing unnecessary test"

This reverts commit 2c52293.

* Revert "Simplifying workaround for webkit focus selection"

This reverts commit 47d1155.

* Removing comment that is no longer applicable

* Simplifying selection logic that is now functional for all supported browsers

Co-authored-by: Zach Bloomquist <git@chary.us>
Co-authored-by: Zach Bloomquist <github@chary.us>
Co-authored-by: Blue F <blue@cypress.io>

packages/app/src/runner/logger.ts

@@ -32,7 +32,7 @@ export const logger = {
     this._logValues(consoleProps)
     this._logArgs(consoleProps)
     this._logGroups(consoleProps)
-    this._logTable(consoleProps)
+    this._logTables(consoleProps)
   },
 
   _logValues (consoleProps: any) {
@@ -118,43 +118,46 @@ export const logger = {
     })
   },
 
-  _logTable (consoleProps: any) {
-    if (isMultiEntryTable(consoleProps.table)) {
-      _.each(
-        _.sortBy(consoleProps.table, (val, key) => key),
-        (table) => {
-          return this._logTable({ table })
-        },
-      )
+  _logTables (consoleProps: any) {
+    const logTable = ({ name, data, columns }) => {
+      let tableData = data
 
-      return
-    }
+      if (Cypress.isBrowser('webkit')) {
+        // WebKit will hang when we attempt to log element references
+        // within a table. We replace the element with a simplified display
+        // string in this case.
+        // https://bugs.webkit.org/show_bug.cgi?id=244100
 
-    const table = this._getTable(consoleProps)
+        const getSimplifiedElementDisplay = (element: Element) => {
+          let display = element.tagName.toLowerCase()
 
-    if (!table) return
+          if (element.id) {
+            display += `#${element.id}`
+          }
 
-    if (_.isArray(table)) {
-      console.table(table)
-    } else {
-      console.group(table.name)
-      console.table(table.data, table.columns)
-      console.groupEnd()
-    }
-  },
+          element.classList.forEach((className) => {
+            display += `.${className}`
+          })
 
-  _getTable (consoleProps: any): Table | Table[] | undefined {
-    const table = _.result<Table | Table[]>(consoleProps, 'table')
+          return display
+        }
 
-    if (!table) return
+        tableData = data.map((rowObj) => {
+          return Object.entries(rowObj).reduce((acc: any, value) => {
+            acc[value[0]] = _.isElement(value[1]) ? getSimplifiedElementDisplay(value[1] as Element) : value[1]
 
-    return table
-  },
-}
+            return acc
+          }, {})
+        })
+      }
+
+      console.group(name)
+      console.table(tableData, columns)
+      console.groupEnd()
+    }
 
-const isMultiEntryTable = (table: Table) => {
-  return !_.isFunction(table) &&
-  !_.some(_.keys(table)
-  .map((x) => isNaN(parseInt(x, 10)))
-  .filter(Boolean), true)
+    _.each(_.sortBy(consoleProps.table, (val, key) => key), (getTableData: () => Table) => {
+      return logTable(getTableData())
+    })
+  },
 }

packages/driver/cypress/e2e/commands/actions/click.cy.js

@@ -45,9 +45,9 @@ const getMidPoint = (el) => {
 }
 
 const isFirefox = Cypress.isBrowser('firefox')
+const isWebKit = Cypress.isBrowser('webkit')
 
-// TODO(webkit): fix+unskip for experimental webkit
-describe('src/cy/commands/actions/click', { browser: '!webkit' }, () => {
+describe('src/cy/commands/actions/click', () => {
   beforeEach(() => {
     cy.visit('/fixtures/dom.html')
   })
@@ -3596,7 +3596,8 @@ describe('src/cy/commands/actions/click', { browser: '!webkit' }, () => {
 
       cy.getAll('el', 'mousedown contextmenu mouseup').each(shouldNotBeCalled)
 
-      cy.getAll('el', 'pointerdown pointerup').each(isFirefox ? shouldNotBeCalled : shouldBeCalled)
+      // On disabled inputs, pointer events are still fired in chrome, not in firefox or webkit
+      cy.getAll('el', 'pointerdown pointerup').each(isFirefox || isWebKit ? shouldNotBeCalled : shouldBeCalled)
     })
 
     it('rightclick cancel contextmenu', () => {
@@ -3929,8 +3930,7 @@ describe('src/cy/commands/actions/click', { browser: '!webkit' }, () => {
   })
 })
 
-// TODO(webkit): fix+unskip for experimental webkit
-describe('shadow dom', { browser: '!webkit' }, () => {
+describe('shadow dom', () => {
   beforeEach(() => {
     cy.visit('/fixtures/shadow-dom.html')
   })
@@ -3993,8 +3993,7 @@ describe('shadow dom', { browser: '!webkit' }, () => {
   })
 })
 
-// TODO(webkit): fix+unskip for experimental webkit
-describe('mouse state', { browser: '!webkit' }, () => {
+describe('mouse state', () => {
   describe('mouse/pointer events', () => {
     beforeEach(() => {
       cy.visit('http://localhost:3500/fixtures/dom.html')
@@ -4064,12 +4063,28 @@ describe('mouse state', { browser: '!webkit' }, () => {
           y: 10,
         }
 
+        const coordsWebKit = {
+          clientX: 500,
+          clientY: 10,
+          layerX: 500,
+          layerY: 226,
+          pageX: 500,
+          pageY: 226,
+          screenX: 500,
+          screenY: 10,
+          x: 500,
+          y: 10,
+        }
+
         let coords
 
         switch (Cypress.browser.family) {
           case 'firefox':
             coords = coordsFirefox
             break
+          case 'webkit':
+            coords = coordsWebKit
+            break
           default:
             coords = coordsChrome
             break
@@ -4498,9 +4513,10 @@ describe('mouse state', { browser: '!webkit' }, () => {
       // cy.wrap(onAction).should('calledOnce')
 
       cy.getAll('btn', 'pointerover pointerenter').each(shouldBeCalledOnce)
-      cy.getAll('btn', 'pointerdown pointerup').each(isFirefox ? shouldNotBeCalled : shouldBeCalledOnce)
 
-      cy.getAll('btn', 'mouseover mouseenter').each(isFirefox ? shouldBeCalled : shouldNotBeCalled)
+      // On disabled inputs, pointer events are still fired in chrome, not in firefox or webkit
+      cy.getAll('btn', 'pointerdown pointerup').each(isFirefox || isWebKit ? shouldNotBeCalled : shouldBeCalledOnce)
+      cy.getAll('btn', 'mouseover mouseenter').each(isFirefox || isWebKit ? shouldBeCalled : shouldNotBeCalled)
       cy.getAll('btn', 'mousedown mouseup click').each(shouldNotBeCalled)
     })
 
@@ -4524,7 +4540,9 @@ describe('mouse state', { browser: '!webkit' }, () => {
       cy.get('#btn').click()
 
       cy.getAll('btn', 'pointerdown mousedown').each(shouldBeCalledOnce)
-      cy.getAll('btn', 'pointerup').each(isFirefox ? shouldNotBeCalled : shouldBeCalledOnce)
+
+      // On disabled inputs, pointer events are still fired in chrome, not in firefox or webkit
+      cy.getAll('btn', 'pointerup').each(isFirefox || isWebKit ? shouldNotBeCalled : shouldBeCalledOnce)
 
       cy.getAll('btn', 'mouseup click').each(shouldNotBeCalled)
     })
@@ -4599,8 +4617,8 @@ describe('mouse state', { browser: '!webkit' }, () => {
 
       cy.getAll('btn', 'mousedown mouseup click').each(shouldNotBeCalled)
 
-      // on disabled inputs, pointer events are still fired in chrome, not in firefox
-      cy.getAll('btn', 'pointerdown pointerup').each(isFirefox ? shouldNotBeCalled : shouldBeCalled)
+      // On disabled inputs, pointer events are still fired in chrome, not in firefox or webkit
+      cy.getAll('btn', 'pointerdown pointerup').each(isFirefox || isWebKit ? shouldNotBeCalled : shouldBeCalled)
     })
 
     it('can target new element after mousedown sequence', () => {