devtools/client/netmonitor/test/browser_net_http3_request_details.js

   1 /* Any copyright is dedicated to the Public Domain.
   2    http://creativecommons.org/publicdomain/zero/1.0/ */
   3
   4 "use strict";
   5
   6 /**
   7  * Tests request details with HTTP/3
   8  */
   9
  10 add_task(async function () {
  11   const { monitor } = await initNetMonitor(HTTPS_SIMPLE_SJS, {
  12     requestCount: 1,
  13   });
  14   info("Starting test... ");
  15
  16   const { document, store, windowRequire } = monitor.panelWin;
  17   const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
  18
  19   store.dispatch(Actions.batchEnable(false));
  20
  21   const wait = waitForNetworkEvents(monitor, 1);
  22   await reloadBrowser();
  23   await wait;
  24
  25   const waitForHeaders = waitForDOM(document, ".headers-overview");
  26   store.dispatch(Actions.toggleNetworkDetails());
  27   await waitForHeaders;
  28
  29   info("Assert the content of the headers");
  30
  31   const tabpanel = document.querySelector("#headers-panel");
  32   // Request URL
  33   is(
  34     tabpanel.querySelector(".url-preview .url").innerText,
  35     HTTPS_SIMPLE_SJS,
  36     "The url summary value is incorrect."
  37   );
  38
  39   // Request method
  40   is(
  41     tabpanel.querySelectorAll(".treeLabel")[0].innerText,
  42     "GET",
  43     "The method summary value is incorrect."
  44   );
  45   // Status code
  46   is(
  47     tabpanel.querySelector(".requests-list-status-code").innerText,
  48     "200",
  49     "The status summary code is incorrect."
  50   );
  51   is(
  52     tabpanel.querySelector(".status").childNodes[1].textContent,
  53     "", // HTTP/2 and 3 send no status text, only a code
  54     "The status summary value is incorrect."
  55   );
  56   // Version
  57   is(
  58     tabpanel.querySelectorAll(".tabpanel-summary-value")[1].innerText,
  59     "HTTP/3",
  60     "The HTTP version is incorrect."
  61   );
  62
  63   await waitForRequestData(store, ["requestHeaders", "responseHeaders"]);
  64
  65   is(
  66     tabpanel.querySelectorAll(".accordion-item").length,
  67     2,
  68     "There should be 2 header scopes displayed in this tabpanel."
  69   );
  70
  71   const headers = [...tabpanel.querySelectorAll(".accordion .treeLabelCell")];
  72
  73   is(
  74     // The Text-Encoding header is not consistently displayed, exclude it from
  75     // the assertion. See Bug 1830053.
  76     headers.filter(cell => cell.textContent != "TE").length,
  77     26,
  78     "There should be 26 header values displayed in this tabpanel."
  79   );
  80
  81   const headersTable = tabpanel.querySelector(".accordion");
  82   const responseHeaders = headersTable.querySelectorAll(
  83     "tr[id^='/Response Headers']"
  84   );
  85
  86   const expectedHeaders = [
  87     {
  88       name: "cache-control",
  89       value: "no-cache, no-store, must-revalidate",
  90       index: 0,
  91     },
  92     {
  93       name: "content-length",
  94       value: "12",
  95       index: 1,
  96     },
  97     {
  98       name: "content-type",
  99       value: "text/plain; charset=utf-8",
 100       index: 2,
 101     },
 102     {
 103       name: "foo-bar",
 104       value: "baz",
 105       index: 6,
 106     },
 107   ];
 108   expectedHeaders.forEach(header => {
 109     is(
 110       responseHeaders[header.index].querySelector(".treeLabel").innerHTML,
 111       header.name,
 112       `The response header at index ${header.index} name was incorrect.`
 113     );
 114     is(
 115       responseHeaders[header.index].querySelector(".objectBox").innerHTML,
 116       `${header.value}`,
 117       `The response header at index ${header.index} value was incorrect.`
 118     );
 119   });
 120
 121   info("Assert the content of the raw headers");
 122
 123   // Click the 'Raw headers' toggle to show original headers source.
 124   document.querySelector("#raw-request-checkbox").click();
 125   document.querySelector("#raw-response-checkbox").click();
 126
 127   let rawHeadersElements;
 128   await waitUntil(() => {
 129     rawHeadersElements = document.querySelectorAll("textarea.raw-headers");
 130     // Both raw headers must be present
 131     return rawHeadersElements.length > 1;
 132   });
 133   const requestHeadersText = rawHeadersElements[1].textContent;
 134   const rawRequestHeaderFirstLine = requestHeadersText.split(/\r\n|\n|\r/)[0];
 135   is(
 136     rawRequestHeaderFirstLine,
 137     "GET /browser/devtools/client/netmonitor/test/sjs_simple-test-server.sjs HTTP/3"
 138   );
 139
 140   const responseHeadersText = rawHeadersElements[0].textContent;
 141   const rawResponseHeaderFirstLine = responseHeadersText.split(/\r\n|\n|\r/)[0];
 142   is(rawResponseHeaderFirstLine, "HTTP/3 200 "); // H2/3 send no status text
 143
 144   info("Assert the content of the protocol column");
 145   const target = document.querySelectorAll(".request-list-item")[0];
 146   is(
 147     target.querySelector(".requests-list-protocol").textContent,
 148     "HTTP/3",
 149     "The displayed protocol is correct."
 150   );
 151
 152   return teardown(monitor);
 153 });