-
Notifications
You must be signed in to change notification settings - Fork 3.2k
/
snapshots.ts
313 lines (263 loc) · 9.72 KB
/
snapshots.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
import $ from 'jquery'
import _ from 'lodash'
import type { $Cy } from '../cypress/cy'
import type { StateFunc } from '../cypress/state'
import $dom from '../dom'
import { create as createSnapshotsCSS } from './snapshots_css'
export const HIGHLIGHT_ATTR = 'data-cypress-el'
export const FINAL_SNAPSHOT_NAME = 'final state'
export const create = ($$: $Cy['$$'], state: StateFunc) => {
const snapshotsCss = createSnapshotsCSS($$, state)
const snapshotsMap = new WeakMap()
const snapshotDocument = new Document()
const getHtmlAttrs = function (htmlEl) {
const tmpHtmlEl = document.createElement('html')
return _.transform(htmlEl?.attributes, (memo, attr) => {
if (!attr.specified) {
return
}
try {
// if we can successfully set the attributethen set it on memo
// because it's possible the attribute is completely invalid
tmpHtmlEl.setAttribute(attr.name, attr.value)
memo[attr.name] = attr.value
} catch (error) { } // eslint-disable-line no-empty
}, {})
}
const replaceIframes = (body) => {
// remove iframes because we don't want extra requests made, JS run, etc
// when restoring a snapshot
// replace them so the lack of them doesn't cause layout issues
// use <iframe>s as the placeholders because iframes are inline, replaced
// elements (https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element)
// so it's hard to simulate their box model
// attach class names and inline styles, so that CSS styles are applied
// as they would be on the user's page, but override some
// styles so it looks like a placeholder
// need to only replace the iframes in the cloned body, so grab those
const $iframes = body.find('iframe')
// but query from the actual document, since the cloned body
// iframes don't have proper styles applied
return $$('iframe').each((idx, iframe) => {
const $iframe = $(iframe)
const remove = () => {
return $iframes.eq(idx).remove()
}
// if we don't have access to window
// then just remove this $iframe...
try {
if (!$iframe.prop('contentWindow')) {
return remove()
}
} catch (error) {
return remove()
}
const props = {
id: iframe.id,
class: iframe.className,
style: iframe.style.cssText,
}
const dimensions = (fn) => {
// jquery may throw here if we accidentally
// pass an old iframe reference where the
// document + window properties are unavailable
try {
return $iframe[fn]()
} catch (e) {
return 0
}
}
const $placeholder = $('<iframe />', props).css({
background: '#f8f8f8',
border: 'solid 1px #a3a3a3',
boxSizing: 'border-box',
padding: '20px',
width: dimensions('outerWidth'),
height: dimensions('outerHeight'),
}) as JQuery<HTMLIFrameElement>
$iframes.eq(idx).replaceWith($placeholder)
const contents = `\
<style>
p { color: #888; font-family: sans-serif; line-height: 1.5; }
</style>
<p><iframe> placeholder for ${iframe.src}</p>\
`
$placeholder[0].src = `data:text/html;base64,${window.btoa(contents)}`
})
}
const getStyles = (snapshot) => {
const { ids, styles } = snapshotsMap.get(snapshot) || {}
if (!ids && !styles) {
return {}
}
// If a cross origin processed snapshot, styles are directly added into the CSS map. Simply return them.
if (styles?.headStyles || styles?.bodyStyles) {
return styles
}
return {
headStyles: snapshotsCss.getStylesByIds(ids?.headStyleIds),
bodyStyles: snapshotsCss.getStylesByIds(ids?.bodyStyleIds),
}
}
const detachDom = (iframeContents) => {
const { headStyleIds, bodyStyleIds } = snapshotsCss.getStyleIds()
const htmlAttrs = getHtmlAttrs(iframeContents.find('html')[0])
const $body = iframeContents.find('body')
$body.find('script,link[rel="stylesheet"],style').remove()
const snapshot = {
name: FINAL_SNAPSHOT_NAME,
htmlAttrs,
body: {
get: () => $body.detach(),
},
}
snapshotsMap.set(snapshot, {
ids: {
headStyleIds,
bodyStyleIds,
},
})
return snapshot
}
const createSnapshotBody = ($elToHighlight) => {
// create a unique selector for this el
// but only IF the subject is truly an element. For example
// we might be wrapping a primitive like "$([1, 2]).first()"
// which arrives here as number 1
// jQuery v2 allowed to silently try setting 1[HIGHLIGHT_ATTR] doing nothing
// jQuery v3 runs in strict mode and throws an error if you attempt to set a property
// TODO: in firefox sometimes this throws a cross-origin access error
const isJqueryElement = $dom.isElement($elToHighlight) && $dom.isJquery($elToHighlight)
if (isJqueryElement) {
($elToHighlight as JQuery<HTMLElement>).attr(HIGHLIGHT_ATTR, 'true')
}
// TODO: throw error here if cy is undefined!
// cloneNode can actually trigger functions attached to custom elements
// so we have to use importNode to clone the element
// https://github.com/cypress-io/cypress/issues/7187
// https://github.com/cypress-io/cypress/issues/1068
// we import it to a transient document (snapshotDocument) so that there
// are no side effects from cloning it. see below for how we re-attach
// it to the AUT document
// https://github.com/cypress-io/cypress/issues/8679
// this can fail if snapshotting before the page has fully loaded,
// so we catch this below and return null for the snapshot
// https://github.com/cypress-io/cypress/issues/15816
const $body = $$(snapshotDocument.importNode($$('body')[0], true))
// for the head and body, get an array of all CSS,
// whether it's links or style tags
// if it's same-origin, it will get the actual styles as a string
// if it's cross-origin, it will get a reference to the link's href
const { headStyleIds, bodyStyleIds } = snapshotsCss.getStyleIds()
// replaces iframes with placeholders
replaceIframes($body)
// remove tags we don't want in body
$body.find('script,link[rel=\'stylesheet\'],style').remove()
// here we need to figure out if we're in a remote manual environment
// if so we need to stringify the DOM:
// 1. grab all inputs / textareas / options and set their value on the element
// 2. convert DOM to string: body.prop("outerHTML")
// 3. send this string via websocket to our server
// 4. server rebroadcasts this to our client and its stored as a property
// its also possible for us to store the DOM string completely on the server
// without ever sending it back to the browser (until its requests).
// we could just store it in memory and wipe it out intelligently.
// this would also prevent having to store the DOM structure on the client,
// which would reduce memory, and some CPU operations
// now remove it after we clone
if (isJqueryElement) {
($elToHighlight as JQuery<HTMLElement>).removeAttr(HIGHLIGHT_ATTR)
}
const $htmlAttrs = getHtmlAttrs($$('html')[0])
return {
$body,
$htmlAttrs,
headStyleIds,
bodyStyleIds,
}
}
const reifySnapshotBody = (preprocessedSnapshot) => {
const $body = preprocessedSnapshot.body.get()
const $htmlAttrs = preprocessedSnapshot.htmlAttrs
const { headStyles, bodyStyles } = preprocessedSnapshot.styles
return {
$body,
$htmlAttrs,
headStyles,
bodyStyles,
}
}
const createSnapshot = (name, $elToHighlight, preprocessedSnapshot) => {
Cypress.action('cy:snapshot', name)
// when using cy.origin() and in a transitionary state, state('document')
// can be undefined, resulting in a bizarre snapshot of the entire Cypress
// UI. better not to take the snapshot in that case.
// https://github.com/cypress-io/cypress/issues/24506
// also, do not take the snapshot here if it has already been taken and
// preprocessed in a spec bridge.
if (!preprocessedSnapshot && !state('document')) {
return null
}
try {
const {
$body,
$htmlAttrs,
...styleAttrs
} = preprocessedSnapshot ? reifySnapshotBody(preprocessedSnapshot) : createSnapshotBody($elToHighlight)
let attachedBody
const body = {
get: () => {
if (!attachedBody) {
// If we don't have an AUT document, use the spec bridge document
const doc = state('document') || window.document
attachedBody = $$(doc.adoptNode($body[0]))
}
return attachedBody
},
}
const snapshot = {
name,
htmlAttrs: $htmlAttrs,
body,
}
const {
headStyleIds,
bodyStyleIds,
headStyles,
bodyStyles,
}: {
headStyleIds?: string[]
bodyStyleIds?: string[]
headStyles?: string[]
bodyStyles?: string[]
} = styleAttrs
if (headStyleIds && bodyStyleIds) {
snapshotsMap.set(snapshot, {
ids: {
headStyleIds,
bodyStyleIds,
},
})
} else if (headStyles && bodyStyles) {
// The Snapshot is being reified from cross origin. Get inline styles of reified snapshot.
snapshotsMap.set(snapshot, {
styles: {
headStyles,
bodyStyles,
},
})
}
return snapshot
} catch (e) {
return null
}
}
return {
createSnapshot,
detachDom,
getStyles,
onCssModified: snapshotsCss.onCssModified,
onBeforeWindowLoad: snapshotsCss.onBeforeWindowLoad,
}
}
export interface ISnapshots extends ReturnType<typeof create> {}