From 4e0c4015838badffc2a38bc232f055eab3f685dd Mon Sep 17 00:00:00 2001 From: Yanzhen Yu Date: Wed, 1 Apr 2026 12:00:00 +0800 Subject: [PATCH] add select2.html snapshot test --- test/__snapshots__/integration.ts.snap | 1131 ++++++++++++++++++++++++ test/html/select2.html | 26 + test/integration.ts | 19 + 3 files changed, 1176 insertions(+) create mode 100644 test/html/select2.html diff --git a/test/__snapshots__/integration.ts.snap b/test/__snapshots__/integration.ts.snap index 1ac7fc12..4efacbda 100644 --- a/test/__snapshots__/integration.ts.snap +++ b/test/__snapshots__/integration.ts.snap @@ -1211,3 +1211,1134 @@ exports[`form 1`] = ` } ]" `; + +exports[`select2 1`] = ` +"[ + { + \\"type\\": 0, + \\"data\\": {}, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 1, + \\"data\\": {}, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 4, + \\"data\\": { + \\"href\\": \\"data:text/html,%0A%0A%0A %0A %0A %0A Select2 3.5%0A %0A%0A%0A
%0A Select2 is a jQuery replacement for select boxes.%0A
%0A In the 3.5 version it use a quite complicated DOM generation strategy which is a good battle-test for rrweb's recorder.%0A
%0A %0A %0A %0A %0A%0A %0A %0A %0A\\", + \\"width\\": 800, + \\"height\\": 600 + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"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\\": \\"Select2 3.5\\", + \\"id\\": 13 + } + ], + \\"id\\": 12 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 14 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"link\\", + \\"attributes\\": { + \\"rel\\": \\"stylesheet\\", + \\"href\\": \\"https://cdn.jsdelivr.net/npm/select2@3.5.1/select2.css\\" + }, + \\"childNodes\\": [], + \\"id\\": 15 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\", + \\"id\\": 16 + } + ], + \\"id\\": 4 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\", + \\"id\\": 17 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"body\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 19 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"blockquote\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n Select2 is a jQuery replacement for select boxes.\\\\n \\", + \\"id\\": 21 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"br\\", + \\"attributes\\": {}, + \\"childNodes\\": [], + \\"id\\": 22 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n In the 3.5 version it use a quite complicated DOM generation strategy which is a good battle-test for rrweb's recorder.\\\\n \\", + \\"id\\": 23 + } + ], + \\"id\\": 20 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 24 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"class\\": \\"select2-container\\", + \\"id\\": \\"s2id_el\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"a\\", + \\"attributes\\": { + \\"href\\": \\"javascript:void(0)\\", + \\"class\\": \\"select2-choice\\", + \\"tabindex\\": \\"-1\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 27 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"class\\": \\"select2-chosen\\", + \\"id\\": \\"select2-chosen-1\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"A\\", + \\"id\\": 29 + } + ], + \\"id\\": 28 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"abbr\\", + \\"attributes\\": { + \\"class\\": \\"select2-search-choice-close\\" + }, + \\"childNodes\\": [], + \\"id\\": 30 + }, + { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 31 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"class\\": \\"select2-arrow\\", + \\"role\\": \\"presentation\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 2, + \\"tagName\\": \\"b\\", + \\"attributes\\": { + \\"role\\": \\"presentation\\" + }, + \\"childNodes\\": [], + \\"id\\": 33 + } + ], + \\"id\\": 32 + } + ], + \\"id\\": 26 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"label\\", + \\"attributes\\": { + \\"for\\": \\"s2id_autogen1\\", + \\"class\\": \\"select2-offscreen\\" + }, + \\"childNodes\\": [], + \\"id\\": 34 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"input\\", + \\"attributes\\": { + \\"class\\": \\"select2-focusser select2-offscreen\\", + \\"type\\": \\"text\\", + \\"aria-haspopup\\": \\"true\\", + \\"role\\": \\"button\\", + \\"aria-labelledby\\": \\"select2-chosen-1\\", + \\"id\\": \\"s2id_autogen1\\" + }, + \\"childNodes\\": [], + \\"id\\": 35 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 37 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"class\\": \\"select2-search\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 39 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"label\\", + \\"attributes\\": { + \\"for\\": \\"s2id_autogen1_search\\", + \\"class\\": \\"select2-offscreen\\" + }, + \\"childNodes\\": [], + \\"id\\": 40 + }, + { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 41 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"input\\", + \\"attributes\\": { + \\"type\\": \\"text\\", + \\"autocomplete\\": \\"off\\", + \\"autocorrect\\": \\"off\\", + \\"autocapitalize\\": \\"off\\", + \\"spellcheck\\": \\"false\\", + \\"class\\": \\"select2-input\\", + \\"role\\": \\"combobox\\", + \\"aria-expanded\\": \\"true\\", + \\"aria-autocomplete\\": \\"list\\", + \\"aria-owns\\": \\"select2-results-1\\", + \\"id\\": \\"s2id_autogen1_search\\", + \\"placeholder\\": \\"\\" + }, + \\"childNodes\\": [], + \\"id\\": 42 + }, + { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 43 + } + ], + \\"id\\": 38 + }, + { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 44 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"ul\\", + \\"attributes\\": { + \\"class\\": \\"select2-results\\", + \\"role\\": \\"listbox\\", + \\"id\\": \\"select2-results-1\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 46 + } + ], + \\"id\\": 45 + } + ], + \\"id\\": 36 + } + ], + \\"id\\": 25 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"select\\", + \\"attributes\\": { + \\"id\\": \\"el\\", + \\"tabindex\\": \\"-1\\", + \\"title\\": \\"\\", + \\"style\\": \\"display: none;\\", + \\"value\\": \\"a\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 48 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"option\\", + \\"attributes\\": { + \\"value\\": \\"a\\", + \\"selected\\": true + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"A\\", + \\"id\\": 50 + } + ], + \\"id\\": 49 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 51 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"option\\", + \\"attributes\\": { + \\"value\\": \\"b\\" + }, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"B\\", + \\"id\\": 53 + } + ], + \\"id\\": 52 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 54 + } + ], + \\"id\\": 47 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 55 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": { + \\"src\\": \\"https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js\\" + }, + \\"childNodes\\": [], + \\"id\\": 56 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 57 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": { + \\"src\\": \\"https://cdn.jsdelivr.net/npm/select2@3.5.2-browserify/select2.min.js\\" + }, + \\"childNodes\\": [], + \\"id\\": 58 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\", + \\"id\\": 59 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 61 + } + ], + \\"id\\": 60 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"role\\": \\"status\\", + \\"aria-live\\": \\"polite\\", + \\"class\\": \\"select2-hidden-accessible\\" + }, + \\"childNodes\\": [], + \\"id\\": 62 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n\\\\n \\", + \\"id\\": 63 + }, + { + \\"type\\": 2, + \\"tagName\\": \\"script\\", + \\"attributes\\": {}, + \\"childNodes\\": [ + { + \\"type\\": 3, + \\"textContent\\": \\"SCRIPT_PLACEHOLDER\\", + \\"id\\": 65 + } + ], + \\"id\\": 64 + }, + { + \\"type\\": 3, + \\"textContent\\": \\"\\\\n \\\\n \\\\n\\", + \\"id\\": 66 + } + ], + \\"id\\": 18 + } + ], + \\"id\\": 3 + } + ], + \\"id\\": 1 + }, + \\"initialOffset\\": { + \\"left\\": 0, + \\"top\\": 0 + } + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 1, + \\"id\\": 26, + \\"x\\": 31, + \\"y\\": 94 + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 5, + \\"id\\": 42 + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 25, + \\"attributes\\": { + \\"class\\": \\"select2-container select2-dropdown-open select2-container-active\\" + } + }, + { + \\"id\\": 75, + \\"attributes\\": { + \\"id\\": \\"select2-drop\\", + \\"style\\": \\"left: 8px; width: 47.5625px; top: 108px; bottom: auto; display: block;\\", + \\"class\\": \\"select2-drop select2-display-none select2-with-searchbox select2-drop-active\\" + } + }, + { + \\"id\\": 93, + \\"attributes\\": { + \\"style\\": \\"\\" + } + }, + { + \\"id\\": 81, + \\"attributes\\": { + \\"class\\": \\"select2-input select2-focused\\", + \\"aria-activedescendant\\": \\"select2-result-label-2\\" + } + }, + { + \\"id\\": 35, + \\"attributes\\": { + \\"disabled\\": \\"\\" + } + }, + { + \\"id\\": 85, + \\"attributes\\": { + \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable select2-highlighted\\" + } + } + ], + \\"removes\\": [ + { + \\"parentId\\": 25, + \\"id\\": 26 + }, + { + \\"parentId\\": 25, + \\"id\\": 36 + }, + { + \\"parentId\\": 45, + \\"id\\": 46 + } + ], + \\"adds\\": [ + { + \\"parentId\\": 25, + \\"previousId\\": null, + \\"nextId\\": 34, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"a\\", + \\"attributes\\": { + \\"href\\": \\"javascript:void(0)\\", + \\"class\\": \\"select2-choice\\", + \\"tabindex\\": \\"-1\\" + }, + \\"childNodes\\": [], + \\"id\\": 67 + } + }, + { + \\"parentId\\": 67, + \\"previousId\\": null, + \\"nextId\\": 28, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 68 + } + }, + { + \\"parentId\\": 67, + \\"previousId\\": 68, + \\"nextId\\": 30, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"class\\": \\"select2-chosen\\", + \\"id\\": \\"select2-chosen-1\\" + }, + \\"childNodes\\": [], + \\"id\\": 69 + } + }, + { + \\"parentId\\": 69, + \\"previousId\\": null, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\"A\\", + \\"id\\": 70 + } + }, + { + \\"parentId\\": 67, + \\"previousId\\": 69, + \\"nextId\\": 31, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"abbr\\", + \\"attributes\\": { + \\"class\\": \\"select2-search-choice-close\\" + }, + \\"childNodes\\": [], + \\"id\\": 71 + } + }, + { + \\"parentId\\": 67, + \\"previousId\\": 71, + \\"nextId\\": 32, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 72 + } + }, + { + \\"parentId\\": 67, + \\"previousId\\": 72, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"class\\": \\"select2-arrow\\", + \\"role\\": \\"presentation\\" + }, + \\"childNodes\\": [], + \\"id\\": 73 + } + }, + { + \\"parentId\\": 73, + \\"previousId\\": null, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"b\\", + \\"attributes\\": { + \\"role\\": \\"presentation\\" + }, + \\"childNodes\\": [], + \\"id\\": 74 + } + }, + { + \\"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: 8px; width: 47.5625px; top: 108px; bottom: auto; display: block;\\" + }, + \\"childNodes\\": [], + \\"id\\": 75 + } + }, + { + \\"parentId\\": 75, + \\"previousId\\": null, + \\"nextId\\": 38, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 76 + } + }, + { + \\"parentId\\": 75, + \\"previousId\\": 76, + \\"nextId\\": 44, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"class\\": \\"select2-search\\" + }, + \\"childNodes\\": [], + \\"id\\": 77 + } + }, + { + \\"parentId\\": 77, + \\"previousId\\": null, + \\"nextId\\": 40, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 78 + } + }, + { + \\"parentId\\": 77, + \\"previousId\\": 78, + \\"nextId\\": 41, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"label\\", + \\"attributes\\": { + \\"for\\": \\"s2id_autogen1_search\\", + \\"class\\": \\"select2-offscreen\\" + }, + \\"childNodes\\": [], + \\"id\\": 79 + } + }, + { + \\"parentId\\": 77, + \\"previousId\\": 79, + \\"nextId\\": 42, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 80 + } + }, + { + \\"parentId\\": 77, + \\"previousId\\": 80, + \\"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\\": 81 + } + }, + { + \\"parentId\\": 77, + \\"previousId\\": 81, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 82 + } + }, + { + \\"parentId\\": 75, + \\"previousId\\": 77, + \\"nextId\\": 45, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\" \\", + \\"id\\": 83 + } + }, + { + \\"parentId\\": 75, + \\"previousId\\": 83, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"ul\\", + \\"attributes\\": { + \\"class\\": \\"select2-results\\", + \\"role\\": \\"listbox\\", + \\"id\\": \\"select2-results-1\\" + }, + \\"childNodes\\": [], + \\"id\\": 84 + } + }, + { + \\"parentId\\": 84, + \\"previousId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"li\\", + \\"attributes\\": { + \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable select2-highlighted\\", + \\"role\\": \\"presentation\\" + }, + \\"childNodes\\": [], + \\"id\\": 85 + } + }, + { + \\"parentId\\": 85, + \\"previousId\\": null, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"class\\": \\"select2-result-label\\", + \\"id\\": \\"select2-result-label-2\\", + \\"role\\": \\"option\\" + }, + \\"childNodes\\": [], + \\"id\\": 86 + } + }, + { + \\"parentId\\": 86, + \\"previousId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"class\\": \\"select2-match\\" + }, + \\"childNodes\\": [], + \\"id\\": 87 + } + }, + { + \\"parentId\\": 86, + \\"previousId\\": 87, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\"A\\", + \\"id\\": 88 + } + }, + { + \\"parentId\\": 84, + \\"previousId\\": 85, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"li\\", + \\"attributes\\": { + \\"class\\": \\"select2-results-dept-0 select2-result select2-result-selectable\\", + \\"role\\": \\"presentation\\" + }, + \\"childNodes\\": [], + \\"id\\": 89 + } + }, + { + \\"parentId\\": 89, + \\"previousId\\": null, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"class\\": \\"select2-result-label\\", + \\"id\\": \\"select2-result-label-3\\", + \\"role\\": \\"option\\" + }, + \\"childNodes\\": [], + \\"id\\": 90 + } + }, + { + \\"parentId\\": 90, + \\"previousId\\": null, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"span\\", + \\"attributes\\": { + \\"class\\": \\"select2-match\\" + }, + \\"childNodes\\": [], + \\"id\\": 91 + } + }, + { + \\"parentId\\": 90, + \\"previousId\\": 91, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\"B\\", + \\"id\\": 92 + } + }, + { + \\"parentId\\": 18, + \\"previousId\\": 66, + \\"nextId\\": 75, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"id\\": \\"select2-drop-mask\\", + \\"class\\": \\"select2-drop-mask\\", + \\"style\\": \\"\\" + }, + \\"childNodes\\": [], + \\"id\\": 93 + } + }, + { + \\"parentId\\": 62, + \\"previousId\\": null, + \\"nextId\\": null, + \\"node\\": { + \\"type\\": 3, + \\"textContent\\": \\"2 results are available, use up and down arrow keys to navigate.\\", + \\"id\\": 94 + } + } + ] + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 0, + \\"id\\": 93, + \\"x\\": 31, + \\"y\\": 94 + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 5, + \\"text\\": \\"\\", + \\"isChecked\\": false, + \\"id\\": 81 + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 5, + \\"text\\": \\"\\", + \\"isChecked\\": false, + \\"id\\": 35 + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 1, + \\"id\\": 93, + \\"x\\": 31, + \\"y\\": 94 + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 6, + \\"id\\": 81 + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 5, + \\"id\\": 35 + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 0, + \\"texts\\": [], + \\"attributes\\": [ + { + \\"id\\": 95, + \\"attributes\\": { + \\"style\\": \\"display: none;\\" + } + }, + { + \\"id\\": 75, + \\"attributes\\": { + \\"id\\": null, + \\"style\\": \\"left: 8px; width: 47.5625px; top: 108px; bottom: auto; display: none;\\" + } + }, + { + \\"id\\": 25, + \\"attributes\\": { + \\"class\\": \\"select2-container select2-container-active\\" + } + }, + { + \\"id\\": 35, + \\"attributes\\": { + \\"disabled\\": null + } + }, + { + \\"id\\": 81, + \\"attributes\\": { + \\"class\\": \\"select2-input\\" + } + } + ], + \\"removes\\": [ + { + \\"parentId\\": 18, + \\"id\\": 93 + }, + { + \\"parentId\\": 84, + \\"id\\": 85 + }, + { + \\"parentId\\": 84, + \\"id\\": 89 + } + ], + \\"adds\\": [ + { + \\"parentId\\": 18, + \\"previousId\\": 66, + \\"nextId\\": 75, + \\"node\\": { + \\"type\\": 2, + \\"tagName\\": \\"div\\", + \\"attributes\\": { + \\"id\\": \\"select2-drop-mask\\", + \\"class\\": \\"select2-drop-mask\\", + \\"style\\": \\"display: none;\\" + }, + \\"childNodes\\": [], + \\"id\\": 95 + } + } + ] + }, + \\"timestamp\\": 1542268800000 + }, + { + \\"type\\": 3, + \\"data\\": { + \\"source\\": 2, + \\"type\\": 0, + \\"id\\": 67, + \\"x\\": 31, + \\"y\\": 94 + }, + \\"timestamp\\": 1542268800000 + } +]" +`; diff --git a/test/html/select2.html b/test/html/select2.html new file mode 100644 index 00000000..294abf30 --- /dev/null +++ b/test/html/select2.html @@ -0,0 +1,26 @@ + + + + + + + Select2 3.5 + + + +
+ Select2 is a jQuery replacement for select boxes. +
+ In the 3.5 version it use a quite complicated DOM generation strategy which is a good battle-test for rrweb's recorder. +
+ + + + + + \ No newline at end of file diff --git a/test/integration.ts b/test/integration.ts index 18c87ce4..e6421513 100644 --- a/test/integration.ts +++ b/test/integration.ts @@ -174,4 +174,23 @@ describe('record integration tests', () => { ); assert(result.pass, result.pass ? '' : result.report()); }); + + it('can record node mutations', async () => { + const page: puppeteer.Page = await this.browser.newPage(); + await page.goto(`data:text/html,${getHtml.call(this, 'select2.html')}`, { + waitUntil: 'networkidle0', + }); + + // toggle the select box + await page.click('.select2-container'); + await page.click('.select2-container'); + + const snapshots = await page.evaluate('window.snapshots'); + const result = matchSnapshot( + stringifySnapshots(snapshots), + __filename, + 'select2', + ); + assert(result.pass, result.pass ? '' : result.report()); + }).timeout(5000); });