Install and setup playwright, successfully run example test (#701)

* introduce playwright with running example test

* cleanup eslint

.gitignore

@@ -50,3 +50,8 @@ client/.eslintcache
 # E2E Testing
 ignoreE2E*
 .test_*
+test-results/
+html-reports/
+playwright-report/
+blob-report/
+playwright/.cache/

client/__tests__/common/constants.ts

@@ -0,0 +1,27 @@
+type TestEnv =
+  | "local"
+  | "localProd"
+  | "staging"
+  | "prod"
+  | "rdev"
+  | "happy"
+  | "dev";
+
+export const TEST_ENV: TestEnv = (process.env.TEST_ENV as TestEnv) || "local";
+
+const TEST_ENV_TO_TEST_URL = {
+  dev: "https://cellxgene.dev.single-cell.czi.technology",
+  happy: "https://frontend.corporanet.local:3000",
+  local: "https://localhost:3000",
+  localProd: "http://localhost:9000",
+  prod: "https://cellxgene.cziscience.com",
+  rdev: process.env.RDEV_LINK || "",
+  staging: "https://cellxgene.staging.single-cell.czi.technology",
+};
+
+export const TEST_URL = TEST_ENV_TO_TEST_URL[TEST_ENV];
+
+export const BLUEPRINT_SAFE_TYPE_OPTIONS = { delay: 50 };
+
+export const ERROR_NO_TEST_ID_OR_LOCATOR =
+  "Either testId or locator must be defined";

client/__tests__/common/playwrightContext.ts

@@ -0,0 +1,34 @@
+// This file is imported and used in the config file `playwright.config.ts`.
+import { Config } from "@playwright/test";
+
+const isHeadful =
+  process.env.HEADFUL === "true" || process.env.HEADLESS === "false";
+
+if (isHeadful) {
+  console.log("Running tests in headful mode");
+}
+
+/**
+ * (thuang): Keep the video size small to avoid test timing out from processing
+ * large video files.
+ */
+const VIEWPORT = {
+  height: 960,
+  width: 1280,
+};
+
+export const COMMON_PLAYWRIGHT_CONTEXT: Config["use"] = {
+  acceptDownloads: true,
+  /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+  actionTimeout: 0,
+  headless: !isHeadful,
+  ignoreHTTPSErrors: true,
+  screenshot: "only-on-failure",
+  /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+  trace: "retain-on-failure",
+  video: {
+    mode: "retain-on-failure",
+    size: VIEWPORT,
+  },
+  viewport: VIEWPORT,
+};

client/__tests__/e2e/playwright.global.setup.ts

@@ -0,0 +1,45 @@
+import { chromium, test } from "@playwright/test";
+
+import { DATASET_METADATA_RESPONSE } from "../__mocks__/apiMock";
+
+test.beforeAll(async () => {
+  const browser = await chromium.launch();
+  const context = await browser.newContext();
+
+  await context.route("*/dataset-metadata", (route, request) => {
+    const { referer } = request.headers();
+
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(DATASET_METADATA_RESPONSE),
+      // (thuang): Add headers so FE@localhost:3000 can access API@localhost:5000
+      headers: {
+        "Access-Control-Allow-Origin": referer.slice(0, referer.length - 1),
+        "Access-Cqontrol-Allow-Credentials": "true",
+      },
+    });
+  });
+  await context.route("*/config", async (route, request) => {
+    const { referer } = request.headers();
+    const body = await (await fetch(request.url())).json();
+    route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        config: {
+          ...body.config,
+          links: {
+            ...body.config.links,
+            "collections-home-page":
+              "https://cellxgene.cziscience.com/dummy-collection",
+          },
+        },
+      }),
+      headers: {
+        "Access-Control-Allow-Origin": referer.slice(0, referer.length - 1),
+        "Access-Control-Allow-Credentials": "true",
+      },
+    });
+  });
+});

client/__tests__/example.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Click the get started link.
+  await page.getByRole('link', { name: 'Get started' }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+});