zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-06 03:51:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ve] Check for detailed panel impressions after reload in e2e tests

Browse Source 
Bug: 348173254
Change-Id: I555e8a791f023899f5bd5201e73be81f152d4599
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5664660
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Reviewed-by: Ergün Erdoğmuş <ergunsh@chromium.org>
Commit-Queue: Danil Somsikov <dsv@chromium.org>
This commit is contained in:
Danil Somsikov
2024-07-01 14:56:10 +00:00
committed by Devtools-frontend LUCI CQ
parent b4c1b9eace
commit 241e3c06ea
12 changed files with 348 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/e2e/helpers/animations-helpers.ts
+18
View File
@@ -3,7 +3,9 @@
// found in the LICENSE file.
import {click, goToResource, waitFor} from '../../shared/helper.js';
import {openPanelViaMoreTools} from './settings-helpers.js';
import {veImpression} from './visual-logging-helpers.js';
export async function waitForAnimationsPanelToLoad() {
// Open panel and wait for content
@@ -22,3 +24,19 @@ export async function waitForAnimationContent() {
await waitFor('.animation-node-row');
await waitFor('svg.animation-ui');
}
export function veImpressionForAnimationsPanel() {
return veImpression('Panel', 'animations', [
veImpression(
'Toolbar', undefined,
[
veImpression('Action', 'animations.playback-rate-100'),
veImpression('Action', 'animations.playback-rate-25'),
veImpression('Action', 'animations.playback-rate-10'),
veImpression('Action', 'animations.clear'),
veImpression('Toggle', 'animations.pause-resume-all'),
]),
veImpression('Timeline', 'animations.grid-header'),
veImpression('Action', 'animations.play-replay-pause-animation-group'),
]);
}
test/e2e/helpers/application-helpers.ts
+46
View File
@@ -15,6 +15,7 @@ import {
waitForNone,
} from '../../shared/helper.js';
import {veImpression} from './visual-logging-helpers.js';
export async function navigateToApplicationTab(_target: puppeteer.Page, testName: string) {
const {target, frontend} = getBrowserAndPages();
await target.bringToFront();
@@ -177,3 +178,48 @@ export async function unregisterServiceWorker() {
await click(UNREGISTER_SERVICE_WORKER_SELECTOR);
await waitForNone(UNREGISTER_SERVICE_WORKER_SELECTOR);
}
export function veImpressionForApplicationPanel() {
return veImpression('Panel', 'resources', [
veImpression('Pane', 'sidebar', [
veImpression('Tree', undefined, [
veImpression('TreeItem', 'application', [
veImpression('Expand'),
veImpression('TreeItem', 'manifest', [veImpression('Expand')]),
veImpression('TreeItem', 'service-workers'),
veImpression('TreeItem', 'storage'),
]),
veImpression('TreeItem', 'storage', [
veImpression('Expand'),
veImpression('TreeItem', 'cache-storage'),
veImpression('TreeItem', 'cookies', [veImpression('Expand')]),
veImpression('TreeItem', 'indexed-db'),
veImpression('TreeItem', 'interest-groups'),
veImpression('TreeItem', 'local-storage', [veImpression('Expand')]),
veImpression('TreeItem', 'private-state-tokens'),
veImpression('TreeItem', 'session-storage', [veImpression('Expand')]),
veImpression('TreeItem', 'shared-storage'),
veImpression('TreeItem', 'storage-buckets'),
]),
veImpression('TreeItem', 'background-services', [
veImpression('Expand'),
veImpression('TreeItem', 'background-fetch'),
veImpression('TreeItem', 'background-sync'),
veImpression('TreeItem', 'bfcache'),
veImpression('TreeItem', 'bounce-tracking-mitigations'),
veImpression('TreeItem', 'notifications'),
veImpression('TreeItem', 'payment-handler'),
veImpression('TreeItem', 'periodic-background-sync'),
veImpression('TreeItem', 'preloading', [veImpression('Expand')]),
veImpression('TreeItem', 'push-messaging'),
veImpression('TreeItem', 'reporting-api'),
]),
veImpression('TreeItem', 'frames', [
veImpression('Expand'),
veImpression('TreeItem', 'frame', [veImpression('Expand')]),
]),
]),
]),
veImpression('Pane', 'manifest', [
]),
]);
}
test/e2e/helpers/changes-helpers.ts
+11 -1
View File
@@ -3,9 +3,10 @@
// found in the LICENSE file.
import {$$, getBrowserAndPages, goToResource, waitFor, waitForFunction} from '../../shared/helper.js';
import {openCommandMenu} from '../helpers/quick_open-helpers.js';
import {veImpression} from './visual-logging-helpers.js';
const PANEL_ROOT_SELECTOR = 'div[aria-label="Changes panel"]';
export async function openChangesPanelAndNavigateTo(testName: string) {
@@ -37,3 +38,12 @@ export async function waitForNewChanges(initialChanges: string[]) {
return newChanges.length !== initialChanges.length;
});
}
export function veImpressionForChangesPanel() {
return veImpression('Panel', 'changes', [
veImpression('Pane', 'sidebar'),
veImpression('Section', 'empty-view'),
veImpression(
'Toolbar', undefined, [veImpression('Action', 'changes.copy'), veImpression('Action', 'changes.revert')]),
]);
}
test/e2e/helpers/console-helpers.ts
+20
View File
@@ -19,6 +19,8 @@ import {
waitForFunction,
} from '../../shared/helper.js';
import {veImpression} from './visual-logging-helpers.js';
export const CONSOLE_TAB_SELECTOR = '#tab-console';
export const CONSOLE_MESSAGES_SELECTOR = '.console-group-messages';
export const CONSOLE_MESSAGES_TEXT_SELECTOR = '.source-code .console-message-text';
@@ -342,3 +344,21 @@ export async function checkCommandStacktrace(
await typeIntoConsoleAndWaitForResult(getBrowserAndPages().frontend, command, leastMessages);
await unifyLogVM(await getLastConsoleStacktrace(offset), expected);
}
export function veImpressionForConsolePanel() {
return veImpression('Panel', 'console', [
veImpression(
'Toolbar', undefined,
[
veImpression('ToggleSubpane', 'console-sidebar'),
veImpression('Action', 'console.clear'),
veImpression('DropDown', 'javascript-context'),
veImpression('Action', 'console.create-pin'),
veImpression('DropDown', 'log-level'),
veImpression('Counter', 'issues'),
veImpression('ToggleSubpane', 'console-settings'),
veImpression('TextField'),
]),
veImpression('TextField', 'console-prompt'),
]);
}
test/e2e/helpers/cross-tool-helper.ts
+42 -6
View File
@@ -3,8 +3,18 @@
// found in the LICENSE file.
import {type DevToolsFrontendReloadOptions} from '../../conductor/frontend_tab.js';
import {getBrowserAndPages} from '../../conductor/puppeteer-state.js';
import {click, reloadDevTools as baseReloadDevTools, waitFor} from '../../shared/helper.js';
import {veImpressionForAnimationsPanel} from './animations-helpers.js';
import {veImpressionForApplicationPanel} from './application-helpers.js';
import {veImpressionForChangesPanel} from './changes-helpers.js';
import {veImpressionForConsolePanel} from './console-helpers.js';
import {veImpressionForLayersPanel} from './layers-helpers.js';
import {veImpressionForNetworkPanel} from './network-helpers.js';
import {veImpressionForPerformancePanel} from './performance-helpers.js';
import {veImpressionForSecurityPanel} from './security-helpers.js';
import {veImpressionForSourcesPanel} from './sources-helpers.js';
import {
expectVeImpressions,
veImpression,
@@ -43,26 +53,52 @@ export const checkIfTabExistsInDrawer = async (tabId: string) => {
return Boolean(tab);
};
/**
* Reloads DevTools and checks for VE impressions
*/
export async function reloadDevTools(options?: DevToolsFrontendReloadOptions&{expectClosedPanels?: string[]}) {
export async function reloadDevTools(
options?: DevToolsFrontendReloadOptions&
{expectClosedPanels?: string[], enableExperiments?: string[], disableExperiments?: string[]}) {
const {frontend} = getBrowserAndPages();
const enableExperiments = options?.enableExperiments || [];
const disableExperiments = options?.disableExperiments || [];
if (enableExperiments.length || disableExperiments.length) {
await frontend.evaluate(`(async () => {
const Root = await import('./core/root/root.js');
for (const experiment of ${JSON.stringify(enableExperiments)}) {
Root.Runtime.experiments.setEnabled(experiment, true);
}
for (const experiment of ${JSON.stringify(disableExperiments)}) {
Root.Runtime.experiments.setEnabled(experiment, false);
}
})()`);
}
await baseReloadDevTools(options);
const selectedPanel = options?.selectedPanel?.name || options?.queryParams?.panel || 'elements';
await waitFor(`.panel.${selectedPanel}`);
const expectClosedPanels = options?.expectClosedPanels;
const newFilterBar = enableExperiments.includes('network-panel-filter-bar-redesign');
const dockable = options?.canDock;
const panelImpression =
selectedPanel === 'elements' ? veImpressionForElementsPanel({dockable}) : veImpression('Panel', selectedPanel);
const panelImpression = selectedPanel === 'elements' ? veImpressionForElementsPanel({dockable}) :
selectedPanel === 'animations' ? veImpressionForAnimationsPanel() :
selectedPanel === 'security' ? veImpressionForSecurityPanel() :
selectedPanel === 'layers' ? veImpressionForLayersPanel() :
selectedPanel === 'network' ? veImpressionForNetworkPanel({newFilterBar}) :
selectedPanel === 'console' ? veImpressionForConsolePanel() :
selectedPanel === 'timeline' ? veImpressionForPerformancePanel() :
selectedPanel === 'sources' ? veImpressionForSourcesPanel() :
selectedPanel === 'animations' ? veImpressionForSourcesPanel() :
selectedPanel === 'changes' ? veImpressionForChangesPanel() :
selectedPanel === 'resources' ? veImpressionForApplicationPanel() :
veImpression('Panel', selectedPanel);
const expectedVeEvents = [veImpressionForMainToolbar({selectedPanel, expectClosedPanels, dockable}), panelImpression];
if (options?.drawerShown) {
expectedVeEvents.push(veImpression('Drawer', undefined, [
veImpression(
'Toolbar', 'drawer',
[
veImpression('DropDown', 'more-tabs'),
veImpression('PanelTabHeader', 'console'),
veImpression('Close'),
]),
veImpressionForConsolePanel(),
]));
}
await expectVeImpressions(expectedVeEvents.flat());
test/e2e/helpers/layers-helpers.ts
+30
View File
@@ -4,6 +4,8 @@
import {waitFor} from '../../shared/helper.js';
import {veImpression} from './visual-logging-helpers.js';
export const LAYERS_TAB_SELECTOR = '#tab-layers';
export async function getCurrentUrl() {
@@ -11,3 +13,31 @@ export async function getCurrentUrl() {
const element = await waitFor('[aria-label="layers"]');
return element.evaluate(e => e.getAttribute('test-current-url'));
}
export function veImpressionForLayersPanel() {
return veImpression('Panel', 'layers', [
veImpression('Pane', 'sidebar'),
veImpression(
'Pane', 'layers-3d-view',
[
veImpression(
'Dialog', 'panel-deprecated',
[
veImpression('Action', 'Sendfeedback'),
veImpression('Close'),
]),
veImpression(
'Toolbar', undefined,
[
veImpression('Toggle', 'layers.3d-pan'),
veImpression('Toggle', 'layers.3d-rotate'),
veImpression('Action', 'layers.3d-center'),
veImpression('Toggle', 'frame-viewer-show-paints'),
veImpression('Toggle', 'frame-viewer-show-slow-scroll-rects'),
]),
veImpression('Canvas', 'layers'),
]),
veImpression('Pane', 'layers-details', [veImpression('Section', 'empty-view')]),
veImpression('PanelTabHeader', 'details'),
]);
}
test/e2e/helpers/network-helpers.ts
+63
View File
@@ -15,6 +15,8 @@ import {
waitForFunction,
} from '../../shared/helper.js';
import {veImpression} from './visual-logging-helpers.js';
const REQUEST_LIST_SELECTOR = '.network-log-grid tbody';
export async function waitForNetworkTab(): Promise<void> {
@@ -157,3 +159,64 @@ export async function elementContainsTextWithSelector(
}, selector);
return selectedElements.includes(textContent);
}
export function veImpressionForNetworkPanel(options?: {newFilterBar?: boolean}) {
const filterBar = options?.newFilterBar ?
[
veImpression('DropDown', 'request-types'),
veImpression('DropDown', 'more-filters'),
veImpression('Toggle', 'invert-filter'),
veImpression('TextField'),
] :
[
veImpression('TextField'),
veImpression('Toggle', 'invert-filter'),
veImpression('Toggle', 'hide-data-urls'),
veImpression('Toggle', 'hide-extension-urls'),
veImpression(
'Section', 'filter-bitset',
[
veImpression('Item', 'all'),
veImpression('Item', 'FetchandXHR'),
veImpression('Item', 'Document'),
veImpression('Item', 'CSS'),
veImpression('Item', 'JavaScript'),
veImpression('Item', 'Font'),
veImpression('Item', 'Image'),
veImpression('Item', 'Media'),
veImpression('Item', 'Manifest'),
veImpression('Item', 'WebSocket'),
veImpression('Item', 'WebAssembly'),
veImpression('Item', 'Other'),
]),
veImpression('Toggle', 'only-show-blocked-cookies'),
veImpression('Toggle', 'only-show-blocked-requests'),
veImpression('Toggle', 'only-show-third-party'),
];
return veImpression('Panel', 'network', [
veImpression('Toolbar', 'filter-bar', filterBar),
veImpression(
'Toolbar', 'network-main',
[
veImpression('Toggle', 'network.toggle-recording'),
veImpression('Action', 'network.clear'),
veImpression('Toggle', 'filter'),
veImpression('Toggle', 'search'),
veImpression('Action', 'network-conditions'),
veImpression('Action', 'import-har'),
veImpression('Action', 'export-har'),
veImpression('Toggle', 'network-log.preserve-log'),
veImpression('Toggle', 'cache-disabled'),
veImpression('DropDown', 'preferred-network-condition'),
]),
veImpression('Pane', 'network-overview'),
veImpression('Toggle', 'network-settings'),
veImpression('Link', 'learn-more'),
veImpression('TableHeader', 'name'),
veImpression('TableHeader', 'status'),
veImpression('TableHeader', 'type'),
veImpression('TableHeader', 'initiator'),
veImpression('TableHeader', 'size'),
veImpression('TableHeader', 'time'),
]);
}
test/e2e/helpers/performance-helpers.ts
+22
View File
@@ -17,6 +17,8 @@ import {
waitForMany,
} from '../../shared/helper.js';
import {veImpression} from './visual-logging-helpers.js';
export const FILTER_TEXTBOX_SELECTOR = '[aria-label="Filter"]';
export const RECORD_BUTTON_SELECTOR = '[aria-label="Record"]';
export const RELOAD_AND_RECORD_BUTTON_SELECTOR = '[aria-label="Record and reload"]';
@@ -206,3 +208,23 @@ export async function disableCSSSelectorStats() {
return true;
}));
}
export function veImpressionForPerformancePanel() {
return veImpression('Panel', 'timeline', [
veImpression(
'Toolbar', undefined,
[
veImpression('Toggle', 'timeline.toggle-recording'),
veImpression('Action', 'timeline.record-reload'),
veImpression('Action', 'timeline.load-from-file'),
veImpression('Action', 'timeline.save-to-file'),
veImpression('Action', 'components.collect-garbage'),
veImpression('Toggle', 'timeline-show-screenshots'),
veImpression('Toggle', 'timeline-show-memory'),
]),
// veImpression('Pane', 'timeline-settings-pane', {optional: true}),
veImpression('Link', 'learn-more'),
veImpression('Toggle', 'timeline.toggle-recording'),
veImpression('Action', 'timeline.record-reload'),
]);
}
test/e2e/helpers/security-helpers.ts
+17
View File
@@ -6,6 +6,7 @@ import {click, closePanelTab, getBrowserAndPages, typeText, waitFor, waitForNone
import {openCommandMenu} from './quick_open-helpers.js';
import {openPanelViaMoreTools} from './settings-helpers.js';
import {veImpression} from './visual-logging-helpers.js';
const SECURITY_PANEL_CONTENT = '.view-container[aria-label="Security panel"]';
const SECURITY_TAB_SELECTOR = '#tab-security';
@@ -47,3 +48,19 @@ export async function openSecurityPanelFromCommandMenu() {
await securityTabExists();
await securityPanelContentIsLoaded();
}
export function veImpressionForSecurityPanel() {
return veImpression('Panel', 'security', [
veImpression(
'Pane', 'sidebar',
[
veImpression(
'Tree', undefined,
[
veImpression('TreeItem'),
veImpression('TreeItem', undefined, [veImpression('TreeItem'), veImpression('Expand')]),
]),
]),
veImpression('Pane', 'security.main-view'),
]);
}
test/e2e/helpers/sources-helpers.ts
+77
View File
@@ -35,6 +35,7 @@ import {
import {openSoftContextMenuAndClickOnItem} from './context-menu-helpers.js';
import {reloadDevTools} from './cross-tool-helper.js';
import {veImpression} from './visual-logging-helpers.js';
export const ACTIVE_LINE = '.CodeMirror-activeline > pre > span';
export const PAUSE_BUTTON = '[aria-label="Pause script execution"]';
@@ -868,3 +869,79 @@ export async function isPrettyPrinted(): Promise<boolean> {
const isPretty = await prettyButton.evaluate(e => e.ariaPressed);
return isPretty === 'true';
}
export function veImpressionForSourcesPanel() {
return veImpression('Panel', 'sources', [
veImpression(
'Toolbar', 'debug',
[
veImpression('Toggle', 'debugger.toggle-pause'),
veImpression('Action', 'debugger.step-over'),
veImpression('Action', 'debugger.step-into'),
veImpression('Action', 'debugger.step-out'),
veImpression('Action', 'debugger.step'),
veImpression('Toggle', 'debugger.toggle-breakpoints-active'),
]),
veImpression(
'Pane', 'debug',
[
veImpression('SectionHeader', 'sources.watch'),
veImpression('SectionHeader', 'sources.js-breakpoints'),
veImpression('SectionHeader', 'sources.scope-chain'),
veImpression('SectionHeader', 'sources.callstack'),
veImpression('SectionHeader', 'sources.xhr-breakpoints'),
veImpression('SectionHeader', 'sources.dom-breakpoints'),
veImpression('SectionHeader', 'sources.global-listeners'),
veImpression('SectionHeader', 'sources.event-listener-breakpoints'),
veImpression('SectionHeader', 'sources.csp-violation-breakpoints'),
veImpression('Section', 'sources.scope-chain'),
veImpression('Section', 'sources.callstack'),
veImpression(
'Section', 'sources.js-breakpoints',
[
veImpression('Toggle', 'pause-uncaught'),
veImpression('Toggle', 'pause-on-caught-exception'),
]),
]),
veImpression(
'Pane', 'editor',
[
veImpression('Toolbar', 'bottom'),
veImpression(
'Toolbar', 'top',
[
veImpression('ToggleSubpane', 'navigator'),
veImpression('ToggleSubpane', 'debugger'),
]),
]),
veImpression(
'Toolbar', 'navigator',
[
veImpression('DropDown', 'more-tabs'),
veImpression('PanelTabHeader', 'navigator-network'),
veImpression('PanelTabHeader', 'navigator-files'),
veImpression('DropDown', 'more-options'),
]),
veImpression(
'Pane', 'navigator-network',
[
veImpression(
'Tree', undefined,
[
veImpression(
'TreeItem', 'frame',
[
veImpression('Expand'),
veImpression(
'TreeItem', 'domain',
[
veImpression('Expand'),
veImpression('TreeItem', 'document', [
veImpression('Value', 'title'),
]),
]),
]),
]),
]),
]);
}
test/e2e/helpers/visual-logging-helpers.ts
-2
View File
@@ -151,7 +151,6 @@ export function veImpressionForDrawerToolbar(options?: {
}
export async function expectVeImpressions(expectedImpressions: string[]) {
const startTime = performance.now();
const {frontend} = getBrowserAndPages();
const actualEvents =
// @ts-ignore
@@ -164,7 +163,6 @@ export async function expectVeImpressions(expectedImpressions: string[]) {
}
const {match, description} = compareVeImpressions(actualImpressions, expectedImpressions);
console.error('expectVeImpressions took', performance.now() - startTime);
assert.isTrue(
match,
description + '\nAll VE Events:\n' +
test/e2e/network/network-filter_test.ts
+2 -3
View File
@@ -9,7 +9,6 @@ import {
$textContent,
clickElement,
disableExperiment,
enableExperiment,
getTestServerPort,
step,
typeText,
@@ -330,7 +329,7 @@ describe('The Network Tab', function() {
this.timeout(5000);
beforeEach(async () => {
await enableExperiment('network-panel-filter-bar-redesign');
await reloadDevTools({enableExperiments: ['network-panel-filter-bar-redesign']});
await navigateToNetworkTab('empty.html');
await setCacheDisabled(true);
@@ -379,7 +378,7 @@ describe('The Network Tab', function() {
await categoryXHRFilter.click();
await reloadDevTools({selectedPanel: {name: 'network'}});
await reloadDevTools({selectedPanel: {name: 'network'}, enableExperiments: ['network-panel-filter-bar-redesign']});
const filterText = await getTextFilterContent();
assert.strictEqual(filterText, 'foo');