Add e2e test for Performance Panel reload and record
Bug: 1464849
Change-Id: I385aed92c2dbf6bfd7c7e767f5072738df581385
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4684350
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Andres Olivares <[email protected]>
diff --git a/test/e2e/helpers/performance-helpers.ts b/test/e2e/helpers/performance-helpers.ts
index 00848ff..10c1141 100644
--- a/test/e2e/helpers/performance-helpers.ts
+++ b/test/e2e/helpers/performance-helpers.ts
@@ -7,6 +7,7 @@
import {click, goToResource, platform, waitFor, waitForAria} from '../../shared/helper.js';
export const RECORD_BUTTON_SELECTOR = '[aria-label="Record"]';
+export const RELOAD_AND_RECORD_BUTTON_SELECTOR = '[aria-label="Start profiling and reload page"]';
export const STOP_BUTTON_SELECTOR = '[aria-label="Stop"]';
export const SUMMARY_TAB_SELECTOR = '[aria-label="Summary"]';
export const BOTTOM_UP_SELECTOR = '[aria-label="Bottom-Up"]';
@@ -60,6 +61,14 @@
await waitFor(STOP_BUTTON_SELECTOR);
}
+export async function reloadAndRecord() {
+ await click(RELOAD_AND_RECORD_BUTTON_SELECTOR);
+ // Make sure the timeline details panel appears. It's a sure way to assert
+ // that a recording is actually displayed as some of the other elements in
+ // the timeline remain in the DOM even after the recording has been cleared.
+ await waitFor('.timeline-details-chip-body');
+}
+
export async function stopRecording() {
await click(STOP_BUTTON_SELECTOR);
diff --git a/test/e2e/performance/recording_test.ts b/test/e2e/performance/recording_test.ts
index fa4f977..b79ed13 100644
--- a/test/e2e/performance/recording_test.ts
+++ b/test/e2e/performance/recording_test.ts
@@ -8,12 +8,13 @@
import {
getTotalTimeFromSummary,
navigateToPerformanceTab,
+ reloadAndRecord,
startRecording,
stopRecording,
} from '../helpers/performance-helpers.js';
describe('The Performance panel', () => {
- it('can start and stop a new recording', async () => {
+ it('supports the user manually starting and stopping a recording', async () => {
await navigateToPerformanceTab('empty');
await startRecording();
@@ -23,4 +24,11 @@
const totalTime = await getTotalTimeFromSummary();
assert.isAbove(totalTime, 0, 'The recording was created successfully');
});
+
+ it('can reload and record a trace', async () => {
+ await navigateToPerformanceTab('fake-website');
+ await reloadAndRecord();
+ const totalTime = await getTotalTimeFromSummary();
+ assert.isAbove(totalTime, 0, 'The recording was created successfully');
+ });
});
diff --git a/test/e2e/resources/performance/BUILD.gn b/test/e2e/resources/performance/BUILD.gn
index dfe378f..e6a1d7e 100644
--- a/test/e2e/resources/performance/BUILD.gn
+++ b/test/e2e/resources/performance/BUILD.gn
@@ -6,6 +6,7 @@
copy_to_gen("performance") {
sources = [
+ "fake-website.html",
"wasm/profiling.html",
"wasm/profiling.wasm",
]
diff --git a/test/e2e/resources/performance/fake-website.html b/test/e2e/resources/performance/fake-website.html
new file mode 100644
index 0000000..6efedc6
--- /dev/null
+++ b/test/e2e/resources/performance/fake-website.html
@@ -0,0 +1,15 @@
+<!--
+ Copyright 2023 The Chromium Authors. All rights reserved.
+ Use of this source code is governed by a BSD-style license that can be
+ found in the LICENSE file.
+-->
+<!doctype html>
+<html>
+ <head>
+ <title>Test performance website</title>
+ <style>.container {width: 500px; height: 500px; background: red;}</style>
+ </head>
+ <body>
+ <div class="container">hello world</div>
+ </body>
+</html>
