diff --git a/packages/rrweb/test/__snapshots__/integration.test.ts.snap b/packages/rrweb/test/__snapshots__/integration.test.ts.snap index f591617a1e..bcdfa20566 100644 --- a/packages/rrweb/test/__snapshots__/integration.test.ts.snap +++ b/packages/rrweb/test/__snapshots__/integration.test.ts.snap @@ -1034,7 +1034,7 @@ exports[`record integration tests > can mask character data mutations with regex ]" `; -exports[`record integration tests > can record attribute mutation 1`] = ` +exports[`record integration tests > can record and replay style mutations 1`] = ` "[ { \\"type\\": 0, @@ -1068,84 +1068,147 @@ exports[`record integration tests > can record attribute mutation 1`] = ` { \\"type\\": 2, \\"tagName\\": \\"html\\", - \\"attributes\\": {}, + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, \\"childNodes\\": [ { \\"type\\": 2, \\"tagName\\": \\"head\\", \\"attributes\\": {}, - \\"childNodes\\": [], - \\"id\\": 4 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"body\\", - \\"attributes\\": {}, \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], \\"id\\": 6 }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, { \\"type\\": 2, - \\"tagName\\": \\"p\\", + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", \\"attributes\\": {}, \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"mutation observer\\", - \\"id\\": 8 + \\"textContent\\": \\"style\\", + \\"id\\": 11 } ], - \\"id\\": 7 + \\"id\\": 10 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 9 + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 12 }, { \\"type\\": 2, - \\"tagName\\": \\"ul\\", - \\"attributes\\": {}, + \\"tagName\\": \\"style\\", + \\"attributes\\": { + \\"id\\": \\"dual-textContent\\", + \\"_cssText\\": \\"body { background-color: black; }body { color: orange !important; }\\", + \\"_cssTextSplits\\": \\"33 67\\" + }, \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 11 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"li\\", - \\"attributes\\": {}, - \\"childNodes\\": [], - \\"id\\": 12 + \\"textContent\\": \\"\\", + \\"id\\": 14 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 13 + \\"textContent\\": \\"\\", + \\"id\\": 15 } ], - \\"id\\": 10 + \\"id\\": 13 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 14 + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 16 }, { \\"type\\": 2, - \\"tagName\\": \\"canvas\\", + \\"tagName\\": \\"script\\", \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 18 + } + ], + \\"id\\": 17 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 19 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"style\\", + \\"attributes\\": { + \\"id\\": \\"single-textContent\\", + \\"_cssText\\": \\"a:hover { outline: red solid 1px; }\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\", + \\"id\\": 21 + } + ], + \\"id\\": 20 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 22 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"style\\", + \\"attributes\\": { + \\"id\\": \\"empty\\", + \\"_cssText\\": \\"a:hover { outline: blue solid 1px; }\\" + }, \\"childNodes\\": [], - \\"id\\": 15 + \\"id\\": 23 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n\\\\n \\", - \\"id\\": 16 + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 24 }, { \\"type\\": 2, @@ -1155,18 +1218,54 @@ exports[`record integration tests > can record attribute mutation 1`] = ` { \\"type\\": 3, \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", - \\"id\\": 18 + \\"id\\": 26 } ], - \\"id\\": 17 + \\"id\\": 25 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\\\n \\\\n\\", - \\"id\\": 19 + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 27 } ], - \\"id\\": 5 + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 28 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\", + \\"id\\": 30 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 32 + } + ], + \\"id\\": 31 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", + \\"id\\": 33 + } + ], + \\"id\\": 29 } ], \\"id\\": 3 @@ -1185,27 +1284,72 @@ exports[`record integration tests > can record attribute mutation 1`] = ` \\"data\\": { \\"source\\": 0, \\"texts\\": [], - \\"attributes\\": [ + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [ { - \\"id\\": 5, - \\"attributes\\": { - \\"test\\": \\"true\\" + \\"parentId\\": 13, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\".absolutify { background-image: url(\\\\\\"http://localhost:3030/rel\\\\\\"); }\\", + \\"id\\": 34 + } + }, + { + \\"parentId\\": 13, + \\"nextId\\": 34, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\"body { background-color: darkgreen; }\\", + \\"id\\": 35 } } + ] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [ + { + \\"id\\": 15, + \\"value\\": \\"body { color: yellow; }\\" + }, + { + \\"id\\": 15, + \\"value\\": \\"body { color: yellow; }\\" + }, + { + \\"id\\": 35, + \\"value\\": \\"body { background-color: purple; }\\" + } ], - \\"removes\\": [ + \\"attributes\\": [], + \\"removes\\": [], + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [ { - \\"parentId\\": 5, - \\"id\\": 10 + \\"id\\": 14, + \\"value\\": \\"\\\\n body { background-color: black !important; }\\\\n \\" } ], + \\"attributes\\": [], + \\"removes\\": [], \\"adds\\": [] } } ]" `; -exports[`record integration tests > can record character data muatations 1`] = ` +exports[`record integration tests > can record and replay textarea mutations correctly 1`] = ` "[ { \\"type\\": 0, @@ -1239,64 +1383,58 @@ exports[`record integration tests > can record character data muatations 1`] = ` { \\"type\\": 2, \\"tagName\\": \\"html\\", - \\"attributes\\": {}, + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, \\"childNodes\\": [ { \\"type\\": 2, \\"tagName\\": \\"head\\", \\"attributes\\": {}, - \\"childNodes\\": [], - \\"id\\": 4 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"body\\", - \\"attributes\\": {}, \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 6 + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 }, { \\"type\\": 2, - \\"tagName\\": \\"p\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"mutation observer\\", - \\"id\\": 8 - } - ], + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", \\"id\\": 7 }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", + \\"textContent\\": \\"\\\\n \\", \\"id\\": 9 }, { \\"type\\": 2, - \\"tagName\\": \\"ul\\", + \\"tagName\\": \\"title\\", \\"attributes\\": {}, \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", + \\"textContent\\": \\"Empty\\", \\"id\\": 11 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"li\\", - \\"attributes\\": {}, - \\"childNodes\\": [], - \\"id\\": 12 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 13 } ], \\"id\\": 10 @@ -1304,19 +1442,39 @@ exports[`record integration tests > can record character data muatations 1`] = ` { \\"type\\": 3, \\"textContent\\": \\"\\\\n \\", - \\"id\\": 14 + \\"id\\": 12 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 13 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 15 }, { \\"type\\": 2, - \\"tagName\\": \\"canvas\\", - \\"attributes\\": {}, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"id\\": \\"one\\" + }, \\"childNodes\\": [], - \\"id\\": 15 + \\"id\\": 16 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n\\\\n \\", - \\"id\\": 16 + \\"textContent\\": \\"\\\\n \\\\n \\", + \\"id\\": 17 }, { \\"type\\": 2, @@ -1326,18 +1484,18 @@ exports[`record integration tests > can record character data muatations 1`] = ` { \\"type\\": 3, \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", - \\"id\\": 18 + \\"id\\": 19 } ], - \\"id\\": 17 + \\"id\\": 18 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\\\n \\\\n\\", - \\"id\\": 19 + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", + \\"id\\": 20 } ], - \\"id\\": 5 + \\"id\\": 14 } ], \\"id\\": 3 @@ -1357,33 +1515,105 @@ exports[`record integration tests > can record character data muatations 1`] = ` \\"source\\": 0, \\"texts\\": [], \\"attributes\\": [], - \\"removes\\": [ - { - \\"parentId\\": 5, - \\"id\\": 10 - }, - { - \\"parentId\\": 7, - \\"id\\": 8 - } - ], + \\"removes\\": [], \\"adds\\": [ { - \\"parentId\\": 7, + \\"parentId\\": 14, \\"nextId\\": null, \\"node\\": { - \\"type\\": 3, - \\"textContent\\": \\"mutated\\", - \\"id\\": 20 + \\"type\\": 2, + \\"tagName\\": \\"textarea\\", + \\"attributes\\": { + \\"value\\": \\"pre value\\" + }, + \\"childNodes\\": [], + \\"id\\": 21 } } ] } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 21, + \\"attributes\\": { + \\"value\\": \\"ok\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 21, + \\"attributes\\": { + \\"value\\": \\"ok3\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 5, + \\"id\\": 21 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 5, + \\"text\\": \\"1ok3\\", + \\"isChecked\\": false, + \\"id\\": 21 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 21, + \\"attributes\\": { + \\"value\\": \\"ignore\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 5, + \\"text\\": \\"12ok3\\", + \\"isChecked\\": false, + \\"id\\": 21 + } } ]" `; -exports[`record integration tests > can record childList mutations 1`] = ` +exports[`record integration tests > can record attribute mutation 1`] = ` "[ { \\"type\\": 0, @@ -1534,32 +1764,27 @@ exports[`record integration tests > can record childList mutations 1`] = ` \\"data\\": { \\"source\\": 0, \\"texts\\": [], - \\"attributes\\": [], + \\"attributes\\": [ + { + \\"id\\": 5, + \\"attributes\\": { + \\"test\\": \\"true\\" + } + } + ], \\"removes\\": [ { \\"parentId\\": 5, \\"id\\": 10 } ], - \\"adds\\": [ - { - \\"parentId\\": 7, - \\"nextId\\": null, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"span\\", - \\"attributes\\": {}, - \\"childNodes\\": [], - \\"id\\": 20 - } - } - ] + \\"adds\\": [] } } ]" `; -exports[`record integration tests > can record clicks 1`] = ` +exports[`record integration tests > can record character data muatations 1`] = ` "[ { \\"type\\": 0, @@ -1593,139 +1818,84 @@ exports[`record integration tests > can record clicks 1`] = ` { \\"type\\": 2, \\"tagName\\": \\"html\\", - \\"attributes\\": { - \\"lang\\": \\"en\\" - }, + \\"attributes\\": {}, \\"childNodes\\": [ { \\"type\\": 2, \\"tagName\\": \\"head\\", \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 4 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 5 + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 6 }, { \\"type\\": 2, - \\"tagName\\": \\"meta\\", - \\"attributes\\": { - \\"charset\\": \\"UTF-8\\" - }, - \\"childNodes\\": [], - \\"id\\": 6 + \\"tagName\\": \\"p\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"mutation observer\\", + \\"id\\": 8 + } + ], + \\"id\\": 7 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 7 + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 }, { \\"type\\": 2, - \\"tagName\\": \\"meta\\", - \\"attributes\\": { - \\"name\\": \\"viewport\\", - \\"content\\": \\"width=device-width, initial-scale=1.0\\" - }, - \\"childNodes\\": [], - \\"id\\": 8 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 9 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"meta\\", - \\"attributes\\": { - \\"http-equiv\\": \\"X-UA-Compatible\\", - \\"content\\": \\"ie=edge\\" - }, - \\"childNodes\\": [], - \\"id\\": 10 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 11 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"title\\", + \\"tagName\\": \\"ul\\", \\"attributes\\": {}, \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"Link click\\", + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 11 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"li\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 12 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", \\"id\\": 13 } ], - \\"id\\": 12 + \\"id\\": 10 }, { \\"type\\": 3, \\"textContent\\": \\"\\\\n \\", \\"id\\": 14 - } - ], - \\"id\\": 4 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n\\\\n \\", - \\"id\\": 15 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"body\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 17 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"span\\", - \\"attributes\\": { - \\"id\\": \\"not-a-link\\" - }, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"not link\\", - \\"id\\": 19 - } - ], - \\"id\\": 18 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 20 }, { \\"type\\": 2, - \\"tagName\\": \\"a\\", - \\"attributes\\": { - \\"href\\": \\"about:blank#clicked\\" - }, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"link\\", - \\"id\\": 22 - } - ], - \\"id\\": 21 + \\"tagName\\": \\"canvas\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 15 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\\\n \\", - \\"id\\": 23 + \\"textContent\\": \\"\\\\n\\\\n \\", + \\"id\\": 16 }, { \\"type\\": 2, @@ -1735,18 +1905,18 @@ exports[`record integration tests > can record clicks 1`] = ` { \\"type\\": 3, \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", - \\"id\\": 25 + \\"id\\": 18 } ], - \\"id\\": 24 + \\"id\\": 17 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", - \\"id\\": 26 + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\", + \\"id\\": 19 } ], - \\"id\\": 16 + \\"id\\": 5 } ], \\"id\\": 3 @@ -1763,90 +1933,36 @@ exports[`record integration tests > can record clicks 1`] = ` { \\"type\\": 3, \\"data\\": { - \\"source\\": 2, - \\"type\\": 1, - \\"id\\": 18 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 2, - \\"type\\": 0, - \\"id\\": 18 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 2, - \\"type\\": 2, - \\"id\\": 18, - \\"pointerType\\": 0 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 2, - \\"type\\": 7, - \\"id\\": 18 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 2, - \\"type\\": 9, - \\"id\\": 18 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 2, - \\"type\\": 2, - \\"id\\": 18, - \\"pointerType\\": 2 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 2, - \\"type\\": 1, - \\"id\\": 21 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 2, - \\"type\\": 5, - \\"id\\": 21 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 2, - \\"type\\": 0, - \\"id\\": 21 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 2, - \\"type\\": 2, - \\"id\\": 21, - \\"pointerType\\": 0 + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [ + { + \\"parentId\\": 5, + \\"id\\": 10 + }, + { + \\"parentId\\": 7, + \\"id\\": 8 + } + ], + \\"adds\\": [ + { + \\"parentId\\": 7, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\"mutated\\", + \\"id\\": 20 + } + } + ] } } ]" `; -exports[`record integration tests > can record form interactions 1`] = ` +exports[`record integration tests > can record childList mutations 1`] = ` "[ { \\"type\\": 0, @@ -1880,43 +1996,219 @@ exports[`record integration tests > can record form interactions 1`] = ` { \\"type\\": 2, \\"tagName\\": \\"html\\", - \\"attributes\\": { - \\"lang\\": \\"en\\" - }, + \\"attributes\\": {}, \\"childNodes\\": [ { \\"type\\": 2, \\"tagName\\": \\"head\\", \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 4 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 5 + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 6 }, { \\"type\\": 2, - \\"tagName\\": \\"meta\\", - \\"attributes\\": { - \\"charset\\": \\"UTF-8\\" - }, - \\"childNodes\\": [], - \\"id\\": 6 + \\"tagName\\": \\"p\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"mutation observer\\", + \\"id\\": 8 + } + ], + \\"id\\": 7 }, { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 7 + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 }, { \\"type\\": 2, - \\"tagName\\": \\"meta\\", - \\"attributes\\": { - \\"name\\": \\"viewport\\", - \\"content\\": \\"width=device-width, initial-scale=1.0\\" - }, - \\"childNodes\\": [], - \\"id\\": 8 + \\"tagName\\": \\"ul\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 11 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"li\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 12 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 13 + } + ], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 14 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"canvas\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 15 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n \\", + \\"id\\": 16 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 18 + } + ], + \\"id\\": 17 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\", + \\"id\\": 19 + } + ], + \\"id\\": 5 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [], + \\"removes\\": [ + { + \\"parentId\\": 5, + \\"id\\": 10 + } + ], + \\"adds\\": [ + { + \\"parentId\\": 7, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 20 + } + } + ] + } + } +]" +`; + +exports[`record integration tests > can record clicks 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 }, { \\"type\\": 3, @@ -1945,7 +2237,7 @@ exports[`record integration tests > can record form interactions 1`] = ` \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"form fields\\", + \\"textContent\\": \\"Link click\\", \\"id\\": 13 } ], @@ -1976,56 +2268,343 @@ exports[`record integration tests > can record form interactions 1`] = ` }, { \\"type\\": 2, - \\"tagName\\": \\"form\\", - \\"attributes\\": {}, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"id\\": \\"not-a-link\\" + }, \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", + \\"textContent\\": \\"not link\\", \\"id\\": 19 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"label\\", - \\"attributes\\": { - \\"for\\": \\"text\\" - }, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 21 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"input\\", - \\"attributes\\": { - \\"type\\": \\"text\\" - }, - \\"childNodes\\": [], - \\"id\\": 22 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 23 - } - ], - \\"id\\": 20 - }, + } + ], + \\"id\\": 18 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 20 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"a\\", + \\"attributes\\": { + \\"href\\": \\"about:blank#clicked\\" + }, + \\"childNodes\\": [ { \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 24 - }, + \\"textContent\\": \\"link\\", + \\"id\\": 22 + } + ], + \\"id\\": 21 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\", + \\"id\\": 23 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ { - \\"type\\": 2, - \\"tagName\\": \\"label\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 25 + } + ], + \\"id\\": 24 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", + \\"id\\": 26 + } + ], + \\"id\\": 16 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 1, + \\"id\\": 18 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 0, + \\"id\\": 18 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 2, + \\"id\\": 18, + \\"pointerType\\": 0 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 7, + \\"id\\": 18 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 9, + \\"id\\": 18 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 2, + \\"id\\": 18, + \\"pointerType\\": 2 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 1, + \\"id\\": 21 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 5, + \\"id\\": 21 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 0, + \\"id\\": 21 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 2, + \\"id\\": 21, + \\"pointerType\\": 0 + } + } +]" +`; + +exports[`record integration tests > can record form interactions 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {} + }, + { + \\"type\\": 1, + \\"data\\": {} + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"about:blank\\", + \\"width\\": 1920, + \\"height\\": 1080 + } + }, + { + \\"type\\": 2, + \\"data\\": { + \\"node\\": { + \\"type\\": 0, + \\"childNodes\\": [ + { + \\"type\\": 1, + \\"name\\": \\"html\\", + \\"publicId\\": \\"\\", + \\"systemId\\": \\"\\", + \\"id\\": 2 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"html\\", + \\"attributes\\": { + \\"lang\\": \\"en\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"head\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 5 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"charset\\": \\"UTF-8\\" + }, + \\"childNodes\\": [], + \\"id\\": 6 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 7 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"name\\": \\"viewport\\", + \\"content\\": \\"width=device-width, initial-scale=1.0\\" + }, + \\"childNodes\\": [], + \\"id\\": 8 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 9 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"meta\\", + \\"attributes\\": { + \\"http-equiv\\": \\"X-UA-Compatible\\", + \\"content\\": \\"ie=edge\\" + }, + \\"childNodes\\": [], + \\"id\\": 10 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 11 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"title\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"form fields\\", + \\"id\\": 13 + } + ], + \\"id\\": 12 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 14 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n \\", + \\"id\\": 15 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 17 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"form\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 19 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"label\\", + \\"attributes\\": { + \\"for\\": \\"text\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 21 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"input\\", + \\"attributes\\": { + \\"type\\": \\"text\\" + }, + \\"childNodes\\": [], + \\"id\\": 22 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 23 + } + ], + \\"id\\": 20 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 24 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"label\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", \\"id\\": 26 }, { @@ -3255,850 +3834,299 @@ exports[`record integration tests > can record node mutations 1`] = ` \\"type\\": 2, \\"tagName\\": \\"abbr\\", \\"attributes\\": { - \\"class\\": \\"select2-search-choice-close\\" - }, - \\"childNodes\\": [], - \\"id\\": 30 - } - }, - { - \\"parentId\\": 26, - \\"nextId\\": 32, - \\"node\\": { - \\"type\\": 3, - \\"textContent\\": \\" \\", - \\"id\\": 31 - } - }, - { - \\"parentId\\": 26, - \\"nextId\\": null, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"span\\", - \\"attributes\\": { - \\"class\\": \\"select2-arrow\\", - \\"role\\": \\"presentation\\" - }, - \\"childNodes\\": [], - \\"id\\": 32 - } - }, - { - \\"parentId\\": 32, - \\"nextId\\": null, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"b\\", - \\"attributes\\": { - \\"role\\": \\"presentation\\" - }, - \\"childNodes\\": [], - \\"id\\": 33 - } - }, - { - \\"parentId\\": 18, - \\"nextId\\": null, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"div\\", - \\"attributes\\": { - \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\", - \\"id\\": \\"select2-drop\\", - \\"style\\": \\"left: Npx; width: Npx; top: Npx; bottom: auto; display: block;\\" - }, - \\"childNodes\\": [], - \\"id\\": 36 - } - }, - { - \\"parentId\\": 36, - \\"nextId\\": 38, - \\"node\\": { - \\"type\\": 3, - \\"textContent\\": \\" \\", - \\"id\\": 37 - } - }, - { - \\"parentId\\": 36, - \\"nextId\\": 44, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"div\\", - \\"attributes\\": { - \\"class\\": \\"select2-search\\" - }, - \\"childNodes\\": [], - \\"id\\": 38 - } - }, - { - \\"parentId\\": 38, - \\"nextId\\": 40, - \\"node\\": { - \\"type\\": 3, - \\"textContent\\": \\" \\", - \\"id\\": 39 - } - }, - { - \\"parentId\\": 38, - \\"nextId\\": 41, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"label\\", - \\"attributes\\": { - \\"for\\": \\"s2id_autogen1_search\\", - \\"class\\": \\"select2-offscreen\\" - }, - \\"childNodes\\": [], - \\"id\\": 40 - } - }, - { - \\"parentId\\": 38, - \\"nextId\\": 42, - \\"node\\": { - \\"type\\": 3, - \\"textContent\\": \\" \\", - \\"id\\": 41 - } - }, - { - \\"parentId\\": 38, - \\"nextId\\": 43, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"input\\", - \\"attributes\\": { - \\"type\\": \\"text\\", - \\"autocomplete\\": \\"off\\", - \\"autocorrect\\": \\"off\\", - \\"autocapitalize\\": \\"off\\", - \\"spellcheck\\": \\"false\\", - \\"class\\": \\"select2-input select2-focused\\", - \\"role\\": \\"combobox\\", - \\"aria-expanded\\": \\"true\\", - \\"aria-autocomplete\\": \\"list\\", - \\"aria-owns\\": \\"select2-results-1\\", - \\"id\\": \\"s2id_autogen1_search\\", - \\"placeholder\\": \\"\\", - \\"aria-activedescendant\\": \\"select2-result-label-2\\" - }, - \\"childNodes\\": [], - \\"id\\": 42 - } - }, - { - \\"parentId\\": 38, - \\"nextId\\": null, - \\"node\\": { - \\"type\\": 3, - \\"textContent\\": \\" \\", - \\"id\\": 43 - } - }, - { - \\"parentId\\": 36, - \\"nextId\\": 45, - \\"node\\": { - \\"type\\": 3, - \\"textContent\\": \\" \\", - \\"id\\": 44 - } - }, - { - \\"parentId\\": 36, - \\"nextId\\": null, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"ul\\", - \\"attributes\\": { - \\"class\\": \\"select2-results\\", - \\"role\\": \\"listbox\\", - \\"id\\": \\"select2-results-1\\" - }, - \\"childNodes\\": [], - \\"id\\": 45 - } - }, - { - \\"parentId\\": 45, - \\"nextId\\": null, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"li\\", - \\"attributes\\": { - \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable\\", - \\"role\\": \\"presentation\\" - }, - \\"childNodes\\": [], - \\"id\\": 67 - } - }, - { - \\"parentId\\": 67, - \\"nextId\\": null, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"div\\", - \\"attributes\\": { - \\"class\\": \\"select2-result-label\\", - \\"id\\": \\"select2-result-label-3\\", - \\"role\\": \\"option\\" + \\"class\\": \\"select2-search-choice-close\\" }, \\"childNodes\\": [], - \\"id\\": 68 + \\"id\\": 30 } }, { - \\"parentId\\": 68, - \\"nextId\\": null, + \\"parentId\\": 26, + \\"nextId\\": 32, \\"node\\": { \\"type\\": 3, - \\"textContent\\": \\"B\\", - \\"id\\": 69 + \\"textContent\\": \\" \\", + \\"id\\": 31 } }, { - \\"parentId\\": 18, - \\"nextId\\": 36, + \\"parentId\\": 26, + \\"nextId\\": null, \\"node\\": { \\"type\\": 2, - \\"tagName\\": \\"div\\", + \\"tagName\\": \\"span\\", \\"attributes\\": { - \\"id\\": \\"select2-drop-mask\\", - \\"class\\": \\"select2-drop-mask\\", - \\"style\\": \\"\\" + \\"class\\": \\"select2-arrow\\", + \\"role\\": \\"presentation\\" }, \\"childNodes\\": [], - \\"id\\": 70 + \\"id\\": 32 } }, { - \\"parentId\\": 62, + \\"parentId\\": 32, \\"nextId\\": null, - \\"node\\": { - \\"type\\": 3, - \\"textContent\\": \\"2 results are available, use up and down arrow keys to navigate.\\", - \\"id\\": 71 - } - }, - { - \\"parentId\\": 45, - \\"nextId\\": 67, \\"node\\": { \\"type\\": 2, - \\"tagName\\": \\"li\\", + \\"tagName\\": \\"b\\", \\"attributes\\": { - \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable select2-highlighted\\", \\"role\\": \\"presentation\\" }, \\"childNodes\\": [], - \\"id\\": 72 + \\"id\\": 33 } }, { - \\"parentId\\": 72, + \\"parentId\\": 18, \\"nextId\\": null, \\"node\\": { \\"type\\": 2, \\"tagName\\": \\"div\\", \\"attributes\\": { - \\"class\\": \\"select2-result-label\\", - \\"id\\": \\"select2-result-label-2\\", - \\"role\\": \\"option\\" + \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\", + \\"id\\": \\"select2-drop\\", + \\"style\\": \\"left: Npx; width: Npx; top: Npx; bottom: auto; display: block;\\" }, \\"childNodes\\": [], - \\"id\\": 73 + \\"id\\": 36 } }, { - \\"parentId\\": 73, - \\"nextId\\": null, + \\"parentId\\": 36, + \\"nextId\\": 38, \\"node\\": { \\"type\\": 3, - \\"textContent\\": \\"A\\", - \\"id\\": 74 + \\"textContent\\": \\" \\", + \\"id\\": 37 } }, { - \\"parentId\\": 73, - \\"nextId\\": 74, + \\"parentId\\": 36, + \\"nextId\\": 44, \\"node\\": { \\"type\\": 2, - \\"tagName\\": \\"span\\", + \\"tagName\\": \\"div\\", \\"attributes\\": { - \\"class\\": \\"select2-match\\" + \\"class\\": \\"select2-search\\" }, \\"childNodes\\": [], - \\"id\\": 75 + \\"id\\": 38 } }, { - \\"parentId\\": 68, - \\"nextId\\": 69, + \\"parentId\\": 38, + \\"nextId\\": 40, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 39 + } + }, + { + \\"parentId\\": 38, + \\"nextId\\": 41, \\"node\\": { \\"type\\": 2, - \\"tagName\\": \\"span\\", + \\"tagName\\": \\"label\\", \\"attributes\\": { - \\"class\\": \\"select2-match\\" + \\"for\\": \\"s2id_autogen1_search\\", + \\"class\\": \\"select2-offscreen\\" }, \\"childNodes\\": [], - \\"id\\": 76 + \\"id\\": 40 } - } - ] - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 5, - \\"text\\": \\"\\", - \\"isChecked\\": false, - \\"id\\": 42 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 5, - \\"text\\": \\"\\", - \\"isChecked\\": false, - \\"id\\": 35 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 2, - \\"type\\": 0, - \\"id\\": 70 - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 0, - \\"texts\\": [], - \\"attributes\\": [ + }, { - \\"id\\": 36, - \\"attributes\\": { - \\"style\\": { - \\"color\\": [ - \\"black\\", - \\"important\\" - ] - } + \\"parentId\\": 38, + \\"nextId\\": 42, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 41 } - } - ], - \\"removes\\": [], - \\"adds\\": [] - } - } -]" -`; - -exports[`record integration tests > can record style changes compactly and preserve css var() functions 1`] = ` -"[ - { - \\"type\\": 0, - \\"data\\": {} - }, - { - \\"type\\": 1, - \\"data\\": {} - }, - { - \\"type\\": 4, - \\"data\\": { - \\"href\\": \\"about:blank\\", - \\"width\\": 1920, - \\"height\\": 1080 - } - }, - { - \\"type\\": 2, - \\"data\\": { - \\"node\\": { - \\"type\\": 0, - \\"childNodes\\": [ - { + }, + { + \\"parentId\\": 38, + \\"nextId\\": 43, + \\"node\\": { \\"type\\": 2, - \\"tagName\\": \\"html\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 2, - \\"tagName\\": \\"head\\", - \\"attributes\\": {}, - \\"childNodes\\": [], - \\"id\\": 3 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"body\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 5 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"script\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", - \\"id\\": 7 - } - ], - \\"id\\": 6 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", - \\"id\\": 8 - } - ], - \\"id\\": 4 - } - ], - \\"id\\": 2 - } - ], - \\"compatMode\\": \\"BackCompat\\", - \\"id\\": 1 - }, - \\"initialOffset\\": { - \\"left\\": 0, - \\"top\\": 0 - } - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 0, - \\"texts\\": [], - \\"attributes\\": [ + \\"tagName\\": \\"input\\", + \\"attributes\\": { + \\"type\\": \\"text\\", + \\"autocomplete\\": \\"off\\", + \\"autocorrect\\": \\"off\\", + \\"autocapitalize\\": \\"off\\", + \\"spellcheck\\": \\"false\\", + \\"class\\": \\"select2-input select2-focused\\", + \\"role\\": \\"combobox\\", + \\"aria-expanded\\": \\"true\\", + \\"aria-autocomplete\\": \\"list\\", + \\"aria-owns\\": \\"select2-results-1\\", + \\"id\\": \\"s2id_autogen1_search\\", + \\"placeholder\\": \\"\\", + \\"aria-activedescendant\\": \\"select2-result-label-2\\" + }, + \\"childNodes\\": [], + \\"id\\": 42 + } + }, { - \\"id\\": 4, - \\"attributes\\": { - \\"style\\": \\"background: var(--mystery)\\" + \\"parentId\\": 38, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 43 } - } - ], - \\"removes\\": [], - \\"adds\\": [] - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 0, - \\"texts\\": [], - \\"attributes\\": [ + }, { - \\"id\\": 4, - \\"attributes\\": { - \\"style\\": \\"background: var(--mystery); background-color: black\\" + \\"parentId\\": 36, + \\"nextId\\": 45, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 44 } - } - ], - \\"removes\\": [], - \\"adds\\": [] - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 0, - \\"texts\\": [], - \\"attributes\\": [ + }, { - \\"id\\": 4, - \\"attributes\\": { - \\"style\\": \\"\\" + \\"parentId\\": 36, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"ul\\", + \\"attributes\\": { + \\"class\\": \\"select2-results\\", + \\"role\\": \\"listbox\\", + \\"id\\": \\"select2-results-1\\" + }, + \\"childNodes\\": [], + \\"id\\": 45 } - } - ], - \\"removes\\": [], - \\"adds\\": [] - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 0, - \\"texts\\": [], - \\"attributes\\": [ + }, { - \\"id\\": 4, - \\"attributes\\": { - \\"style\\": \\"display:block\\" + \\"parentId\\": 45, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"li\\", + \\"attributes\\": { + \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable\\", + \\"role\\": \\"presentation\\" + }, + \\"childNodes\\": [], + \\"id\\": 67 } - } - ], - \\"removes\\": [], - \\"adds\\": [] - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 0, - \\"texts\\": [], - \\"attributes\\": [ + }, { - \\"id\\": 4, - \\"attributes\\": { - \\"style\\": { - \\"color\\": \\"var(--mystery-color)\\" - } + \\"parentId\\": 67, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"class\\": \\"select2-result-label\\", + \\"id\\": \\"select2-result-label-3\\", + \\"role\\": \\"option\\" + }, + \\"childNodes\\": [], + \\"id\\": 68 } - } - ], - \\"removes\\": [], - \\"adds\\": [] - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 0, - \\"texts\\": [], - \\"attributes\\": [ + }, { - \\"id\\": 4, - \\"attributes\\": { - \\"style\\": \\"color:var(--mystery-color);display:block;margin:10px\\" + \\"parentId\\": 68, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\"B\\", + \\"id\\": 69 } - } - ], - \\"removes\\": [], - \\"adds\\": [] - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 0, - \\"texts\\": [], - \\"attributes\\": [ + }, { - \\"id\\": 4, - \\"attributes\\": { - \\"style\\": { - \\"margin-left\\": \\"Npx\\" - } + \\"parentId\\": 18, + \\"nextId\\": 36, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"id\\": \\"select2-drop-mask\\", + \\"class\\": \\"select2-drop-mask\\", + \\"style\\": \\"\\" + }, + \\"childNodes\\": [], + \\"id\\": 70 } - } - ], - \\"removes\\": [], - \\"adds\\": [] - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 0, - \\"texts\\": [], - \\"attributes\\": [ + }, { - \\"id\\": 4, - \\"attributes\\": { - \\"style\\": { - \\"margin-top\\": \\"Npx\\", - \\"color\\": false - } + \\"parentId\\": 62, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\"2 results are available, use up and down arrow keys to navigate.\\", + \\"id\\": 71 } - } - ], - \\"removes\\": [], - \\"adds\\": [] - } - } -]" -`; - -exports[`record integration tests can record style text mutations 1`] = ` -"[ - { - \\"type\\": 0, - \\"data\\": {} - }, - { - \\"type\\": 1, - \\"data\\": {} - }, - { - \\"type\\": 4, - \\"data\\": { - \\"href\\": \\"about:blank\\", - \\"width\\": 1920, - \\"height\\": 1080 - } - }, - { - \\"type\\": 2, - \\"data\\": { - \\"node\\": { - \\"type\\": 0, - \\"childNodes\\": [ - { - \\"type\\": 1, - \\"name\\": \\"html\\", - \\"publicId\\": \\"\\", - \\"systemId\\": \\"\\", - \\"id\\": 2 - }, - { + }, + { + \\"parentId\\": 45, + \\"nextId\\": 67, + \\"node\\": { \\"type\\": 2, - \\"tagName\\": \\"html\\", + \\"tagName\\": \\"li\\", + \\"attributes\\": { + \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable select2-highlighted\\", + \\"role\\": \\"presentation\\" + }, + \\"childNodes\\": [], + \\"id\\": 72 + } + }, + { + \\"parentId\\": 72, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"div\\", \\"attributes\\": { - \\"lang\\": \\"en\\" + \\"class\\": \\"select2-result-label\\", + \\"id\\": \\"select2-result-label-2\\", + \\"role\\": \\"option\\" }, - \\"childNodes\\": [ - { - \\"type\\": 2, - \\"tagName\\": \\"head\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 5 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"meta\\", - \\"attributes\\": { - \\"charset\\": \\"UTF-8\\" - }, - \\"childNodes\\": [], - \\"id\\": 6 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 7 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"meta\\", - \\"attributes\\": { - \\"name\\": \\"viewport\\", - \\"content\\": \\"width=device-width, initial-scale=1.0\\" - }, - \\"childNodes\\": [], - \\"id\\": 8 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 9 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"title\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"style\\", - \\"id\\": 11 - } - ], - \\"id\\": 10 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 12 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"style\\", - \\"attributes\\": { - \\"id\\": \\"dual-textContent\\", - \\"_cssText\\": \\"body { background-color: black; }body { color: orange !important; }\\", - \\"_cssTextSplits\\": \\"33 67\\" - }, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"\\", - \\"id\\": 14 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\", - \\"id\\": 15 - } - ], - \\"id\\": 13 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 16 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"script\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", - \\"id\\": 18 - } - ], - \\"id\\": 17 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 19 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"style\\", - \\"attributes\\": { - \\"id\\": \\"single-textContent\\", - \\"_cssText\\": \\"a:hover { outline: red solid 1px; }\\" - }, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"\\", - \\"id\\": 21 - } - ], - \\"id\\": 20 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 22 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"style\\", - \\"attributes\\": { - \\"id\\": \\"empty\\", - \\"_cssText\\": \\"a:hover { outline: blue solid 1px; }\\" - }, - \\"childNodes\\": [], - \\"id\\": 23 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 24 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"script\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", - \\"id\\": 26 - } - ], - \\"id\\": 25 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 27 - } - ], - \\"id\\": 4 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 28 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"body\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\\\n \\", - \\"id\\": 30 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"script\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", - \\"id\\": 32 - } - ], - \\"id\\": 31 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", - \\"id\\": 33 - } - ], - \\"id\\": 29 - } - ], - \\"id\\": 3 + \\"childNodes\\": [], + \\"id\\": 73 } - ], - \\"id\\": 1 - }, - \\"initialOffset\\": { - \\"left\\": 0, - \\"top\\": 0 - } - } - }, - { - \\"type\\": 3, - \\"data\\": { - \\"source\\": 0, - \\"texts\\": [], - \\"attributes\\": [], - \\"removes\\": [], - \\"adds\\": [ + }, { - \\"parentId\\": 13, + \\"parentId\\": 73, \\"nextId\\": null, \\"node\\": { \\"type\\": 3, - \\"textContent\\": \\".absolutify { background-image: url(\\\\\\"http://localhost:3030/rel\\\\\\"); }\\", - \\"id\\": 34 + \\"textContent\\": \\"A\\", + \\"id\\": 74 } }, { - \\"parentId\\": 13, - \\"nextId\\": 34, + \\"parentId\\": 73, + \\"nextId\\": 74, \\"node\\": { - \\"type\\": 3, - \\"textContent\\": \\"body { background-color: darkgreen; }\\", - \\"id\\": 35 + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"class\\": \\"select2-match\\" + }, + \\"childNodes\\": [], + \\"id\\": 75 + } + }, + { + \\"parentId\\": 68, + \\"nextId\\": 69, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"class\\": \\"select2-match\\" + }, + \\"childNodes\\": [], + \\"id\\": 76 } } ] @@ -4107,37 +4135,47 @@ exports[`record integration tests can record style text mutations 1`] = ` { \\"type\\": 3, \\"data\\": { - \\"source\\": 0, - \\"texts\\": [ - { - \\"id\\": 15, - \\"value\\": \\"body { color: yellow; }\\" - }, - { - \\"id\\": 15, - \\"value\\": \\"body { color: yellow; }\\" - }, - { - \\"id\\": 35, - \\"value\\": \\"body { background-color: purple; }\\" - } - ], - \\"attributes\\": [], - \\"removes\\": [], - \\"adds\\": [] + \\"source\\": 5, + \\"text\\": \\"\\", + \\"isChecked\\": false, + \\"id\\": 42 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 5, + \\"text\\": \\"\\", + \\"isChecked\\": false, + \\"id\\": 35 + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 0, + \\"id\\": 70 } }, { \\"type\\": 3, \\"data\\": { \\"source\\": 0, - \\"texts\\": [ + \\"texts\\": [], + \\"attributes\\": [ { - \\"id\\": 14, - \\"value\\": \\"\\\\n body { background-color: black !important; }\\\\n \\" + \\"id\\": 36, + \\"attributes\\": { + \\"style\\": { + \\"color\\": [ + \\"black\\", + \\"important\\" + ] + } + } } ], - \\"attributes\\": [], \\"removes\\": [], \\"adds\\": [] } @@ -4145,7 +4183,7 @@ exports[`record integration tests can record style text mutations 1`] = ` ]" `; -exports[`record integration tests > can record textarea mutations correctly 1`] = ` +exports[`record integration tests > can record style changes compactly and preserve css var() functions 1`] = ` "[ { \\"type\\": 0, @@ -4169,84 +4207,17 @@ exports[`record integration tests > can record textarea mutations correctly 1`] \\"node\\": { \\"type\\": 0, \\"childNodes\\": [ - { - \\"type\\": 1, - \\"name\\": \\"html\\", - \\"publicId\\": \\"\\", - \\"systemId\\": \\"\\", - \\"id\\": 2 - }, { \\"type\\": 2, \\"tagName\\": \\"html\\", - \\"attributes\\": { - \\"lang\\": \\"en\\" - }, + \\"attributes\\": {}, \\"childNodes\\": [ { \\"type\\": 2, \\"tagName\\": \\"head\\", \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 5 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"meta\\", - \\"attributes\\": { - \\"charset\\": \\"UTF-8\\" - }, - \\"childNodes\\": [], - \\"id\\": 6 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 7 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"meta\\", - \\"attributes\\": { - \\"name\\": \\"viewport\\", - \\"content\\": \\"width=device-width, initial-scale=1.0\\" - }, - \\"childNodes\\": [], - \\"id\\": 8 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 9 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"title\\", - \\"attributes\\": {}, - \\"childNodes\\": [ - { - \\"type\\": 3, - \\"textContent\\": \\"Empty\\", - \\"id\\": 11 - } - ], - \\"id\\": 10 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 12 - } - ], - \\"id\\": 4 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\", - \\"id\\": 13 + \\"childNodes\\": [], + \\"id\\": 3 }, { \\"type\\": 2, @@ -4256,21 +4227,7 @@ exports[`record integration tests > can record textarea mutations correctly 1`] { \\"type\\": 3, \\"textContent\\": \\"\\\\n \\", - \\"id\\": 15 - }, - { - \\"type\\": 2, - \\"tagName\\": \\"div\\", - \\"attributes\\": { - \\"id\\": \\"one\\" - }, - \\"childNodes\\": [], - \\"id\\": 16 - }, - { - \\"type\\": 3, - \\"textContent\\": \\"\\\\n \\\\n \\", - \\"id\\": 17 + \\"id\\": 5 }, { \\"type\\": 2, @@ -4280,23 +4237,24 @@ exports[`record integration tests > can record textarea mutations correctly 1`] { \\"type\\": 3, \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", - \\"id\\": 19 + \\"id\\": 7 } ], - \\"id\\": 18 + \\"id\\": 6 }, { \\"type\\": 3, \\"textContent\\": \\"\\\\n \\\\n \\\\n\\\\n\\", - \\"id\\": 20 + \\"id\\": 8 } ], - \\"id\\": 14 + \\"id\\": 4 } ], - \\"id\\": 3 + \\"id\\": 2 } ], + \\"compatMode\\": \\"BackCompat\\", \\"id\\": 1 }, \\"initialOffset\\": { @@ -4310,23 +4268,33 @@ exports[`record integration tests > can record textarea mutations correctly 1`] \\"data\\": { \\"source\\": 0, \\"texts\\": [], - \\"attributes\\": [], + \\"attributes\\": [ + { + \\"id\\": 4, + \\"attributes\\": { + \\"style\\": \\"background: var(--mystery)\\" + } + } + ], \\"removes\\": [], - \\"adds\\": [ + \\"adds\\": [] + } + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ { - \\"parentId\\": 14, - \\"nextId\\": null, - \\"node\\": { - \\"type\\": 2, - \\"tagName\\": \\"textarea\\", - \\"attributes\\": { - \\"value\\": \\"pre value\\" - }, - \\"childNodes\\": [], - \\"id\\": 21 + \\"id\\": 4, + \\"attributes\\": { + \\"style\\": \\"background: var(--mystery); background-color: black\\" } } - ] + ], + \\"removes\\": [], + \\"adds\\": [] } }, { @@ -4336,9 +4304,9 @@ exports[`record integration tests > can record textarea mutations correctly 1`] \\"texts\\": [], \\"attributes\\": [ { - \\"id\\": 21, + \\"id\\": 4, \\"attributes\\": { - \\"value\\": \\"ok\\" + \\"style\\": \\"\\" } } ], @@ -4353,9 +4321,9 @@ exports[`record integration tests > can record textarea mutations correctly 1`] \\"texts\\": [], \\"attributes\\": [ { - \\"id\\": 21, + \\"id\\": 4, \\"attributes\\": { - \\"value\\": \\"ok3\\" + \\"style\\": \\"display:block\\" } } ], @@ -4366,18 +4334,37 @@ exports[`record integration tests > can record textarea mutations correctly 1`] { \\"type\\": 3, \\"data\\": { - \\"source\\": 2, - \\"type\\": 5, - \\"id\\": 21 + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 4, + \\"attributes\\": { + \\"style\\": { + \\"color\\": \\"var(--mystery-color)\\" + } + } + } + ], + \\"removes\\": [], + \\"adds\\": [] } }, { \\"type\\": 3, \\"data\\": { - \\"source\\": 5, - \\"text\\": \\"1ok3\\", - \\"isChecked\\": false, - \\"id\\": 21 + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 4, + \\"attributes\\": { + \\"style\\": \\"color:var(--mystery-color);display:block;margin:10px\\" + } + } + ], + \\"removes\\": [], + \\"adds\\": [] } }, { @@ -4387,9 +4374,11 @@ exports[`record integration tests > can record textarea mutations correctly 1`] \\"texts\\": [], \\"attributes\\": [ { - \\"id\\": 21, + \\"id\\": 4, \\"attributes\\": { - \\"value\\": \\"ignore\\" + \\"style\\": { + \\"margin-left\\": \\"Npx\\" + } } } ], @@ -4400,10 +4389,21 @@ exports[`record integration tests > can record textarea mutations correctly 1`] { \\"type\\": 3, \\"data\\": { - \\"source\\": 5, - \\"text\\": \\"12ok3\\", - \\"isChecked\\": false, - \\"id\\": 21 + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 4, + \\"attributes\\": { + \\"style\\": { + \\"margin-top\\": \\"Npx\\", + \\"color\\": false + } + } + } + ], + \\"removes\\": [], + \\"adds\\": [] } } ]" diff --git a/packages/rrweb/test/integration.test.ts b/packages/rrweb/test/integration.test.ts index 69d819d9eb..7da895cb0e 100644 --- a/packages/rrweb/test/integration.test.ts +++ b/packages/rrweb/test/integration.test.ts @@ -101,7 +101,7 @@ describe('record integration tests', function (this: ISuite) { await assertSnapshot(snapshots); }); - it('can record textarea mutations correctly', async () => { + it('can record and replay textarea mutations correctly', async () => { const page: puppeteer.Page = await browser.newPage(); await page.goto('about:blank'); await page.setContent(getHtml.call(this, 'empty.html')); @@ -166,7 +166,7 @@ describe('record integration tests', function (this: ISuite) { ]); }); - it('can record style text mutations', async () => { + it('can record and replay style mutations', async () => { // This test shows that the `isStyle` attribute on textContent is not needed in a mutation // TODO: we could get a lot more elaborate here with mixed textContent and insertRule mutations const page: puppeteer.Page = await browser.newPage();