[Recorder] Fix and re-enable flaky tests

Fixed some things and the tests appear not to be so flaky
anymore.

Fixed: 40188140, 40072140, 40279056, 40911162, 40911160
Change-Id: Ie7d600c0514d6dbffa94bfc6cf7b585567630dcc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6072804
Commit-Queue: Simon Zünd <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
Auto-Submit: Alex Rudenko <[email protected]>

Author: OrKoN

front_end/panels/recorder/models/SchemaUtils.ts

@@ -31,7 +31,12 @@ export function createEmulateNetworkConditionsStep(conditions: {
   upload: number,
   latency: number,
 }): EmulateNetworkConditionsStep {
-  return {type: StepType.EmulateNetworkConditions, ...conditions};
+  return {
+    type: StepType.EmulateNetworkConditions,
+    download: conditions.download,
+    upload: conditions.upload,
+    latency: conditions.latency,
+  };
 }
 
 export function areSelectorsEqual(stepA: Step, stepB: Step): boolean {

test/e2e/recorder/recorder_test.json

@@ -473,6 +473,85 @@
       }
     ]
   },
+  "Recorder should also record network conditions - 1": {
+    "title": "New Recording",
+    "steps": [
+      {
+        "type": "emulateNetworkConditions",
+        "download": 50000,
+        "upload": 50000,
+        "latency": 2000
+      },
+      {
+        "type": "setViewport",
+        "width": 1280,
+        "height": 720,
+        "deviceScaleFactor": 1,
+        "isMobile": false,
+        "hasTouch": false,
+        "isLandscape": false
+      },
+      {
+        "type": "navigate",
+        "url": "https://localhost:<test-port>/test/e2e/resources/recorder/recorder.html",
+        "assertedEvents": [
+          {
+            "type": "navigation",
+            "url": "https://localhost:<test-port>/test/e2e/resources/recorder/recorder.html",
+            "title": ""
+          }
+        ]
+      },
+      {
+        "type": "click",
+        "target": "main",
+        "selectors": [
+          [
+            "aria/Test Button"
+          ],
+          [
+            "#test"
+          ],
+          [
+            "xpath///*[@id=\"test\"]"
+          ],
+          [
+            "pierce/#test"
+          ],
+          [
+            "text/Test Button"
+          ]
+        ]
+      },
+      {
+        "type": "emulateNetworkConditions",
+        "download": 180000,
+        "upload": 84375,
+        "latency": 562.5
+      },
+      {
+        "type": "click",
+        "target": "main",
+        "selectors": [
+          [
+            "aria/Test Button"
+          ],
+          [
+            "#test"
+          ],
+          [
+            "xpath///*[@id=\"test\"]"
+          ],
+          [
+            "pierce/#test"
+          ],
+          [
+            "text/Test Button"
+          ]
+        ]
+      }
+    ]
+  },
   "Recorder should create an aria selector even if the element is within a shadow root - 1": {
     "title": "New Recording",
     "steps": [

test/e2e/recorder/recorder_test.ts

@@ -256,17 +256,17 @@ describe('Recorder', function() {
     assertRecordingMatchesSnapshot(recording);
   });
 
-  // TODO: remove flakiness from recording network conditions.
-  it.skip('[crbug.com/1224832]: should also record network conditions', async () => {
+  it('should also record network conditions', async () => {
     await startRecording('recorder/recorder.html', {
-      networkCondition: 'Fast 3G',
+      networkCondition: '3G',
     });
 
     const {frontend, target} = getBrowserAndPages();
     await target.bringToFront();
     await target.click('#test');
     await frontend.bringToFront();
-    await changeNetworkConditions('Slow 3G');
+    await changeNetworkConditions('Slow 4G');
+    await raf(frontend);
     await openRecorderPanel();
     await target.bringToFront();
     await target.click('#test');
@@ -295,7 +295,7 @@ describe('Recorder', function() {
   });
 
   // Blocking Chromium PINS roll
-  it.skip('[crbug.com/1482078] should capture keyboard events on non-text inputs', async () => {
+  it('should capture keyboard events on non-text inputs', async () => {
     await startRecording('recorder/input.html', {untrustedEvents: true});
 
     const {target} = getBrowserAndPages();
@@ -328,9 +328,7 @@ describe('Recorder', function() {
     assertRecordingMatchesSnapshot(recording);
   });
 
-  // skipped until we figure out why the keyup for Enter is not recorded in
-  // 1% of the runs.
-  it.skip('[crbug.com/1473597] should capture a change that causes navigation without blur or change', async () => {
+  it('should capture a change that causes navigation without blur or change', async () => {
     await startRecording('recorder/programmatic-navigation-on-keydown.html');
 
     const {target} = getBrowserAndPages();
@@ -425,8 +423,7 @@ describe('Recorder', function() {
     await waitFor('.section .screenshot');
   });
 
-  // Flaky test
-  it.skip('[crbug.com/1443423]: should record interactions with popups', async () => {
+  it('should record interactions with popups', async () => {
     await startRecording('recorder/recorder.html', {untrustedEvents: true});
 
     const {target, browser} = getBrowserAndPages();

test/e2e/recorder/ui_test.ts

@@ -176,8 +176,7 @@ describe('Recorder', function() {
           await waitFor('.expanded');
         }
 
-        // Flaky test
-        it.skip('[crbug.com/1443421]: should select through the selector picker', async () => {
+        it('should select through the selector picker', async () => {
           const {target, frontend} = getBrowserAndPages();
           await frontend.bringToFront();
           await frontend.waitForSelector('pierce/.settings');
@@ -196,8 +195,7 @@ describe('Recorder', function() {
           assertRecordingMatchesSnapshot(recording);
         });
 
-        // Flaky test
-        it.skip('[crbug.com/1443421]: should select through the selector picker twice', async () => {
+        it('should select through the selector picker twice', async () => {
           const {target, frontend} = getBrowserAndPages();
           await frontend.bringToFront();
           await frontend.waitForSelector('pierce/.settings');
@@ -226,8 +224,7 @@ describe('Recorder', function() {
           assertRecordingMatchesSnapshot(recording);
         });
 
-        // Flaky test
-        it.skip('[crbug.com/1443421]: should select through the selector picker during recording', async () => {
+        it('should select through the selector picker during recording', async () => {
           const {target, frontend} = getBrowserAndPages();
           await frontend.bringToFront();
           await frontend.waitForSelector('pierce/.settings');