// Copyright 2021 The Chromium Authors // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import {assert} from 'chai'; import type * as puppeteer from 'puppeteer-core'; import {expectError} from '../../conductor/events.js'; import { CONSOLE_TAB_SELECTOR, focusConsolePrompt, } from '../helpers/console-helpers.js'; import { clickInfobarButton, getAllRequestNames, getTextFromHeadersRow, navigateToNetworkTab, selectRequestByName, waitForSomeRequestsToAppear, } from '../helpers/network-helpers.js'; import type {DevToolsPage} from '../shared/frontend-helper.js'; import type {InspectedPage} from '../shared/target-helper.js'; const SIMPLE_PAGE_REQUEST_NUMBER = 2; const SIMPLE_PAGE_URL = `requests.html?num=${SIMPLE_PAGE_REQUEST_NUMBER}`; const configureAndCheckHeaderOverrides = async (devToolsPage: DevToolsPage, inspectedPage: InspectedPage) => { await clickInfobarButton(devToolsPage); let networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('#tab-headers-component', { root: networkView, }); await devToolsPage.waitFor('#tab-headers-component.tabbed-pane-header-tab[aria-selected=true]', networkView); let responseHeaderSection = await devToolsPage.waitFor('[aria-label="Response headers"]', networkView); let row = await devToolsPage.waitFor('.row', responseHeaderSection); assert.deepEqual(await getTextFromHeadersRow(row, devToolsPage), [ 'cache-control', 'max-age=3600', ]); await devToolsPage.waitForFunction(async () => { await devToolsPage.click('.header-name', {root: row}); await devToolsPage.click('.header-value', {root: row}); await devToolsPage.pasteText('Foo'); return (await getTextFromHeadersRow(row, devToolsPage))[1] === 'Foo'; }); await devToolsPage.click('[title="Reveal header override definitions"]'); const headersView = await devToolsPage.waitFor('devtools-sources-headers-view'); const headersViewRow = await devToolsPage.waitFor('.row.padded', headersView); assert.deepEqual(await getTextFromHeadersRow(headersViewRow, devToolsPage), [ 'cache-control', 'Foo', ]); await navigateToNetworkTab('hello.html', devToolsPage, inspectedPage); await selectRequestByName('hello.html', {}, devToolsPage); networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('#tab-headers-component', { root: networkView, }); responseHeaderSection = await devToolsPage.waitFor('[aria-label="Response headers"]'); row = await devToolsPage.waitFor('.row.header-overridden', responseHeaderSection); assert.deepEqual(await getTextFromHeadersRow(row, devToolsPage), ['cache-control', 'Foo']); }; describe('The Network Request view', () => { it('re-opens the same tab after switching to another panel and navigating back to the "Network" tab (https://crbug.com/1184578)', async ({ devToolsPage, inspectedPage, }) => { await navigateToNetworkTab(SIMPLE_PAGE_URL, devToolsPage, inspectedPage); await waitForSomeRequestsToAppear(SIMPLE_PAGE_REQUEST_NUMBER + 1, devToolsPage); await selectRequestByName('image.svg?id=0', {}, devToolsPage); let networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.clickMoreTabsButton(networkView); await devToolsPage.click('[aria-label=Timing]'); await devToolsPage.waitFor('[aria-label=Timing].tabbed-pane-header-tab[aria-selected=true]', networkView); await devToolsPage.click(CONSOLE_TAB_SELECTOR); await focusConsolePrompt(devToolsPage); await devToolsPage.click('#tab-network'); await devToolsPage.waitFor('.network-log-grid'); networkView = await devToolsPage.waitFor('.network-item-view'); const selectedTabHeader = await devToolsPage.waitFor('.tabbed-pane-header-tab[aria-selected=true]', networkView); const selectedTabText = await selectedTabHeader.evaluate(element => element.textContent || ''); assert.strictEqual(selectedTabText, 'Timing'); }); it('prevents requests on the preview tab.', async ({ devToolsPage, inspectedPage, }) => { await navigateToNetworkTab('embedded_requests.html', devToolsPage, inspectedPage); // For the issue to manifest it's mandatory to load the stylesheet by absolute URL. A relative URL would be treated // relative to the data URL in the preview iframe and thus not work. We need to generate the URL because the // resources path is dynamic, but we can't have any scripts in the resource page since they would be disabled in the // preview. Therefore, the resource page contains just an iframe and we're filling it dynamically with content here. const stylesheet = `${inspectedPage.getResourcesPath()}/network/style.css`; const contents = `

Content

`; await inspectedPage.waitForFunction(async () => (await inspectedPage.page.$('iframe')) ?? undefined); const dataUrl = `data:text/html,${contents}`; await inspectedPage.evaluate((dataUrl: string) => { (document.querySelector('iframe') as HTMLIFrameElement).src = dataUrl; }, dataUrl); await waitForSomeRequestsToAppear(3, devToolsPage); const names = await getAllRequestNames(devToolsPage); const name = names.find(v => v?.startsWith('data:')); assert.isOk(name); await selectRequestByName(name, {}, devToolsPage); // This stylesheets violates the iframe csp as well as the devtools csp const styleSrcErrors = [ expectError(`Loading the stylesheet '${stylesheet}' violates`), expectError(`Loading the stylesheet '${stylesheet}' violates`) ]; const networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('[aria-label=Preview].tabbed-pane-header-tab', { root: networkView, }); await devToolsPage.waitFor('[aria-label=Preview].tabbed-pane-header-tab[aria-selected=true]', networkView); const frame = await devToolsPage.waitFor('.html-preview-frame'); const content = await devToolsPage.waitForFunction(async () => (await frame.contentFrame()) ?? undefined); const p = await devToolsPage.waitForFunction(async () => (await content.$('p')) ?? undefined); const color = await p.evaluate(e => getComputedStyle(e).color); assert.deepEqual(color, 'rgb(0, 0, 0)'); await devToolsPage.waitForFunction(async () => !styleSrcErrors.some(e => !e.caught)); }); it('permits inline styles on the preview tab.', async ({devToolsPage, inspectedPage}) => { await navigateToNetworkTab('embedded_requests.html', devToolsPage, inspectedPage); const contents = '

Content

'; await devToolsPage.waitForFunction(async () => (await inspectedPage.page.$('iframe')) ?? undefined); const dataUrl = `data:text/html,${contents}`; await inspectedPage.evaluate((dataUrl: string) => { (document.querySelector('iframe') as HTMLIFrameElement).src = dataUrl; }, dataUrl); await waitForSomeRequestsToAppear(2, devToolsPage); const name = await devToolsPage.waitForFunction(async () => { const names = await getAllRequestNames(devToolsPage); const name = names.find(v => v?.startsWith('data:')); return name; }); await selectRequestByName(name, {}, devToolsPage); const networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('[aria-label=Preview].tabbed-pane-header-tab', { root: networkView, }); await devToolsPage.waitFor('[aria-label=Preview].tabbed-pane-header-tab[aria-selected=true]', networkView); const frame = await devToolsPage.waitFor('.html-preview-frame'); const content = await devToolsPage.waitForFunction(async () => (await frame.contentFrame()) ?? undefined); const p = await devToolsPage.waitForFunction(async () => (await content.$('p')) ?? undefined); const color = await p.evaluate(e => getComputedStyle(e).color); assert.deepEqual(color, 'rgb(255, 0, 0)'); }); const navigateToEventStreamMessages = async (devToolsPage: DevToolsPage, inspectedPage: InspectedPage) => { await navigateToNetworkTab('eventstream.html', devToolsPage, inspectedPage); await waitForSomeRequestsToAppear(2, devToolsPage); await selectRequestByName('event-stream.rawresponse', {}, devToolsPage); const networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('[aria-label=EventStream].tabbed-pane-header-tab', { root: networkView, }); await devToolsPage.waitFor('[aria-label=EventStream].tabbed-pane-header-tab[aria-selected=true]', networkView); return await devToolsPage.waitFor('.event-source-messages-view'); }; interface EventSourceMessageRaw { id: string|undefined; type: string|undefined; data: string|undefined; time?: string; } const waitForMessages = async ( messagesView: puppeteer.ElementHandle, count: number, devToolsPage: DevToolsPage, ) => { return await devToolsPage.waitForFunction(async () => { const messages = await devToolsPage.$$('.data-grid-data-grid-node', messagesView); if (messages.length !== count) { return undefined; } return await Promise.all(messages.map(message => { return new Promise(async resolve => { const [id, type, data] = await Promise.all([ devToolsPage.getTextContent('.id-column', message), devToolsPage.getTextContent('.type-column', message), devToolsPage.getTextContent('.data-column', message), ]); resolve({ id, type, data, }); }); })); }); }; const knownMessages: EventSourceMessageRaw[] = [ {id: '1', type: 'custom-one', data: '{"one": "value-one"}'}, {id: '2', type: 'message', data: '{"two": "value-two"}'}, {id: '3', type: 'message', data: '{"three": "value-three"}'}, ]; const assertMessage = (actualMessage: EventSourceMessageRaw, expectedMessage: EventSourceMessageRaw) => { assert.deepEqual(actualMessage.id, expectedMessage.id); assert.deepEqual(actualMessage.type, expectedMessage.type); assert.deepEqual(actualMessage.data, expectedMessage.data); }; const assertBaseState = async ( messagesView: puppeteer.ElementHandle, devToolsPage: DevToolsPage, ) => { const messages = await waitForMessages(messagesView, 3, devToolsPage); assertMessage(messages[0], knownMessages[0]); assertMessage(messages[1], knownMessages[1]); assertMessage(messages[2], knownMessages[2]); }; it('stores EventSource filter', async ({devToolsPage, inspectedPage}) => { const messagesView = await navigateToEventStreamMessages(devToolsPage, inspectedPage); let messages = await waitForMessages(messagesView, 3, devToolsPage); await assertBaseState(messagesView, devToolsPage); const inputSelector = '[aria-placeholder="Filter using regex (example: https?)'; const filterInput = await devToolsPage.waitFor(inputSelector, messagesView); // "one" await filterInput.focus(); await devToolsPage.typeText('one'); messages = await waitForMessages(messagesView, 1, devToolsPage); assertMessage(messages[0], knownMessages[0]); // clear await devToolsPage.click('[title="Clear"]', { root: messagesView, }); await assertBaseState(messagesView, devToolsPage); // "two" await filterInput.focus(); await devToolsPage.typeText('two'); messages = await waitForMessages(messagesView, 1, devToolsPage); assertMessage(messages[0], knownMessages[1]); // invalid regex await filterInput.focus(); await devToolsPage.typeText('invalid('); messages = await waitForMessages(messagesView, 0, devToolsPage); }); it('handles EventSource clear', async ({devToolsPage, inspectedPage}) => { const messagesView = await navigateToEventStreamMessages(devToolsPage, inspectedPage); await assertBaseState(messagesView, devToolsPage); await devToolsPage.click('[aria-label="Clear all"]', { root: messagesView, }); await waitForMessages(messagesView, 0, devToolsPage); }); it('stores websocket filter', async ({devToolsPage, inspectedPage}) => { const navigateToWebsocketMessages = async (devToolsPage: DevToolsPage, inspectedPage: InspectedPage) => { await navigateToNetworkTab('websocket.html', devToolsPage, inspectedPage); await waitForSomeRequestsToAppear(2, devToolsPage); await selectRequestByName('localhost', {}, devToolsPage); const networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('[aria-label=Messages].tabbed-pane-header-tab', { root: networkView, }); await devToolsPage.waitFor('[aria-label=Messages].tabbed-pane-header-tab[aria-selected=true]', networkView); return await devToolsPage.waitFor('.resource-chunk-view'); }; let messagesView = await navigateToWebsocketMessages(devToolsPage, inspectedPage); const waitForMessages = async (count: number, devToolsPage: DevToolsPage) => { return await devToolsPage.waitForFunction(async () => { const messages = await devToolsPage.$$('.data-column.resource-chunk-view-td', messagesView); if (messages.length !== count) { return undefined; } return await Promise.all(messages.map(message => { return message.evaluate(message => message.textContent || ''); })); }); }; let messages = await waitForMessages(4, devToolsPage); const filterInput = await devToolsPage.waitFor( '[aria-label="Filter using regex (example: (web)?socket)"][role=textbox]', messagesView); await filterInput.focus(); await devToolsPage.typeText('p[ai]ng'); messages = await waitForMessages(2, devToolsPage); assert.deepEqual(messages, ['ping', 'ping']); messagesView = await navigateToWebsocketMessages(devToolsPage, inspectedPage); messages = await waitForMessages(2, devToolsPage); assert.deepEqual(messages, ['ping', 'ping']); }); function assertOutlineMatches(expectedPatterns: string[], outline: string[]) { const regexpSpecialChars = /[-\/\\^$*+?.()|[\]{}]/g; for (const item of outline) { const expectedPattern = expectedPatterns.shift(); if (expectedPattern) { assert.match(item, new RegExp(expectedPattern.replace(regexpSpecialChars, '\\$&').replace(/%/g, '.*'))); } else { assert.fail('Unexpected text: ' + item); } } } it('shows request headers and payload', async ({devToolsPage, inspectedPage}) => { await navigateToNetworkTab('headers-and-payload.html', devToolsPage, inspectedPage); await waitForSomeRequestsToAppear(2, devToolsPage); await selectRequestByName('image.svg?id=42¶m=a%20b', {}, devToolsPage); const networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('[aria-label=Headers].tabbed-pane-header-tab', { root: networkView, }); await devToolsPage.waitFor('[aria-label=Headers].tabbed-pane-header-tab[aria-selected=true]', networkView); const expectedHeadersContent = [ { aria: 'General', rows: [ 'Request URL', 'https://localhost:%/test/e2e/resources/network/image.svg?id=42¶m=a%20b', 'Request Method', 'POST', 'Status Code', '200 OK', 'Remote Address', '[::1]:%', 'Referrer Policy', 'strict-origin-when-cross-origin', ], }, { aria: 'Response headers', rows: [ 'cache-control', 'max-age=%', 'connection', 'keep-alive', 'content-type', 'image/svg+xml; charset=utf-8', 'date', '%', 'keep-alive', 'timeout=5', 'transfer-encoding', 'chunked', 'vary', 'Origin', ], }, { aria: 'Request Headers', rows: [ 'accept', '*/*', 'accept-encoding', '%', 'accept-language', '%', 'connection', 'keep-alive', 'content-length', '32', 'content-type', 'application/x-www-form-urlencoded;charset=UTF-8', 'host', 'localhost:%', 'origin', 'https://localhost:%', 'referer', 'https://localhost:%/test/e2e/resources/network/headers-and-payload.html', 'sec-ch-ua', '%', 'sec-ch-ua-mobile', '?0', 'sec-ch-ua-platform', '%', 'sec-fetch-dest', 'empty', 'sec-fetch-mode', 'cors', 'sec-fetch-site', 'same-origin', 'user-agent', 'Mozilla/5.0 %', 'x-same-domain', '1', ], }, ]; for (const sectionContent of expectedHeadersContent) { const section = await devToolsPage.waitFor(`[aria-label="${sectionContent.aria}"]`); const rows = await devToolsPage.$$('.row', section); const rowsText = await (await Promise.all(rows.map(async row => await getTextFromHeadersRow(row, devToolsPage)))).flat(); assertOutlineMatches(sectionContent.rows, rowsText); } await devToolsPage.click('[aria-label=Payload].tabbed-pane-header-tab', { root: networkView, }); await devToolsPage.waitFor('[aria-label=Payload].tabbed-pane-header-tab[aria-selected=true]', networkView); const payloadView = await devToolsPage.waitFor('.request-payload-view'); const payloadOutline = await devToolsPage.$$('ol:not(.hidden) > [role=treeitem]:not(.hidden)', payloadView); const payloadOutlineText = await Promise.all(payloadOutline.map(async item => await item.evaluate(el => el.textContent || ''))); const expectedPayloadContent = [ 'Query String Parameters (2)View sourceView URL-encoded', ['id42', 'parama b'], 'Form Data (4)View sourceView URL-encoded', ['fooalpha', 'barbeta:42:0', 'baz', '(empty)'], ].flat(); assertOutlineMatches(expectedPayloadContent, payloadOutlineText); // Context menu to copy single parsed entry. const parsedEntry = await devToolsPage.waitForElementWithTextContent('alpha'); await parsedEntry.click({button: 'right'}); await (await devToolsPage.waitForElementWithTextContent('Copy value')).click(); assert.strictEqual(await devToolsPage.readClipboard(), 'alpha'); // Context menu to copy the raw payload. const viewSource = await devToolsPage.waitForElementWithTextContent('View source'); await viewSource.click(); const source = await devToolsPage.waitForElementWithTextContent('id=42¶m=a%20b'); await source.click({button: 'right'}); await (await devToolsPage.waitForElementWithTextContent('Copy')).click(); assert.strictEqual(await devToolsPage.readClipboard(), 'id=42¶m=a%20b'); }); it('shows raw headers', async ({devToolsPage, inspectedPage}) => { await navigateToNetworkTab('headers-and-payload.html', devToolsPage, inspectedPage); await waitForSomeRequestsToAppear(2, devToolsPage); await selectRequestByName('image.svg?id=42¶m=a%20b', {}, devToolsPage); const networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('[aria-label=Headers].tabbed-pane-header-tab', { root: networkView, }); await devToolsPage.waitFor('[aria-label=Headers].tabbed-pane-header-tab[aria-selected=true]', networkView); const section = await devToolsPage.waitFor('[aria-label="Response headers"]'); await devToolsPage.click('input', { root: section, }); const expectedRawHeadersContent = [ 'HTTP/1.1 200 OK', 'Content-Type: image/svg+xml; charset=utf-8', 'Cache-Control: max-age=%', 'Vary: Origin', 'Date: %', 'Connection: keep-alive', 'Keep-Alive: timeout=5', 'Transfer-Encoding: chunked', ].join('\r\n'); const rawHeaders = await devToolsPage.waitFor('.raw-headers', section); const rawHeadersText = await rawHeaders.evaluate(el => el.textContent || ''); assertOutlineMatches([expectedRawHeadersContent], [rawHeadersText]); const expectedHeadersContent = [ { aria: 'General', rows: [ 'Request URL', 'https://localhost:%/test/e2e/resources/network/image.svg?id=42¶m=a%20b', 'Request Method', 'POST', 'Status Code', '200 OK', 'Remote Address', '[::1]:%', 'Referrer Policy', 'strict-origin-when-cross-origin', ], }, { aria: 'Request Headers', rows: [ 'accept', '*/*', 'accept-encoding', '%', 'accept-language', '%', 'connection', 'keep-alive', 'content-length', '32', 'content-type', 'application/x-www-form-urlencoded;charset=UTF-8', 'host', 'localhost:%', 'origin', 'https://localhost:%', 'referer', 'https://localhost:%/test/e2e/resources/network/headers-and-payload.html', 'sec-ch-ua', '%', 'sec-ch-ua-mobile', '?0', 'sec-ch-ua-platform', '%', 'sec-fetch-dest', 'empty', 'sec-fetch-mode', 'cors', 'sec-fetch-site', 'same-origin', 'user-agent', 'Mozilla/5.0 %', 'x-same-domain', '1', ], }, ]; for (const sectionContent of expectedHeadersContent) { const section = await devToolsPage.waitFor(`[aria-label="${sectionContent.aria}"]`); const rows = await devToolsPage.$$('.row', section); const rowsText = await (await Promise.all(rows.map(async row => await getTextFromHeadersRow(row, devToolsPage)))).flat(); assertOutlineMatches(sectionContent.rows, rowsText); } }); it('payload tab selection is preserved', async ({devToolsPage, inspectedPage}) => { await navigateToNetworkTab('headers-and-payload.html', devToolsPage, inspectedPage); await waitForSomeRequestsToAppear(3, devToolsPage); await selectRequestByName('image.svg?id=42¶m=a%20b', {}, devToolsPage); const networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('[aria-label=Payload].tabbed-pane-header-tab', { root: networkView, }); await devToolsPage.waitFor('[aria-label=Payload].tabbed-pane-header-tab[aria-selected=true]', networkView); await selectRequestByName('image.svg', {}, devToolsPage); await devToolsPage.waitForElementWithTextContent('foogamma'); }); it('no duplicate payload tab on headers update', async ({devToolsPage, inspectedPage}) => { await navigateToNetworkTab('requests.html', devToolsPage, inspectedPage); void inspectedPage.evaluate(() => fetch('image.svg?delay')); await waitForSomeRequestsToAppear(2, devToolsPage); await selectRequestByName('image.svg?delay', {}, devToolsPage); await inspectedPage.evaluate(async () => await fetch('/?send_delayed')); }); it('can create header overrides via request\'s context menu', async ({devToolsPage, inspectedPage}) => { await devToolsPage.setupOverridesFSMocks(); await devToolsPage.useSoftMenu(); await navigateToNetworkTab('hello.html', devToolsPage, inspectedPage); await selectRequestByName('hello.html', {button: 'right'}, devToolsPage); await devToolsPage.click('aria/Override headers'); await configureAndCheckHeaderOverrides(devToolsPage, inspectedPage); }); it('can create header overrides via header\'s pencil icon', async ({devToolsPage, inspectedPage}) => { await devToolsPage.setupOverridesFSMocks(); await navigateToNetworkTab('hello.html', devToolsPage, inspectedPage); await selectRequestByName('hello.html', {}, devToolsPage); const networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('#tab-headers-component', { root: networkView, }); await devToolsPage.click('devtools-button.enable-editing'); await configureAndCheckHeaderOverrides(devToolsPage, inspectedPage); }); it('can search by headers name', async ({devToolsPage, inspectedPage}) => { await navigateToNetworkTab('headers-and-payload.html', devToolsPage, inspectedPage); await waitForSomeRequestsToAppear(2, devToolsPage); await selectRequestByName('image.svg?id=42¶m=a%20b', {}, devToolsPage); const SEARCH_QUERY = '[aria-label="Find"]'; const SEARCH_RESULT = '.search-result'; await devToolsPage.pressKey('f', {control: true}); await devToolsPage.waitFor(SEARCH_QUERY); const inputElement = await devToolsPage.$(SEARCH_QUERY); assert.isOk(inputElement, 'Unable to find search input field'); await inputElement.focus(); await inputElement.type('Cache-Control'); await devToolsPage.page.keyboard.press('Enter'); await devToolsPage.waitFor(SEARCH_RESULT); }); describe('preview', () => { async function searchInPreview(devToolsPage: DevToolsPage, query: string, totalMatches: number) { const SEARCH_QUERY = '.search-replace.search'; await devToolsPage.summonSearchBox(); const inputElement = await devToolsPage.waitFor(SEARCH_QUERY); assert.isOk(inputElement, 'Unable to find search input field'); await inputElement.focus(); await inputElement.click({clickCount: 3}); // Select all text. await inputElement.type(query); await devToolsPage.waitForFunction(async () => { const searchStatusText = await devToolsPage.getTextContent('.search-results-matches'); if (totalMatches > 0 && searchStatusText) { return searchStatusText.endsWith(`of ${totalMatches}`); } return !searchStatusText; }); } async function setupPreviewTest( devToolsPage: DevToolsPage, inspectedPage: InspectedPage, url: string, resourceName?: string) { await navigateToNetworkTab('hello.html', devToolsPage, inspectedPage); await inspectedPage.evaluate(url => fetch(url), url); await waitForSomeRequestsToAppear(3, devToolsPage); if (!resourceName) { resourceName = url.length > 20 ? url.substring(0, 19) + '…' : url; } await selectRequestByName(resourceName, {}, devToolsPage); const networkView = await devToolsPage.waitFor('.network-item-view'); await devToolsPage.click('[aria-label=Preview].tabbed-pane-header-tab', { root: networkView, }); await devToolsPage.waitFor('[aria-label=Preview].tabbed-pane-header-tab[aria-selected=true]', networkView); // Wait for the preview to load. await devToolsPage.click( '.json-view, .shadow-xml-view, devtools-text-editor, .html-preview-frame', {clickOptions: {offset: {x: 10, y: 10}}}); } it('can be searched for JSON content', async ({devToolsPage, inspectedPage}) => { const url = 'data:application/json,%5B533%2C3223%5D'; await setupPreviewTest(devToolsPage, inspectedPage, url); await searchInPreview(devToolsPage, '533', 1); await searchInPreview(devToolsPage, '322', 1); }); it('can be searched for JSON content with special mime type', async ({devToolsPage, inspectedPage}) => { const url = 'data:application/vnd.document+json,%7B%22foo0foo%22%3A%20123%7D'; await setupPreviewTest(devToolsPage, inspectedPage, url); await searchInPreview(devToolsPage, 'foo', 1); }); it('can be searched for XML content', async ({devToolsPage, inspectedPage}) => { const url = 'data:text/xml,%3Cbar%3E%3Cfoo%2F%3Etest%3C%2Fbar%3E'; await setupPreviewTest(devToolsPage, inspectedPage, url); await searchInPreview(devToolsPage, 'bar', 2); await searchInPreview(devToolsPage, 'foo', 1); await searchInPreview(devToolsPage, 'test', 1); }); it('can be searched for XML content with comments', async ({devToolsPage, inspectedPage}) => { const url = 'data:text/xml,%3Cbar%3E%3C!--%20FOO%20--%3E%3C%2Fbar%3E'; await setupPreviewTest(devToolsPage, inspectedPage, url); await searchInPreview(devToolsPage, 'FOO', 1); await searchInPreview(devToolsPage, 'bar', 2); }); it('can be searched for XML content with CDATA', async ({devToolsPage, inspectedPage}) => { const url = 'data:text/xml,%3Ca%3E%3C!%5BCDATA%5BGGG%5D%5D%3E%3Cg%20tee%3D%22gee%22%3Etee%3C%2Fg%3E%3C%2Fa%3E'; await setupPreviewTest(devToolsPage, inspectedPage, url); await searchInPreview(devToolsPage, 'GGG', 1); await searchInPreview(devToolsPage, 'tee', 2); await searchInPreview(devToolsPage, 'CDATA', 1); }); it('can be searched for JSON content with XML mime type', async ({devToolsPage, inspectedPage}) => { const url = 'data:text/xml,%7B%22foo0%22%3A%20%22barr%22%2C%20%22barr%22%3A%20%22fooo%22%7D'; await setupPreviewTest(devToolsPage, inspectedPage, url); await searchInPreview(devToolsPage, 'fooo', 1); await searchInPreview(devToolsPage, 'bar', 2); }); }); });