Web console: Log out any request errors in e2e tests for better CI de…

…bugging (#15483)

web-console/e2e-tests/auto-compaction.spec.ts

@@ -55,7 +55,7 @@ describe('Auto-compaction', () => {
   });
 
   it('Compacts segments from dynamic to hash partitions', async () => {
-    const testName = 'autocompaction-dynamic-to-hash-';
+    const testName = 'autocompaction-dynamic-to-hash';
     const datasourceName = testName + new Date().toISOString();
     loadInitialData(datasourceName);
 

web-console/e2e-tests/reindexing.spec.ts

@@ -60,7 +60,7 @@ describe('Reindexing from Druid', () => {
   });
 
   it('Reindex datasource from dynamic to range partitions', async () => {
-    const testName = 'reindex-dynamic-to-range-';
+    const testName = 'reindex-dynamic-to-range';
     const datasourceName = testName + new Date().toISOString();
     const interval = '2015-09-12/2015-09-13';
     const dataConnector = new ReindexDataConnector(page, {

web-console/e2e-tests/tutorial-batch.spec.ts

@@ -56,7 +56,7 @@ describe('Tutorial: Loading a file', () => {
   });
 
   it('Loads data from local disk', async () => {
-    const testName = 'load-data-from-local-disk-';
+    const testName = 'load-data-from-local-disk';
     const datasourceName = testName + ALL_SORTS_OF_CHARS + new Date().toISOString();
     const dataLoader = new DataLoader({
       page: page,

web-console/e2e-tests/util/playwright.ts

@@ -19,8 +19,8 @@
 import * as playwright from 'playwright-chromium';
 
 const TRUE = 'true';
-const WIDTH = 1920;
-const HEIGHT = 1080;
+const WIDTH = 1250;
+const HEIGHT = 760;
 const PADDING = 128;
 
 export async function createBrowser(): Promise<playwright.Browser> {
@@ -40,6 +40,25 @@ export async function createPage(browser: playwright.Browser): Promise<playwrigh
   const context = await browser.newContext();
   const page = await context.newPage();
   await page.setViewportSize({ width: WIDTH, height: HEIGHT });
+
+  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  page.on('response', async response => {
+    if (response.status() < 400) return;
+
+    const request = response.request();
+    let bodyText: string;
+    try {
+      bodyText = await response.text();
+    } catch (e) {
+      bodyText = `Could not get the body of the error message due to: ${e.message}`;
+    }
+
+    console.log(`==============================================`);
+    console.log(`Request failed on ${request.url()} (with status ${response.status()})`);
+    console.log(`Body: ${bodyText}`);
+    console.log(`==============================================`);
+  });
+
   return page;
 }