-
Notifications
You must be signed in to change notification settings - Fork 3.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
chore(webkit): driver updates for clicking/typing actions and related tests #23522
Changes from 64 commits
de8e6c3
d0d1736
818c7de
a7279e5
45b5286
ecd6f0f
505c0dd
35b4039
ceba06f
68ebaca
a5a0fc6
f974e99
25b8fc9
411a2f1
83c58d5
def14cc
e85025c
53db500
12b3cab
37de56a
32ed232
3acc19b
0681f0a
67fdd2d
58b2d39
406d8ec
8fb785a
b997ff0
14270e1
43b2f0a
ad863e2
ebc6335
6620008
c8c7ac7
fb66f8f
71639e2
9ac53fd
b7117fe
f6f2513
f4a432b
8ca3edc
82950c5
cb3821c
50c5ae6
bd3606c
4cbf03f
ab0afae
f403085
af4bc78
c6bd5c3
2c5f3a3
1b1e010
6bb9bcc
cf7af74
8f97a38
5e71864
d585ee2
1814b02
9c35a0e
b57d8f8
4e5d0ac
521cb77
33cc866
ef49430
5bc01fd
48d2010
f082b2d
47d1155
2c52293
455ea3f
822f4c0
3468805
b986f8e
a694163
31cb6fd
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Woah, major bug in webkit. |
||
// 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) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This seems similar to https://github.com/cypress-io/cypress/blob/develop/packages/driver/src/dom/elements/utils.ts#L45 - or are they different enough not to warrant reuse? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. They are pretty close. I wrote the current version to match what Chrome renders in its tables, the util would produce slightly different results. But we could reuse if there are strong feelings either way, it's exposed in app through There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Up to you, I do not have strong feelings about this 💯 |
||
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()) | ||
}) | ||
}, | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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,7 @@ 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) | ||
cy.getAll('el', 'pointerdown pointerup').each(isFirefox || isWebKit ? shouldNotBeCalled : shouldBeCalled) | ||
}) | ||
|
||
it('rightclick cancel contextmenu', () => { | ||
|
@@ -3929,8 +3929,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 +3992,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 +4062,28 @@ describe('mouse state', { browser: '!webkit' }, () => { | |
y: 10, | ||
} | ||
|
||
const coordsWebKit = { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The coordinates vary per-browser due to differences in the default stylesheet. |
||
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 +4512,9 @@ 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', 'pointerdown pointerup').each(isFirefox || isWebKit ? shouldNotBeCalled : shouldBeCalledOnce) | ||
|
||
cy.getAll('btn', 'mouseover mouseenter').each(isFirefox ? shouldBeCalled : shouldNotBeCalled) | ||
cy.getAll('btn', 'mouseover mouseenter').each(isFirefox || isWebKit ? shouldBeCalled : shouldNotBeCalled) | ||
cy.getAll('btn', 'mousedown mouseup click').each(shouldNotBeCalled) | ||
}) | ||
|
||
|
@@ -4524,7 +4538,7 @@ describe('mouse state', { browser: '!webkit' }, () => { | |
cy.get('#btn').click() | ||
|
||
cy.getAll('btn', 'pointerdown mousedown').each(shouldBeCalledOnce) | ||
cy.getAll('btn', 'pointerup').each(isFirefox ? shouldNotBeCalled : shouldBeCalledOnce) | ||
cy.getAll('btn', 'pointerup').each(isFirefox || isWebKit ? shouldNotBeCalled : shouldBeCalledOnce) | ||
|
||
cy.getAll('btn', 'mouseup click').each(shouldNotBeCalled) | ||
}) | ||
|
@@ -4599,8 +4613,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', () => { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We currently log tables for keyboard and mouse events, and we were creating slightly different data structures within the consoleProps for each. These differences made the existing logic complicated (and made parsing out the elements to avoid the WebKit hang difficult).
So I normalized the inputs and simplified the parsing here a bit, while ensuring that the elements don't make it into the table for WebKit. I'm sure we could simplify this further.