diff --git a/test/e2e/application/service-worker-network_test.ts b/test/e2e/application/service-worker-network_test.ts index 4e334fa03d..8f6ab7ec15 100644 --- a/test/e2e/application/service-worker-network_test.ts +++ b/test/e2e/application/service-worker-network_test.ts @@ -5,15 +5,14 @@ import {unregisterAllServiceWorkers} from '../../conductor/hooks.js'; import {click, getBrowserAndPages, step} from '../../shared/helper.js'; import {beforeEach, describe, it} from '../../shared/mocha-extensions.js'; import { - doubleClickSourceTreeItem, navigateToApplicationTab, + navigateToServiceWorkers, unregisterServiceWorker, } from '../helpers/application-helpers.js'; import {tabExistsInDrawer, tabExistsInMainPanel} from '../helpers/cross-tool-helper.js'; import {closeDrawer} from '../helpers/quick_open-helpers.js'; const NETWORK_TAB_SELECTOR = '#tab-network'; -const SERVICE_WORKER_ROW_SELECTOR = '[aria-label="Service workers"]'; const TEST_HTML_FILE = 'service-worker-network'; const SERVICE_WORKER_NETWORK_SELECTOR = '[title="Network requests"]'; @@ -21,7 +20,7 @@ describe('The Application Tab', () => { beforeEach(async () => { const {target} = getBrowserAndPages(); await navigateToApplicationTab(target, TEST_HTML_FILE); - await doubleClickSourceTreeItem(SERVICE_WORKER_ROW_SELECTOR); + await navigateToServiceWorkers(); }); afterEach(async () => { diff --git a/test/e2e/application/storage_test.ts b/test/e2e/application/storage_test.ts index d50992b5dd..84b7591e13 100644 --- a/test/e2e/application/storage_test.ts +++ b/test/e2e/application/storage_test.ts @@ -7,15 +7,14 @@ import {assert} from 'chai'; import {click, getBrowserAndPages, waitForFunction} from '../../shared/helper.js'; import {describe, it} from '../../shared/mocha-extensions.js'; import { - doubleClickSourceTreeItem, getPieChartLegendRows, getQuotaUsage, navigateToApplicationTab, + navigateToStorage, waitForQuotaUsage, } from '../helpers/application-helpers.js'; // The parent suffix makes sure we wait for the Cookies item to have children before trying to click it. -const STORAGE_SELECTOR = '[aria-label="Storage"]'; const CLEAR_SITE_DATA_BUTTON_SELECTOR = '#storage-view-clear-button'; describe('The Application Tab', () => { @@ -25,7 +24,7 @@ describe('The Application Tab', () => { beforeEach(async () => { const {target} = getBrowserAndPages(); await navigateToApplicationTab(target, 'storage-quota'); - await doubleClickSourceTreeItem(STORAGE_SELECTOR); + await navigateToStorage(); }); it('which clears storage correctly using the clear button', async () => { diff --git a/test/e2e/helpers/application-helpers.ts b/test/e2e/helpers/application-helpers.ts index 185601a5fa..396997013e 100644 --- a/test/e2e/helpers/application-helpers.ts +++ b/test/e2e/helpers/application-helpers.ts @@ -32,10 +32,15 @@ export async function navigateToApplicationTab(_target: puppeteer.Page, testName export async function navigateToServiceWorkers() { const SERVICE_WORKER_ROW_SELECTOR = '[aria-label="Service workers"]'; await click(SERVICE_WORKER_ROW_SELECTOR); + await waitFor('.service-worker-list'); + await expectVeEvents([ + veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: application > TreeItem: service-workers'), + veImpressionsUnder('Panel: resources', [veImpressionForServiceWorkersView()]), + ]); } export async function navigateToFrame(name: string) { - await doubleClickSourceTreeItem(`[aria-label="${name}"]`); + await doubleClickTreeItem(`[aria-label="${name}"]`); await waitFor('[title="Click to reveal in Sources panel"]'); await expectVeEvents([ veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: frames > TreeItem: frame'), @@ -50,8 +55,18 @@ export async function navigateToManifestInApplicationTab(testName: string) { await click(MANIFEST_SELECTOR); } +export async function navigateToStorage() { + const STORAGE_SELECTOR = '[aria-label="Storage"]'; + await click(STORAGE_SELECTOR); + await waitFor('.clear-storage-button'); + await expectVeEvents([ + veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: application > TreeItem: storage'), + veImpressionsUnder('Panel: resources', [veImpressionForStorageOverview()]), + ]); +} + export async function navigateToOpenedWindows() { - await doubleClickSourceTreeItem('[aria-label="Opened Windows"]'); + await doubleClickTreeItem('[aria-label="Opened Windows"]'); await waitFor('.empty-view'); await expectVeEvents([ veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: frames > TreeItem: frame > TreeItem: opened-windows'), @@ -65,7 +80,7 @@ export async function navigateToWebWorkers() { await expectVeEvents([veImpressionsUnder( 'Panel: resources > Pane: sidebar > Tree > TreeItem: frames > TreeItem: frame', [veImpression('TreeItem', 'web-workers')])]); - await doubleClickSourceTreeItem(WEB_WORKERS_SELECTOR); + await doubleClickTreeItem(WEB_WORKERS_SELECTOR); await waitFor(`${WEB_WORKERS_SELECTOR} + ol li:first-child`); await waitFor('.empty-view'); await expectVeEvents([ @@ -79,7 +94,7 @@ export async function navigateToFrameServiceWorkers(frameName: string) { await navigateToFrame(frameName); const SERVICE_WORKERS_SELECTOR = `[aria-label="${frameName}"] ~ ol [aria-label="Service workers"]`; - await doubleClickSourceTreeItem(SERVICE_WORKERS_SELECTOR); + await doubleClickTreeItem(SERVICE_WORKERS_SELECTOR); await waitFor(`${SERVICE_WORKERS_SELECTOR} + ol li:first-child`); await waitFor('.empty-view'); await expectVeEvents([ @@ -93,8 +108,8 @@ export async function navigateToCookiesForTopDomain() { // The parent suffix makes sure we wait for the Cookies item to have children before trying to click it. const COOKIES_SELECTOR = '[aria-label="Cookies"].parent'; const DOMAIN_SELECTOR = `${COOKIES_SELECTOR} + ol > [aria-label="https://localhost:${getTestServerPort()}"]`; - await doubleClickSourceTreeItem(COOKIES_SELECTOR); - await doubleClickSourceTreeItem(DOMAIN_SELECTOR); + await doubleClickTreeItem(COOKIES_SELECTOR); + await doubleClickTreeItem(DOMAIN_SELECTOR); await expectVeEvents([ veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: cookies'), @@ -116,8 +131,8 @@ export async function navigateToCookiesForTopDomain() { export async function navigateToSessionStorageForTopDomain() { const SESSION_STORAGE_SELECTOR = '[aria-label="Session storage"].parent'; const DOMAIN_SELECTOR = `${SESSION_STORAGE_SELECTOR} + ol > [aria-label="https://localhost:${getTestServerPort()}"]`; - await doubleClickSourceTreeItem(SESSION_STORAGE_SELECTOR); - await doubleClickSourceTreeItem(DOMAIN_SELECTOR); + await doubleClickTreeItem(SESSION_STORAGE_SELECTOR); + await doubleClickTreeItem(DOMAIN_SELECTOR); await expectVeEvents([ veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: session-storage'), @@ -139,9 +154,9 @@ export async function navigateToSessionStorageForTopDomain() { const SHARED_STORAGE_SELECTOR = '[aria-label="Shared storage"].parent'; export async function navigateToSharedStorage() { - await doubleClickSourceTreeItem(SHARED_STORAGE_SELECTOR); + await doubleClickTreeItem(SHARED_STORAGE_SELECTOR); await waitFor('devtools-shared-storage-access-grid'); - await new Promise(resolve => setTimeout(resolve, 1000)); + // await new Promise(resolve => setTimeout(resolve, 1000)); await expectVeEvents([ veClick('Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: shared-storage'), veImpressionsUnder( @@ -152,8 +167,8 @@ export async function navigateToSharedStorage() { export async function navigateToSharedStorageForTopDomain() { await navigateToSharedStorage(); const DOMAIN_SELECTOR = `${SHARED_STORAGE_SELECTOR} + ol > [aria-label="https://localhost:${getTestServerPort()}"]`; - await doubleClickSourceTreeItem(DOMAIN_SELECTOR); - await new Promise(resolve => setTimeout(resolve, 1000)); + await doubleClickTreeItem(DOMAIN_SELECTOR); + // await new Promise(resolve => setTimeout(resolve, 1000)); await expectVeEvents([ veClick( 'Panel: resources > Pane: sidebar > Tree > TreeItem: storage > TreeItem: shared-storage > TreeItem: shared-storage-instance'), @@ -161,7 +176,7 @@ export async function navigateToSharedStorageForTopDomain() { ]); } -export async function doubleClickSourceTreeItem(selector: string) { +async function doubleClickTreeItem(selector: string) { const element = await waitFor(selector); element.evaluate(el => el.scrollIntoView(true)); await click(selector, {clickOptions: {clickCount: 2}}); @@ -314,6 +329,7 @@ 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', [ @@ -424,3 +440,55 @@ function veImpressionForSharedStorageView() { veImpression('Pane', 'preview', [veImpression('Section', 'json-view')]), ]); } + +function veImpressionForServiceWorkersView() { + return veImpression('Pane', 'service-workers', [ + veImpression('Section', 'other-origin', [veImpression('Link', 'view-all')]), + veImpression( + 'Section', 'this-origin', + [ + veImpression('Action', 'periodic-sync-tag'), + veImpression('Action', 'push-message'), + veImpression('Action', 'show-network-requests'), + veImpression('Action', 'sync-tag'), + veImpression('Action', 'unregister'), + veImpression('Action', 'update'), + veImpression('Link', 'source-location'), + veImpression('TextField', 'periodic-sync-tag'), + veImpression('TextField', 'push-message'), + veImpression('TextField', 'sync-tag'), + veImpression('Toggle', 'bypass-service-worker'), + veImpression('Toggle', 'disconnect-from-network'), + veImpression('Toggle', 'service-worker-update-on-reload'), + veImpression('Tree', 'update-timing-table'), + ]), + ]); +} + +function veImpressionForStorageOverview() { + return veImpression('Pane', 'clear-storage', [ + veImpression('Action', 'storage.clear-site-data'), + veImpression('Section', 'application', [veImpression('Toggle', 'clear-storage-service-workers')]), + veImpression( + 'Section', 'storage', + [ + veImpression('Toggle', 'clear-storage-cache-storage'), + veImpression('Toggle', 'clear-storage-cookies'), + veImpression('Toggle', 'clear-storage-indexeddb'), + veImpression('Toggle', 'clear-storage-local-storage'), + veImpression('Toggle', 'clear-storage-websql'), + ]), + veImpression( + 'Section', 'usage', + [ + veImpression('Link', 'learn-more'), + veImpression( + 'PieChart', undefined, + [ + veImpression('Section', 'legend', [veImpression('PieChartTotal', 'select-total')]), + ]), + veImpression('Toggle', 'simulate-custom-quota'), + ]), + veImpression('Toggle', 'clear-storage-include-third-party-cookies'), + ]); +} diff --git a/test/e2e/helpers/visual-logging-helpers.ts b/test/e2e/helpers/visual-logging-helpers.ts index e788fac652..2118d58d95 100644 --- a/test/e2e/helpers/visual-logging-helpers.ts +++ b/test/e2e/helpers/visual-logging-helpers.ts @@ -5,6 +5,7 @@ import {assert} from 'chai'; import {getBrowserAndPages} from '../../conductor/puppeteer-state.js'; +import {renderCoordinatorQueueEmpty} from '../../shared/helper.js'; // Corresponds to the type in front_end/ui/visual_logging/Debugging.ts type TestImpressionLogEntry = { @@ -191,6 +192,7 @@ export async function expectVeEvents(expectedEvents: TestLogEntry[]) { collapseConsecutiveImpressions(expectedEvents); const {frontend} = getBrowserAndPages(); + await renderCoordinatorQueueEmpty(); const actualEvents = // @ts-ignore await frontend.evaluate(async () => (await globalThis.getVeDebugEventsLog()) as unknown as TestLogEntry[]);