apache · vogievetsky · Oct 3, 2020 · Sep 29, 2020
diff --git a/web-console/README.md b/web-console/README.md
@@ -23,7 +23,7 @@ This is the unified Druid web console that servers as a data management layer fo
 
 ## How to watch and run for development
 
-1. You need to be withing the `web-console` directory
+1. You need to be within the `web-console` directory
 2. Install the modules with `npm install`
 3. Run `npm start` will start in development mode and will proxy druid requests to `localhost:8888`
 
@@ -82,26 +82,24 @@ From the web-console directory:
 3. Run end-to-end tests: `npm run test-e2e`
 4. Stop druid cluster: `script/druid stop`
 
+If you already have a druid cluster running on the standard ports, the steps to build/start/stop a druid cluster can
+be skipped.
+
 ### Debugging
 
 #### Screenshots
 
 `e2e-tests/util/debug.ts:saveScreenshotIfError()` is used to save a screenshot of the web console
-when the test fails. For example, if `e2e-tests/tutotrial-batch.spec.ts` fails, it will create
+when the test fails. For example, if `e2e-tests/tutorial-batch.spec.ts` fails, it will create
 `load-data-from-local-disk-error-screenshot.png`.
 
 #### Disabling Headless Mode
 
-Disabling headless mode while running the tests can be helpful. One way of doing this is by using
-`e2e-tests/util/playwright:createBrowserDebug()`. For example, the test can be modified to change
-
-```
-import { createBrowserNormal as createBrowser } from './util/playwright'
-```
+Disabling headless mode while running the tests can be helpful. This can be done via the `DRUID_E2E_TEST_HEADLESS`
+environment variable, which defaults to `true`.
 
-to
-
-```
-import { createBrowserDebug as createBrowser } from './util/playwright'`
-```
+#### Running Against Alternate Web Console
 
+The environment variable `DRUID_E2E_TEST_UNIFIED_CONSOLE_PORT` can be used to target a web console running on a
+non-default port (i.e., not port `8888`). For example, this environment variable can be used to target the
+development mode of the web console (started via `npm start`), which runs on port `18081`.
diff --git a/web-console/e2e-tests/auto-compaction.spec.ts b/web-console/e2e-tests/auto-compaction.spec.ts
@@ -18,7 +18,7 @@
 
 import axios from 'axios';
 import path from 'path';
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { CompactionConfig } from './component/datasources/compaction';
 import { Datasource } from './component/datasources/datasource';
@@ -29,7 +29,7 @@ import { COORDINATOR_URL } from './util/druid';
 import { DRUID_EXAMPLES_QUICKSTART_TUTORIAL_DIR } from './util/druid';
 import { UNIFIED_CONSOLE_URL } from './util/druid';
 import { runIndexTask } from './util/druid';
-import { createBrowserNormal as createBrowser } from './util/playwright';
+import { createBrowser } from './util/playwright';
 import { createPage } from './util/playwright';
 import { retryIfJestAssertionError } from './util/retry';
 import { waitTillWebConsoleReady } from './util/setup';

diff --git a/web-console/e2e-tests/component/datasources/overview.ts b/web-console/e2e-tests/component/datasources/overview.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { clickButton } from '../../util/playwright';
 import { getLabeledInput } from '../../util/playwright';
@@ -61,7 +61,7 @@ export class DatasourcesOverview {
 
   async getDatasources(): Promise<Datasource[]> {
     await this.page.goto(this.baseUrl);
-    await this.page.reload({ waitUntil: 'networkidle0' });
+    await this.page.reload({ waitUntil: 'networkidle' });
 
     const data = await extractTable(this.page, 'div div.rt-tr-group', 'div.rt-td');
 
@@ -116,6 +116,6 @@ export class DatasourcesOverview {
 
     const editActions = await this.page.$$('span[icon=wrench]');
     editActions[index].click();
-    await this.page.waitFor('ul.bp3-menu');
+    await this.page.waitForSelector('ul.bp3-menu');
   }
 }
diff --git a/web-console/e2e-tests/component/ingestion/overview.ts b/web-console/e2e-tests/component/ingestion/overview.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { extractTable } from '../../util/table';
 
@@ -50,7 +50,7 @@ export class IngestionOverview {
 
   async getTasks(): Promise<IngestionTask[]> {
     await this.page.goto(this.baseUrl);
-    await this.page.reload({ waitUntil: 'networkidle0' });
+    await this.page.reload({ waitUntil: 'networkidle' });
 
     const data = await extractTable(this.page, 'div.bottom-pane div.rt-tr-group', 'div.rt-td');
 

diff --git a/web-console/e2e-tests/component/load-data/config/partition.ts b/web-console/e2e-tests/component/load-data/config/partition.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { selectSuggestibleInput } from '../../../util/playwright';
 import { getLabeledInput } from '../../../util/playwright';

diff --git a/web-console/e2e-tests/component/load-data/data-connector/data-connector.ts b/web-console/e2e-tests/component/load-data/data-connector/data-connector.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { clickButton } from '../../../util/playwright';
 

diff --git a/web-console/e2e-tests/component/load-data/data-connector/local-file.ts b/web-console/e2e-tests/component/load-data/data-connector/local-file.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { setLabeledInput } from '../../../util/playwright';
 

diff --git a/web-console/e2e-tests/component/load-data/data-connector/reindex.ts b/web-console/e2e-tests/component/load-data/data-connector/reindex.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { setLabeledInput } from '../../../util/playwright';
 

diff --git a/web-console/e2e-tests/component/load-data/data-loader.ts b/web-console/e2e-tests/component/load-data/data-loader.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { clickButton } from '../../util/playwright';
 import { clickLabeledButton } from '../../util/playwright';
@@ -60,7 +60,8 @@ export class DataLoader {
   }
 
   private async start() {
-    await this.page.click(`"${this.connector.name}"`);
+    const cardSelector = `//*[contains(@class,"bp3-card")][p[contains(text(),"${this.connector.name}")]]`;
+    await this.page.click(cardSelector);
     await clickButton(this.page, 'Connect data');
   }
 
@@ -73,53 +74,54 @@ export class DataLoader {
 
   private async validateConnect(validator: (preview: string) => void) {
     const previewSelector = '.raw-lines';
-    await this.page.waitFor(previewSelector);
+    await this.page.waitForSelector(previewSelector);
     const preview = await this.page.$eval(previewSelector, el => (el as HTMLTextAreaElement).value);
     validator(preview!);
   }
 
   private async parseData() {
-    await this.page.waitFor('.parse-data-table');
+    await this.page.waitForSelector('.parse-data-table');
     await clickButton(this.page, 'Next: Parse time');
   }
 
   private async parseTime() {
-    await this.page.waitFor('.parse-time-table');
+    await this.page.waitForSelector('.parse-time-table');
     await clickButton(this.page, 'Next: Transform');
   }
 
   private async transform() {
-    await this.page.waitFor('.transform-table');
+    await this.page.waitForSelector('.transform-table');
     await clickButton(this.page, 'Next: Filter');
   }
 
   private async filter() {
-    await this.page.waitFor('.filter-table');
+    await this.page.waitForSelector('.filter-table');
     await clickButton(this.page, 'Next: Configure schema');
   }
 
   private async configureSchema(configureSchemaConfig: ConfigureSchemaConfig) {
-    await this.page.waitFor('.schema-table');
+    await this.page.waitForSelector('.schema-table');
     await this.applyConfigureSchemaConfig(configureSchemaConfig);
     await clickButton(this.page, 'Next: Partition');
   }
 
   private async applyConfigureSchemaConfig(configureSchemaConfig: ConfigureSchemaConfig) {
-    const rollup = await this.page.$('//*[text()="Rollup"]/input');
-    const rollupChecked = await rollup!.evaluate(el => (el as HTMLInputElement).checked);
+    const rollupSelector = '//*[text()="Rollup"]';
+    const rollupInput = await this.page.$(`${rollupSelector}/input`);
+    const rollupChecked = await rollupInput!.evaluate(el => (el as HTMLInputElement).checked);
     if (rollupChecked !== configureSchemaConfig.rollup) {
-      await rollup!.click();
+      await this.page.click(rollupSelector);
       const confirmationDialogSelector = '//*[contains(@class,"bp3-alert-body")]';
-      await this.page.waitFor(confirmationDialogSelector);
+      await this.page.waitForSelector(confirmationDialogSelector);
       await clickButton(this.page, 'Yes');
       const statusMessageSelector = '.recipe-toaster';
-      await this.page.waitFor(statusMessageSelector);
+      await this.page.waitForSelector(statusMessageSelector);
       await this.page.click(`${statusMessageSelector} button`);
     }
   }
 
   private async partition(partitionConfig: PartitionConfig) {
-    await this.page.waitFor('div.load-data-view.partition');
+    await this.page.waitForSelector('div.load-data-view.partition');
     await this.applyPartitionConfig(partitionConfig);
     await clickButton(this.page, 'Next: Tune');
   }
@@ -140,12 +142,12 @@ export class DataLoader {
   }
 
   private async tune() {
-    await this.page.waitFor('div.load-data-view.tuning');
+    await this.page.waitForSelector('div.load-data-view.tuning');
     await clickButton(this.page, 'Next: Publish');
   }
 
   private async publish(publishConfig: PublishConfig) {
-    await this.page.waitFor('div.load-data-view.publish');
+    await this.page.waitForSelector('div.load-data-view.publish');
     await this.applyPublishConfig(publishConfig);
     await clickButton(this.page, 'Edit spec');
   }
@@ -157,7 +159,7 @@ export class DataLoader {
   }
 
   private async editSpec() {
-    await this.page.waitFor('div.load-data-view.spec');
+    await this.page.waitForSelector('div.load-data-view.spec');
     await clickButton(this.page, 'Submit');
   }
 }

diff --git a/web-console/e2e-tests/component/query/overview.ts b/web-console/e2e-tests/component/query/overview.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { clickButton } from '../../util/playwright';
 import { setInput } from '../../util/playwright';
@@ -36,12 +36,12 @@ export class QueryOverview {
 
   async runQuery(query: string): Promise<string[][]> {
     await this.page.goto(this.baseUrl);
-    await this.page.reload({ waitUntil: 'networkidle0' });
+    await this.page.reload({ waitUntil: 'networkidle' });
 
     const input = await this.page.$('div.query-input textarea');
     await setInput(input!, query);
     await clickButton(this.page, 'Run');
-    await this.page.waitFor('div.query-info');
+    await this.page.waitForSelector('div.query-info');
 
     return await extractTable(this.page, 'div.query-output div.rt-tr-group', 'div.rt-td');
   }

diff --git a/web-console/e2e-tests/reindexing.spec.ts b/web-console/e2e-tests/reindexing.spec.ts
@@ -17,7 +17,7 @@
  */
 
 import path from 'path';
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { DatasourcesOverview } from './component/datasources/overview';
 import { IngestionOverview } from './component/ingestion/overview';
@@ -32,7 +32,7 @@ import { saveScreenshotIfError } from './util/debug';
 import { DRUID_EXAMPLES_QUICKSTART_TUTORIAL_DIR } from './util/druid';
 import { UNIFIED_CONSOLE_URL } from './util/druid';
 import { runIndexTask } from './util/druid';
-import { createBrowserNormal as createBrowser } from './util/playwright';
+import { createBrowser } from './util/playwright';
 import { createPage } from './util/playwright';
 import { retryIfJestAssertionError } from './util/retry';
 import { waitTillWebConsoleReady } from './util/setup';

diff --git a/web-console/e2e-tests/tutorial-batch.spec.ts b/web-console/e2e-tests/tutorial-batch.spec.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 import { DatasourcesOverview } from './component/datasources/overview';
 import { IngestionOverview } from './component/ingestion/overview';
@@ -28,8 +28,9 @@ import { LocalFileDataConnector } from './component/load-data/data-connector/loc
 import { DataLoader } from './component/load-data/data-loader';
 import { QueryOverview } from './component/query/overview';
 import { saveScreenshotIfError } from './util/debug';
+import { DRUID_EXAMPLES_QUICKSTART_TUTORIAL_DIR } from './util/druid';
 import { UNIFIED_CONSOLE_URL } from './util/druid';
-import { createBrowserNormal as createBrowser } from './util/playwright';
+import { createBrowser } from './util/playwright';
 import { createPage } from './util/playwright';
 import { retryIfJestAssertionError } from './util/retry';
 import { waitTillWebConsoleReady } from './util/setup';
@@ -57,7 +58,7 @@ describe('Tutorial: Loading a file', () => {
     const testName = 'load-data-from-local-disk-';
     const datasourceName = testName + new Date().toISOString();
     const dataConnector = new LocalFileDataConnector(page, {
-      baseDirectory: 'quickstart/tutorial/',
+      baseDirectory: DRUID_EXAMPLES_QUICKSTART_TUTORIAL_DIR,
       fileFilter: 'wikiticker-2015-09-12-sampled.json.gz',
     });
     const configureSchemaConfig = new ConfigureSchemaConfig({ rollup: false });

diff --git a/web-console/e2e-tests/util/debug.ts b/web-console/e2e-tests/util/debug.ts
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
 export async function saveScreenshotIfError(
   filenamePrefix: string,

diff --git a/web-console/e2e-tests/util/druid.ts b/web-console/e2e-tests/util/druid.ts
@@ -19,7 +19,8 @@
 import { execSync } from 'child_process';
 import path from 'path';
 
-export const UNIFIED_CONSOLE_URL = 'http://localhost:8888/unified-console.html';
+const UNIFIED_CONSOLE_PORT = process.env['DRUID_E2E_TEST_UNIFIED_CONSOLE_PORT'] || '8888';
+export const UNIFIED_CONSOLE_URL = `http://localhost:${UNIFIED_CONSOLE_PORT}/unified-console.html`;
 export const COORDINATOR_URL = 'http://localhost:8081';
 
 const UTIL_DIR = __dirname;

diff --git a/web-console/e2e-tests/util/playwright.ts b/web-console/e2e-tests/util/playwright.ts
@@ -16,22 +16,16 @@
  * limitations under the License.
  */
 
-import * as playwright from 'playwright-core';
+import * as playwright from 'playwright-chromium';
 
-const DEBUG = true;
+const TRUE = 'true';
 const WIDTH = 1920;
 const HEIGHT = 1080;
 const PADDING = 128;
 
-export async function createBrowserNormal(): Promise<playwright.Browser> {
-  return createBrowserInternal(!DEBUG);
-}
-
-export async function createBrowserDebug(): Promise<playwright.Browser> {
-  return createBrowserInternal(DEBUG);
-}
-
-async function createBrowserInternal(debug: boolean): Promise<playwright.Browser> {
+export async function createBrowser(): Promise<playwright.Browser> {
+  const headless = process.env['DRUID_E2E_TEST_HEADLESS'] || TRUE;
+  const debug = headless !== TRUE;
   const launchOptions: any = {
     args: [`--window-size=${WIDTH},${HEIGHT + PADDING}`],
   };

diff --git a/web-console/e2e-tests/util/setup.ts b/web-console/e2e-tests/util/setup.ts
@@ -17,7 +17,7 @@
  */
 
 import { UNIFIED_CONSOLE_URL } from './druid';
-import { createBrowserNormal as createBrowser } from './playwright';
+import { createBrowser } from './playwright';
 import { createPage } from './playwright';
 
 export async function waitTillWebConsoleReady() {
@@ -26,8 +26,8 @@ export async function waitTillWebConsoleReady() {
   try {
     const page = await createPage(browser);
     await page.goto(UNIFIED_CONSOLE_URL);
-    await page.waitFor('//*[contains(text(),"console will not function at the moment")]', {
-      visibility: 'hidden',
+    await page.waitForSelector('//*[contains(text(),"console will not function at the moment")]', {
+      state: 'hidden',
     });
   } finally {
     await browser.close();