Lock yarn to 1.23.0 (#922)

* Lock yarn to 1.23.0

* fix flaky test

* Fix flaky tests

.gitattributes

@@ -0,0 +1,2 @@
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

.gitignore

@@ -3,7 +3,6 @@
 .idea
 node_modules
 package-lock.json
-# yarn.lock
 
 temp
 
@@ -17,3 +16,7 @@ build
 dist
 
 .turbo
+
+# `.yarn/install-state.gz` is an optimization file that you shouldn't ever have to commit. 
+# It simply stores the exact state of your project so that the next commands can boot without having to resolve your workspaces all over again.
+.yarn/install-state.gz

.yarnrc.yml

@@ -0,0 +1 @@
+yarnPath: '.yarn/releases/yarn-1.23.0-20220130.1630.cjs'

packages/rrweb/test/integration.test.ts

@@ -547,36 +547,39 @@ describe('record integration tests', function (this: ISuite) {
     await page.goto('about:blank');
     await page.setContent(getHtml.call(this, 'frame2.html'));
 
+    await page.waitForTimeout(10); // wait till frame was added to dom
+    await waitForRAF(page); // wait till browser loaded contents of frame
+
     await page.evaluate(() => {
-      const sleep = (ms: number) =>
-        new Promise((resolve) => setTimeout(resolve, ms));
-      let iframe: HTMLIFrameElement;
-      sleep(10)
-        .then(() => {
-          // get contentDocument of iframe five
-          const contentDocument1 = document.querySelector('iframe')!
-            .contentDocument!;
-          // create shadow dom #1
-          contentDocument1.body.attachShadow({ mode: 'open' });
-          contentDocument1.body.shadowRoot!.appendChild(
-            document.createElement('div'),
-          );
-          const div = contentDocument1.body.shadowRoot!.childNodes[0];
-          iframe = contentDocument1.createElement('iframe');
-          // append an iframe to shadow dom #1
-          div.appendChild(iframe);
-          return sleep(10);
-        })
-        .then(() => {
-          const contentDocument2 = iframe.contentDocument!;
-          // create shadow dom #2 in the iframe
-          contentDocument2.body.attachShadow({ mode: 'open' });
-          contentDocument2.body.shadowRoot!.appendChild(
-            document.createElement('span'),
-          );
-        });
+      // get contentDocument of iframe five
+      const contentDocument1 = document.querySelector('iframe')!
+        .contentDocument!;
+      // create shadow dom #1
+      contentDocument1.body.attachShadow({ mode: 'open' });
+      contentDocument1.body.shadowRoot!.appendChild(
+        document.createElement('div'),
+      );
+      const div = contentDocument1.body.shadowRoot!.childNodes[0];
+      const iframe = contentDocument1.createElement('iframe');
+      // append an iframe to shadow dom #1
+      div.appendChild(iframe);
     });
-    await page.waitForTimeout(50);
+
+    await waitForRAF(page); // wait till browser loaded contents of frame
+
+    page.evaluate(() => {
+      const iframe: HTMLIFrameElement = document
+        .querySelector('iframe')!
+        .contentDocument!.body.shadowRoot!.querySelector('iframe')!;
+
+      const contentDocument2 = iframe.contentDocument!;
+      // create shadow dom #2 in the iframe
+      contentDocument2.body.attachShadow({ mode: 'open' });
+      contentDocument2.body.shadowRoot!.appendChild(
+        document.createElement('span'),
+      );
+    });
+    await waitForRAF(page); // wait till browser sent snapshots
 
     const snapshots = await page.evaluate('window.snapshots');
     assertSnapshot(snapshots);