browser_net_cache_details.js (4755B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Test the cache details panel. 7 add_task(async function () { 8 let isCacheReady = false; 9 const httpServer = createTestHTTPServer(); 10 httpServer.registerContentType("html", "text/html"); 11 12 httpServer.registerPathHandler(`/`, function (request, response) { 13 response.setStatusLine(request.httpVersion, 200, "OK"); 14 response.write(` 15 <html>Test page for regular 304 requests</html>`); 16 }); 17 18 httpServer.registerPathHandler(`/cached`, function (request, response) { 19 if (isCacheReady) { 20 response.setStatusLine(request.httpVersion, 304, "Not Modified"); 21 } else { 22 response.setStatusLine(request.httpVersion, 200, "OK"); 23 response.setHeader("Content-Type", "text/plain"); 24 response.setHeader("Cache-Control", "no-cache"); 25 response.write(`cached`); 26 // Flip the isCachedReady flag so that the next call will hit the 304 27 // branch and the browser can reuse the cached response. 28 isCacheReady = true; 29 } 30 }); 31 32 const port = httpServer.identity.primaryPort; 33 const CACHE_TEST_URL = `http://localhost:${port}/`; 34 35 const { monitor } = await initNetMonitor(CACHE_TEST_URL, { 36 enableCache: true, 37 requestCount: 1, 38 }); 39 40 const { document, store, windowRequire } = monitor.panelWin; 41 const Actions = windowRequire("devtools/client/netmonitor/src/actions/index"); 42 43 info("Create a 200 request"); 44 let waitForRequest = waitForNetworkEvents(monitor, 1); 45 await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { 46 content.fetch("/cached"); 47 }); 48 await waitForRequest; 49 50 info("Select the request and wait until the headers panel is displayed"); 51 store.dispatch(Actions.selectRequestByIndex(0)); 52 await waitFor(() => document.querySelector(".headers-overview")); 53 ok( 54 !document.querySelector("#cache-tab"), 55 "No cache panel is available for the 200 request" 56 ); 57 58 info("Create a 304 request"); 59 waitForRequest = waitForNetworkEvents(monitor, 1); 60 await SpecialPowers.spawn(gBrowser.selectedBrowser, [], () => { 61 content.fetch("/cached"); 62 }); 63 await waitForRequest; 64 65 info("Select the request and wait until the headers panel is displayed"); 66 store.dispatch(Actions.selectRequestByIndex(1)); 67 await waitFor(() => document.querySelector(".headers-overview")); 68 ok( 69 document.querySelector("#cache-tab"), 70 "A cache panel is available for the 304 request" 71 ); 72 document.querySelector("#cache-tab").click(); 73 74 info("Wait until the Cache panel content is displayed"); 75 await waitFor(() => !!document.getElementById("/Cache")); 76 77 const device = getCacheDetailsValue(document, "Device"); 78 is(device, "Not Available", "device information is `Not Available`"); 79 80 // We cannot precisely assert the dates rendered by the cache panel because 81 // they are formatted using toLocaleDateString/toLocaleTimeString, and 82 // `new Date` might be unable to parse them. See Bug 1800448. 83 84 // For "last modified" should be the same day as the test, and we could assert 85 // that. However the cache panel is intermittently fully "Not available", 86 // except for the "Expires" field, which seems to always have a value. 87 const lastModified = getCacheDetailsValue(document, "Last Modified"); 88 info("Retrieved lastModified value: " + lastModified); 89 ok(!!lastModified, "Last Modified was found in the cache panel"); 90 91 // For "expires" we will only check that this is not set to `Not Available`. 92 const expires = getCacheDetailsValue(document, "Expires"); 93 info("Retrieved expires value: " + expires); 94 ok( 95 !expires.includes("Not Available"), 96 "Expires is set to a value other than unavailable" 97 ); 98 }); 99 100 /** 101 * Helper to retrieve individual values from the Cache details panel. 102 * Eg, for `Expires: "11/9/2022 6:54:33 PM"`, this should return 103 * "11/9/2022 6:54:33 PM". 104 * 105 * @param {Document} doc 106 * The netmonitor document. 107 * @param {string} cacheItemId 108 * The id of the cache element to retrieve. See netmonitor.cache.* localized 109 * strings. 110 * 111 * @returns {string} 112 * The value corresponding to the provided id. 113 */ 114 function getCacheDetailsValue(doc, cacheItemId) { 115 const container = doc.getElementById("/Cache/" + cacheItemId); 116 ok(!!container, `Found the cache panel container for id ${cacheItemId}`); 117 const valueContainer = container.querySelector(".treeValueCell span"); 118 ok( 119 !!valueContainer, 120 `Found the cache panel value container for id ${cacheItemId}` 121 ); 122 123 // The values have opening and closing quotes, remove them using substring. 124 // `"some value"` -> `some value` 125 const quotedValue = valueContainer.textContent; 126 return quotedValue.substring(1, quotedValue.length - 1); 127 }