Upgrade to electron 12 and Node 14 (#3572)

Upgrade to electron 12 and Node 14 - Compute cluster ID for tests - Switch to temporary appData path while testing Signed-off-by: Sebastian Malton <sebastian@malton.name> Co-authored-by: Sebastian Malton <smalton@mirantis.com> Co-authored-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
2025-05-20 05:10:56 +00:00 · 2021-08-26 12:13:31 -04:00
1 parent e2812a5bcd
commit 59933507e4
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+/*
+  Cluster tests are run if there is a pre-existing minikube cluster. Before running cluster tests the TEST_NAMESPACE
+  namespace is removed, if it exists, from the minikube cluster. Resources are created as part of the cluster tests in the
+  TEST_NAMESPACE namespace. This is done to minimize destructive impact of the cluster tests on an existing minikube
+  cluster and vice versa.
+*/
+import type { Page } from "playwright";
+import * as utils from "../helpers/utils";
+
+describe("preferences page tests", () => {
+  let window: Page, cleanup: () => Promise<void>;
+
+  beforeEach(async () => {
+    ({ window, cleanup } = await utils.start());
+    await utils.clickWelcomeButton(window);
+    await window.keyboard.press("Meta+,");
+  }, 10*60*1000);
+
+  afterEach(async () => {
+    await cleanup();
+  }, 10*60*1000);
+
+  it('shows "preferences" and can navigate through the tabs', async () => {
+    const pages = [
+      {
+        id: "application",
+        header: "Application",
+      },
+      {
+        id: "proxy",
+        header: "Proxy",
+      },
+      {
+        id: "kubernetes",
+        header: "Kubernetes",
+      },
+    ];
+
+    for (const { id, header } of pages) {
+      await window.click(`[data-testid=${id}-tab]`);
+      await window.waitForSelector(`[data-testid=${id}-header] >> text=${header}`);
+    }
+  }, 10*60*1000);
+
+  it("ensures helm repos", async () => {
+    await window.click("[data-testid=kubernetes-tab]");
+    await window.waitForSelector("[data-testid=repository-name]", {
+      timeout: 100_000,
+    });
+    await window.click("#HelmRepoSelect");
+    await window.waitForSelector("div.Select__option");
+  }, 10*60*1000);
+});
@@ -1,87 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-/*
-  Cluster tests are run if there is a pre-existing minikube cluster. Before running cluster tests the TEST_NAMESPACE
-  namespace is removed, if it exists, from the minikube cluster. Resources are created as part of the cluster tests in the
-  TEST_NAMESPACE namespace. This is done to minimize destructive impact of the cluster tests on an existing minikube
-  cluster and vice versa.
-*/
-import type { Application } from "spectron";
-import * as utils from "../helpers/utils";
-import { listHelmRepositories } from "../helpers/utils";
-import { fail } from "assert";
-
-jest.setTimeout(2 * 60 * 1000); // 2 minutes so that we can get better errors from spectron
-
-// FIXME (!): improve / simplify all css-selectors + use [data-test-id="some-id"] (already used in some tests below)
-describe("Lens integration tests", () => {
-  let app: Application;
-
-  describe("app start", () => {
-    utils.beforeAllWrapped(async () => {
-      app = await utils.setup();
-    });
-
-    utils.afterAllWrapped(() => utils.tearDown(app));
-
-    it('shows "add cluster"', async () => {
-      await app.electron.ipcRenderer.send("test-menu-item-click", "File", "Add Cluster");
-      await app.client.waitUntilTextExists("h2", "Add Clusters from Kubeconfig");
-    });
-
-    describe("preferences page", () => {
-      it('shows "preferences"', async () => {
-        const appName: string = process.platform === "darwin" ? "OpenLens" : "File";
-
-        await app.electron.ipcRenderer.send("test-menu-item-click", appName, "Preferences");
-        await app.client.waitUntilTextExists("[data-testid=application-header]", "Application");
-      });
-
-      it.each([
-        ["application", "Application"],
-        ["proxy", "Proxy"],
-        ["kubernetes", "Kubernetes"],
-      ])("Can click the %s tab and see the %s header", async (tab, header) => {
-        await app.client.click(`[data-testid=${tab}-tab]`);
-        await app.client.waitUntilTextExists(`[data-testid=${tab}-header]`, header);
-      });
-
-      it("ensures helm repos", async () => {
-        const repos = await listHelmRepositories();
-
-        if (repos.length === 0) {
-          fail("Lens failed to add any repositories");
-        }
-
-        await app.client.click("[data-testid=kubernetes-tab]");
-        await app.client.waitUntilTextExists("[data-testid=repository-name]", repos[0].name); // wait for the helm-cli to fetch the repo(s)
-        await app.client.click("#HelmRepoSelect"); // click the repo select to activate the drop-down
-        await app.client.waitUntilTextExists("div.Select__option", "");  // wait for at least one option to appear (any text)
-      });
-    });
-
-    it.skip('quits Lens"', async () => {
-      await app.client.keys(["Meta", "Q"]);
-      await app.client.keys("Meta");
-    });
-  });
-});
@@ -25,450 +25,439 @@
  TEST_NAMESPACE namespace. This is done to minimize destructive impact of the cluster tests on an existing minikube
  cluster and vice versa.
 */
-import type { Application } from "spectron";
 import * as utils from "../helpers/utils";
-import { minikubeReady, waitForMinikubeDashboard } from "../helpers/minikube";
-import { exec } from "child_process";
-import * as util from "util";
+import { minikubeReady } from "../helpers/minikube";
+import type { Frame, Page } from "playwright";

-export const promiseExec = util.promisify(exec);
+const TEST_NAMESPACE = "integration-tests";

-jest.setTimeout(2 * 60 * 1000); // 2 minutes so that we can get better errors from spectron
+function getSidebarSelectors(itemId: string) {
+  const root = `.SidebarItem[data-test-id="${itemId}"]`;

-// FIXME (!): improve / simplify all css-selectors + use [data-test-id="some-id"] (already used in some tests below)
-describe("Lens cluster pages", () => {
-  const TEST_NAMESPACE = "integration-tests";
-  const BACKSPACE = "\uE003";
-  let app: Application;
-  const ready = minikubeReady(TEST_NAMESPACE);
+  return {
+    expandSubMenu: `${root} .nav-item`,
+    subMenuLink: (href: string) => `.Sidebar .sub-menu a[href^="/${href}"]`,
+  };
+}

-  utils.describeIf(ready)("test common pages", () => {
-    let clusterAdded = false;
-    const addCluster = async () => {
-      await app.client.waitUntilTextExists("div", "Catalog");
-      await waitForMinikubeDashboard(app);
-      await app.client.click('a[href="/nodes"]');
-      await app.client.waitUntilTextExists("div.TableCell", "Ready");
-    };
+function getLoadedSelector(page: CommonPage): string {
+  if (page.expectedText) {
+    return `${page.expectedSelector} >> text='${page.expectedText}'`;
+  }

-    describe("cluster add", () => {
-      utils.beforeAllWrapped(async () => {
-        app = await utils.setup();
-      });
+  return page.expectedSelector;
+}

-      utils.afterAllWrapped(() => utils.tearDown(app));
+interface CommonPage {
+  name: string;
+  href: string;
+  expectedSelector: string;
+  expectedText?: string;
+}

-      it("allows to add a cluster", async () => {
-        await addCluster();
-        clusterAdded = true;
-      });
-    });
+interface TopPageTest {
+  page: CommonPage;
+}

-    const appStartAddCluster = async () => {
-      if (clusterAdded) {
-        app = await utils.setup();
-        await addCluster();
+interface SubPageTest {
+  drawerId: string;
+  pages: CommonPage[];
+}
+
+type CommonPageTest = TopPageTest | SubPageTest;
+
+function isTopPageTest(test: CommonPageTest): test is TopPageTest {
+  return typeof (test as any).page === "object";
+}
+
+const commonPageTests: CommonPageTest[] = [{
+  page: {
+    name: "Cluster",
+    href: "cluster",
+    expectedSelector: "div.ClusterOverview div.label",
+    expectedText: "CPU"
+  }
+},
+{
+  page: {
+    name: "Nodes",
+    href: "nodes",
+    expectedSelector: "h5.title",
+    expectedText: "Nodes"
+  }
+},
+{
+  drawerId: "workloads",
+  pages: [{
+    name: "Overview",
+    href: "workloads",
+    expectedSelector: "h5.box",
+    expectedText: "Overview"
+  },
+  {
+    name: "Pods",
+    href: "pods",
+    expectedSelector: "h5.title",
+    expectedText: "Pods"
+  },
+  {
+    name: "Deployments",
+    href: "deployments",
+    expectedSelector: "h5.title",
+    expectedText: "Deployments"
+  },
+  {
+    name: "DaemonSets",
+    href: "daemonsets",
+    expectedSelector: "h5.title",
+    expectedText: "Daemon Sets"
+  },
+  {
+    name: "StatefulSets",
+    href: "statefulsets",
+    expectedSelector: "h5.title",
+    expectedText: "Stateful Sets"
+  },
+  {
+    name: "ReplicaSets",
+    href: "replicasets",
+    expectedSelector: "h5.title",
+    expectedText: "Replica Sets"
+  },
+  {
+    name: "Jobs",
+    href: "jobs",
+    expectedSelector: "h5.title",
+    expectedText: "Jobs"
+  },
+  {
+    name: "CronJobs",
+    href: "cronjobs",
+    expectedSelector: "h5.title",
+    expectedText: "Cron Jobs"
+  }]
+},
+{
+  drawerId: "config",
+  pages: [{
+    name: "ConfigMaps",
+    href: "configmaps",
+    expectedSelector: "h5.title",
+    expectedText: "Config Maps"
+  },
+  {
+    name: "Secrets",
+    href: "secrets",
+    expectedSelector: "h5.title",
+    expectedText: "Secrets"
+  },
+  {
+    name: "Resource Quotas",
+    href: "resourcequotas",
+    expectedSelector: "h5.title",
+    expectedText: "Resource Quotas"
+  },
+  {
+    name: "Limit Ranges",
+    href: "limitranges",
+    expectedSelector: "h5.title",
+    expectedText: "Limit Ranges"
+  },
+  {
+    name: "HPA",
+    href: "hpa",
+    expectedSelector: "h5.title",
+    expectedText: "Horizontal Pod Autoscalers"
+  },
+  {
+    name: "Pod Disruption Budgets",
+    href: "poddisruptionbudgets",
+    expectedSelector: "h5.title",
+    expectedText: "Pod Disruption Budgets"
+  }]
+},
+{
+  drawerId: "networks",
+  pages: [{
+    name: "Services",
+    href: "services",
+    expectedSelector: "h5.title",
+    expectedText: "Services"
+  },
+  {
+    name: "Endpoints",
+    href: "endpoints",
+    expectedSelector: "h5.title",
+    expectedText: "Endpoints"
+  },
+  {
+    name: "Ingresses",
+    href: "ingresses",
+    expectedSelector: "h5.title",
+    expectedText: "Ingresses"
+  },
+  {
+    name: "Network Policies",
+    href: "network-policies",
+    expectedSelector: "h5.title",
+    expectedText: "Network Policies"
+  }]
+},
+{
+  drawerId: "storage",
+  pages: [{
+    name: "Persistent Volume Claims",
+    href: "persistent-volume-claims",
+    expectedSelector: "h5.title",
+    expectedText: "Persistent Volume Claims"
+  },
+  {
+    name: "Persistent Volumes",
+    href: "persistent-volumes",
+    expectedSelector: "h5.title",
+    expectedText: "Persistent Volumes"
+  },
+  {
+    name: "Storage Classes",
+    href: "storage-classes",
+    expectedSelector: "h5.title",
+    expectedText: "Storage Classes"
+  }]
+},
+{
+  page: {
+    name: "Namespaces",
+    href: "namespaces",
+    expectedSelector: "h5.title",
+    expectedText: "Namespaces"
+  }
+},
+{
+  page: {
+    name: "Events",
+    href: "events",
+    expectedSelector: "h5.title",
+    expectedText: "Events"
+  }
+},
+{
+  drawerId: "apps",
+  pages: [{
+    name: "Charts",
+    href: "apps/charts",
+    expectedSelector: "div.HelmCharts input",
+  },
+  {
+    name: "Releases",
+    href: "apps/releases",
+    expectedSelector: "h5.title",
+    expectedText: "Releases"
+  }]
+},
+{
+  drawerId: "users",
+  pages: [{
+    name: "Service Accounts",
+    href: "service-accounts",
+    expectedSelector: "h5.title",
+    expectedText: "Service Accounts"
+  },
+  {
+    name: "Roles",
+    href: "roles",
+    expectedSelector: "h5.title",
+    expectedText: "Roles"
+  },
+  {
+    name: "Cluster Roles",
+    href: "cluster-roles",
+    expectedSelector: "h5.title",
+    expectedText: "Cluster Roles"
+  },
+  {
+    name: "Role Bindings",
+    href: "role-bindings",
+    expectedSelector: "h5.title",
+    expectedText: "Role Bindings"
+  },
+  {
+    name: "Cluster Role Bindings",
+    href: "cluster-role-bindings",
+    expectedSelector: "h5.title",
+    expectedText: "Cluster Role Bindings"
+  },
+  {
+    name: "Pod Security Policies",
+    href: "pod-security-policies",
+    expectedSelector: "h5.title",
+    expectedText: "Pod Security Policies"
+  }]
+},
+{
+  drawerId: "custom-resources",
+  pages: [{
+    name: "Definitions",
+    href: "crd/definitions",
+    expectedSelector: "h5.title",
+    expectedText: "Custom Resources"
+  }]
+}];
+
+utils.describeIf(minikubeReady(TEST_NAMESPACE))("Minikube based tests", () => {
+  let window: Page, cleanup: () => Promise<void>, frame: Frame;
+
+  beforeEach(async () => {
+    ({ window, cleanup } = await utils.start());
+    await utils.clickWelcomeButton(window);
+
+    frame = await utils.lauchMinikubeClusterFromCatalog(window);
+  }, 10*60*1000);
+
+  afterEach(async () => {
+    await cleanup();
+  }, 10*60*1000);
+
+  it("should navigate around common cluster pages", async () => {
+    for (const test of commonPageTests) {
+      if (isTopPageTest(test)) {
+        const { href, expectedText, expectedSelector } = test.page;
+        const menuButton = await frame.waitForSelector(`a[href^="/${href}"]`);
+
+        await menuButton.click();
+        await frame.waitForSelector(`${expectedSelector} >> text='${expectedText}'`);
+
+        continue;
      }
-    };

-    function getSidebarSelectors(itemId: string) {
-      const root = `.SidebarItem[data-test-id="${itemId}"]`;
+      const { drawerId, pages } = test;
+      const selectors = getSidebarSelectors(drawerId);
+      const mainPageSelector = `${selectors.subMenuLink(pages[0].href)} >> text='${pages[0].name}'`;

-      return {
-        expandSubMenu: `${root} .nav-item`,
-        subMenuLink: (href: string) => `.Sidebar .sub-menu a[href^="/${href}"]`,
-      };
+      await frame.click(selectors.expandSubMenu);
+      await frame.waitForSelector(mainPageSelector);
+
+      for (const page of pages) {
+        const subPageButton = await frame.waitForSelector(selectors.subMenuLink(page.href));
+
+        await subPageButton.click();
+        await frame.waitForSelector(getLoadedSelector(page));
+      }
+
+      await frame.click(selectors.expandSubMenu);
+      await frame.waitForSelector(mainPageSelector, { state: "hidden" });
+    }
+  }, 10*60*1000);
+
+  it("show logs and highlight the log search entries", async () => {
+    await frame.click(`a[href="/workloads"]`);
+    await frame.click(`a[href="/pods"]`);
+
+    const namespacesSelector = await frame.waitForSelector(".NamespaceSelect");
+
+    await namespacesSelector.click();
+    await namespacesSelector.type("kube-system");
+    await namespacesSelector.press("Enter");
+    await namespacesSelector.click();
+
+    const kubeApiServerRow = await frame.waitForSelector("div.TableCell >> text=kube-apiserver");
+
+    await kubeApiServerRow.click();
+    await frame.waitForSelector(".Drawer", { state: "visible" });
+
+    const logButton = await frame.waitForSelector("ul.KubeObjectMenu li.MenuItem i.Icon span[data-icon-name='subject']");
+
+    await logButton.click();
+
+    // Check if controls are available
+    await frame.waitForSelector(".LogList .VirtualList");
+    await frame.waitForSelector(".LogResourceSelector");
+
+    const logSearchInput = await frame.waitForSelector(".LogSearch .SearchInput input");
+
+    await logSearchInput.type(":");
+    await frame.waitForSelector(".LogList .list span.active");
+
+    const showTimestampsButton = await frame.waitForSelector(".LogControls .show-timestamps");
+
+    await showTimestampsButton.click();
+
+    const showPreviousButton = await frame.waitForSelector(".LogControls .show-previous");
+
+    await showPreviousButton.click();
+  }, 10*60*1000);
+
+  it("should show the default namespaces", async () => {
+    await frame.click('a[href="/namespaces"]');
+    await frame.waitForSelector("div.TableCell >> text='default'");
+    await frame.waitForSelector("div.TableCell >> text='kube-system'");
+  }, 10*60*1000);
+
+  it(`should create the ${TEST_NAMESPACE} and a pod in the namespace`, async () => {
+    await frame.click('a[href="/namespaces"]');
+    await frame.click("button.add-button");
+    await frame.waitForSelector("div.AddNamespaceDialog >> text='Create Namespace'");
+
+    const namespaceNameInput = await frame.waitForSelector(".AddNamespaceDialog input");
+
+    await namespaceNameInput.type(TEST_NAMESPACE);
+    await namespaceNameInput.press("Enter");
+
+    await frame.waitForSelector(`div.TableCell >> text=${TEST_NAMESPACE}`);
+
+    if ((await frame.innerText(`a[href^="/workloads"] .expand-icon`)) === "keyboard_arrow_down") {
+      await frame.click(`a[href^="/workloads"]`);
    }

-    describe("cluster pages", () => {
-      utils.beforeAllWrapped(appStartAddCluster);
-      utils.afterAllWrapped(() => utils.tearDown(app));
+    await frame.click(`a[href^="/pods"]`);

-      const tests: {
-        drawer?: string
-        drawerId?: string
-        pages: {
-          name: string,
-          href: string,
-          expectedSelector: string,
-          expectedText: string
-        }[]
-      }[] = [{
-        drawer: "",
-        drawerId: "",
-        pages: [{
-          name: "Cluster",
-          href: "cluster",
-          expectedSelector: "div.ClusterOverview div.label",
-          expectedText: "CPU"
-        }]
-      },
-      {
-        drawer: "",
-        drawerId: "",
-        pages: [{
-          name: "Nodes",
-          href: "nodes",
-          expectedSelector: "h5.title",
-          expectedText: "Nodes"
-        }]
-      },
-      {
-        drawer: "Workloads",
-        drawerId: "workloads",
-        pages: [{
-          name: "Overview",
-          href: "workloads",
-          expectedSelector: "h5.box",
-          expectedText: "Overview"
-        },
-        {
-          name: "Pods",
-          href: "pods",
-          expectedSelector: "h5.title",
-          expectedText: "Pods"
-        },
-        {
-          name: "Deployments",
-          href: "deployments",
-          expectedSelector: "h5.title",
-          expectedText: "Deployments"
-        },
-        {
-          name: "DaemonSets",
-          href: "daemonsets",
-          expectedSelector: "h5.title",
-          expectedText: "Daemon Sets"
-        },
-        {
-          name: "StatefulSets",
-          href: "statefulsets",
-          expectedSelector: "h5.title",
-          expectedText: "Stateful Sets"
-        },
-        {
-          name: "ReplicaSets",
-          href: "replicasets",
-          expectedSelector: "h5.title",
-          expectedText: "Replica Sets"
-        },
-        {
-          name: "Jobs",
-          href: "jobs",
-          expectedSelector: "h5.title",
-          expectedText: "Jobs"
-        },
-        {
-          name: "CronJobs",
-          href: "cronjobs",
-          expectedSelector: "h5.title",
-          expectedText: "Cron Jobs"
-        }]
-      },
-      {
-        drawer: "Configuration",
-        drawerId: "config",
-        pages: [{
-          name: "ConfigMaps",
-          href: "configmaps",
-          expectedSelector: "h5.title",
-          expectedText: "Config Maps"
-        },
-        {
-          name: "Secrets",
-          href: "secrets",
-          expectedSelector: "h5.title",
-          expectedText: "Secrets"
-        },
-        {
-          name: "Resource Quotas",
-          href: "resourcequotas",
-          expectedSelector: "h5.title",
-          expectedText: "Resource Quotas"
-        },
-        {
-          name: "Limit Ranges",
-          href: "limitranges",
-          expectedSelector: "h5.title",
-          expectedText: "Limit Ranges"
-        },
-        {
-          name: "HPA",
-          href: "hpa",
-          expectedSelector: "h5.title",
-          expectedText: "Horizontal Pod Autoscalers"
-        },
-        {
-          name: "Pod Disruption Budgets",
-          href: "poddisruptionbudgets",
-          expectedSelector: "h5.title",
-          expectedText: "Pod Disruption Budgets"
-        }]
-      },
-      {
-        drawer: "Network",
-        drawerId: "networks",
-        pages: [{
-          name: "Services",
-          href: "services",
-          expectedSelector: "h5.title",
-          expectedText: "Services"
-        },
-        {
-          name: "Endpoints",
-          href: "endpoints",
-          expectedSelector: "h5.title",
-          expectedText: "Endpoints"
-        },
-        {
-          name: "Ingresses",
-          href: "ingresses",
-          expectedSelector: "h5.title",
-          expectedText: "Ingresses"
-        },
-        {
-          name: "Network Policies",
-          href: "network-policies",
-          expectedSelector: "h5.title",
-          expectedText: "Network Policies"
-        }]
-      },
-      {
-        drawer: "Storage",
-        drawerId: "storage",
-        pages: [{
-          name: "Persistent Volume Claims",
-          href: "persistent-volume-claims",
-          expectedSelector: "h5.title",
-          expectedText: "Persistent Volume Claims"
-        },
-        {
-          name: "Persistent Volumes",
-          href: "persistent-volumes",
-          expectedSelector: "h5.title",
-          expectedText: "Persistent Volumes"
-        },
-        {
-          name: "Storage Classes",
-          href: "storage-classes",
-          expectedSelector: "h5.title",
-          expectedText: "Storage Classes"
-        }]
-      },
-      {
-        drawer: "",
-        drawerId: "",
-        pages: [{
-          name: "Namespaces",
-          href: "namespaces",
-          expectedSelector: "h5.title",
-          expectedText: "Namespaces"
-        }]
-      },
-      {
-        drawer: "",
-        drawerId: "",
-        pages: [{
-          name: "Events",
-          href: "events",
-          expectedSelector: "h5.title",
-          expectedText: "Events"
-        }]
-      },
-      {
-        drawer: "Apps",
-        drawerId: "apps",
-        pages: [{
-          name: "Charts",
-          href: "apps/charts",
-          expectedSelector: "div.HelmCharts input",
-          expectedText: ""
-        },
-        {
-          name: "Releases",
-          href: "apps/releases",
-          expectedSelector: "h5.title",
-          expectedText: "Releases"
-        }]
-      },
-      {
-        drawer: "Access Control",
-        drawerId: "users",
-        pages: [{
-          name: "Service Accounts",
-          href: "service-accounts",
-          expectedSelector: "h5.title",
-          expectedText: "Service Accounts"
-        },
-        {
-          name: "Role Bindings",
-          href: "role-bindings",
-          expectedSelector: "h5.title",
-          expectedText: "Role Bindings"
-        },
-        {
-          name: "Roles",
-          href: "roles",
-          expectedSelector: "h5.title",
-          expectedText: "Roles"
-        },
-        {
-          name: "Pod Security Policies",
-          href: "pod-security-policies",
-          expectedSelector: "h5.title",
-          expectedText: "Pod Security Policies"
-        }]
-      },
-      {
-        drawer: "Custom Resources",
-        drawerId: "custom-resources",
-        pages: [{
-          name: "Definitions",
-          href: "crd/definitions",
-          expectedSelector: "h5.title",
-          expectedText: "Custom Resources"
-        }]
-      }];
+    const namespacesSelector = await frame.waitForSelector(".NamespaceSelect");

-      tests.forEach(({ drawer = "", drawerId = "", pages }) => {
-        const selectors = getSidebarSelectors(drawerId);
+    await namespacesSelector.click();
+    await namespacesSelector.type(TEST_NAMESPACE);
+    await namespacesSelector.press("Enter");
+    await namespacesSelector.click();

-        if (drawer !== "") {
-          it(`shows ${drawer} drawer`, async () => {
-            expect(clusterAdded).toBe(true);
-            await app.client.click(selectors.expandSubMenu);
-            await app.client.waitUntilTextExists(selectors.subMenuLink(pages[0].href), pages[0].name);
-          });
+    await frame.click(".Icon.new-dock-tab");

-          pages.forEach(({ name, href, expectedSelector, expectedText }) => {
-            it(`shows ${drawer}->${name} page`, async () => {
-              expect(clusterAdded).toBe(true);
-              await app.client.click(selectors.subMenuLink(href));
-              await app.client.waitUntilTextExists(expectedSelector, expectedText);
-            });
-          });
-
-          it(`hides ${drawer} drawer`, async () => {
-            expect(clusterAdded).toBe(true);
-            await app.client.click(selectors.expandSubMenu);
-            await expect(app.client.waitUntilTextExists(selectors.subMenuLink(pages[0].href), pages[0].name, 100)).rejects.toThrow();
-          });
-        } else {
-          const { href, name, expectedText, expectedSelector } = pages[0];
-
-          it(`shows page ${name}`, async () => {
-            expect(clusterAdded).toBe(true);
-            await app.client.click(`a[href^="/${href}"]`);
-            await app.client.waitUntilTextExists(expectedSelector, expectedText);
-          });
+    try {
+      await frame.click("li.MenuItem.create-resource-tab", {
+        // NOTE: the following shouldn't be required, but is because without it a TypeError is thrown
+        // see: https://github.com/microsoft/playwright/issues/8229
+        position: {
+          y: 0,
+          x: 0,
        }
      });
-    });
+    } catch (error) {
+      console.log(error);
+      await frame.waitForTimeout(100_000);
+    }

-    describe("viewing pod logs", () => {
-      utils.beforeEachWrapped(appStartAddCluster);
-      utils.afterEachWrapped(() => utils.tearDown(app));
+    const inputField = await frame.waitForSelector(".CreateResource div.react-monaco-editor-container");

-      it(`shows a log for a pod`, async () => {
-        expect(clusterAdded).toBe(true);
-        // Go to Pods page
-        await app.client.click(getSidebarSelectors("workloads").expandSubMenu);
-        await app.client.waitUntilTextExists('a[href^="/pods"]', "Pods");
-        await app.client.click('a[href^="/pods"]');
-        await app.client.click(".NamespaceSelect");
-        await app.client.keys("kube-system");
-        await app.client.keys("Enter");// "\uE007"
-        await app.client.waitUntilTextExists("div.TableCell", "kube-apiserver");
-        let podMenuItemEnabled = false;
+    await inputField.click();
+    await inputField.type("apiVersion: v1", { delay: 10 });
+    await inputField.press("Enter", { delay: 10 });
+    await inputField.type("kind: Pod", { delay: 10 });
+    await inputField.press("Enter", { delay: 10 });
+    await inputField.type("metadata:", { delay: 10 });
+    await inputField.press("Enter", { delay: 10 });
+    await inputField.type("  name: nginx-create-pod-test", { delay: 10 });
+    await inputField.press("Enter", { delay: 10 });
+    await inputField.type(`namespace: ${TEST_NAMESPACE}`, { delay: 10 });
+    await inputField.press("Enter", { delay: 10 });
+    await inputField.press("Backspace", { delay: 10 });
+    await inputField.type("spec:", { delay: 10 });
+    await inputField.press("Enter", { delay: 10 });
+    await inputField.type("  containers:", { delay: 10 });
+    await inputField.press("Enter", { delay: 10 });
+    await inputField.type("- name: nginx-create-pod-test", { delay: 10 });
+    await inputField.press("Enter", { delay: 10 });
+    await inputField.type("  image: nginx:alpine", { delay: 10 });
+    await inputField.press("Enter", { delay: 10 });

-        // Wait until extensions are enabled on renderer
-        while (!podMenuItemEnabled) {
-          const logs = await app.client.getRenderProcessLogs();
-
-          podMenuItemEnabled = !!logs.find(entry => entry.message.includes("[EXTENSION]: enabled lens-pod-menu@"));
-
-          if (!podMenuItemEnabled) {
-            await new Promise(r => setTimeout(r, 1000));
-          }
-        }
-
-        // Open logs tab in dock
-        await app.client.click(".list .TableRow:first-child");
-        await app.client.waitForVisible(".Drawer");
-        const logsButton = "ul.KubeObjectMenu li.MenuItem i.Icon span[data-icon-name='subject']";
-
-        await app.client.waitForVisible(logsButton);
-        await app.client.click(logsButton);
-
-        // Check if controls are available
-        await app.client.waitForVisible(".LogList .VirtualList");
-        await app.client.waitForVisible(".LogResourceSelector");
-        //await app.client.waitForVisible(".LogSearch .SearchInput");
-        await app.client.waitForVisible(".LogSearch .SearchInput input");
-        // Search for semicolon
-        await app.client.keys(":");
-        await app.client.waitForVisible(".LogList .list span.active");
-        // Click through controls
-        await app.client.click(".LogControls .show-timestamps");
-        await app.client.click(".LogControls .show-previous");
-      });
-    });
-
-    describe("cluster operations", () => {
-      utils.beforeEachWrapped(appStartAddCluster);
-      utils.afterEachWrapped(() => utils.tearDown(app));
-
-      it("shows default namespace", async () => {
-        expect(clusterAdded).toBe(true);
-        await app.client.click('a[href="/namespaces"]');
-        await app.client.waitUntilTextExists("div.TableCell", "default");
-        await app.client.waitUntilTextExists("div.TableCell", "kube-system");
-      });
-
-      it(`creates ${TEST_NAMESPACE} namespace`, async () => {
-        expect(clusterAdded).toBe(true);
-        await app.client.click('a[href="/namespaces"]');
-        await app.client.waitUntilTextExists("div.TableCell", "default");
-        await app.client.waitUntilTextExists("div.TableCell", "kube-system");
-        await app.client.click("button.add-button");
-        await app.client.waitUntilTextExists("div.AddNamespaceDialog", "Create Namespace");
-        await app.client.keys(`${TEST_NAMESPACE}\n`);
-        await app.client.waitForExist(`.name=${TEST_NAMESPACE}`);
-      });
-
-      it(`creates a pod in ${TEST_NAMESPACE} namespace`, async () => {
-        expect(clusterAdded).toBe(true);
-        await app.client.click(getSidebarSelectors("workloads").expandSubMenu);
-        await app.client.waitUntilTextExists('a[href^="/pods"]', "Pods");
-        await app.client.click('a[href^="/pods"]');
-
-        await app.client.click(".NamespaceSelect");
-        await app.client.keys(TEST_NAMESPACE);
-        await app.client.keys("Enter");// "\uE007"
-        await app.client.click(".Icon.new-dock-tab");
-        await app.client.waitUntilTextExists("li.MenuItem.create-resource-tab", "Create resource");
-        await app.client.click("li.MenuItem.create-resource-tab");
-        await app.client.waitForVisible(".CreateResource div.react-monaco-editor-container");
-        // Write pod manifest to editor
-        await app.client.click(".CreateResource div.react-monaco-editor-container");
-        await app.client.keys("apiVersion: v1\n");
-        await app.client.keys("kind: Pod\n");
-        await app.client.keys("metadata:\n");
-        await app.client.keys("  name: nginx-create-pod-test\n");
-        await app.client.keys(`namespace: ${TEST_NAMESPACE}\n`);
-        await app.client.keys(`${BACKSPACE}spec:\n`);
-        await app.client.keys("  containers:\n");
-        await app.client.keys("- name: nginx-create-pod-test\n");
-        await app.client.keys("  image: nginx:alpine\n");
-        // Create deployment
-        await app.client.waitForEnabled("button.Button=Create & Close");
-        await app.client.click("button.Button=Create & Close");
-        // Wait until first bits of pod appears on dashboard
-        await app.client.waitForExist(".name=nginx-create-pod-test");
-        // Open pod details
-        await app.client.click(".name=nginx-create-pod-test");
-        await app.client.waitUntilTextExists("div.drawer-title-text", "Pod: nginx-create-pod-test");
-      });
-    });
-  });
+    await frame.click("button.Button >> text='Create & Close'");
+    await frame.click("div.TableCell >> text=nginx-create-pod-test");
+    await frame.waitForSelector("div.drawer-title-text >> text='Pod: nginx-create-pod-test'");
+  }, 10*60*1000);
 });
@@ -19,25 +19,25 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

-import type { Application } from "spectron";
+import type { Page } from "playwright";
 import * as utils from "../helpers/utils";

-jest.setTimeout(2 * 60 * 1000); // 2 minutes so that we can get better errors from spectron
-
 describe("Lens command palette", () => {
-  let app: Application;
+  let window: Page, cleanup: () => Promise<void>;
+
+  beforeEach(async () => {
+    ({ window, cleanup } = await utils.start());
+    await utils.clickWelcomeButton(window);
+  }, 10*60*1000);
+
+  afterEach(async () => {
+    await cleanup();
+  }, 10*60*1000);

  describe("menu", () => {
-    utils.beforeAllWrapped(async () => {
-      app = await utils.setup();
-    });
-
-    utils.afterAllWrapped(() => utils.tearDown(app));
-
-    it("opens command dialog from menu", async () => {
-      await app.electron.ipcRenderer.send("test-menu-item-click", "View", "Command Palette...");
-      await app.client.waitUntilTextExists(".Select__option", "Hotbar: Switch");
-      await app.client.keys("Escape");
-    });
+    it("opens command dialog from keyboard shortcut", async () => {
+      await window.keyboard.press("Meta+Shift+p");
+      await window.waitForSelector(".Select__option >> text=Hotbar: Switch");
+    }, 10*60*1000);
  });
 });
@@ -19,7 +19,6 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 import { spawnSync } from "child_process";
-import type { Application } from "spectron";

 export function minikubeReady(testNamespace: string): boolean {
  // determine if minikube is running
@@ -57,18 +56,3 @@ export function minikubeReady(testNamespace: string): boolean {

  return true;
 }
-
-export async function waitForMinikubeDashboard(app: Application) {
-  await app.client.waitUntilTextExists("div.TableCell", "minikube");
-  await app.client.waitForExist(".Input.SearchInput input");
-  await app.client.setValue(".Input.SearchInput input", "minikube");
-  await app.client.waitUntilTextExists("div.TableCell", "minikube");
-  await app.client.click("div.TableRow");
-  await app.client.waitUntilTextExists("div.drawer-title-text", "KubernetesCluster: minikube");
-  await app.client.waitForExist("div.EntityIcon div.HotbarIcon div div.MuiAvatar-root");
-  await app.client.click("div.EntityIcon div.HotbarIcon div div.MuiAvatar-root");
-  await app.client.waitUntilTextExists("pre.kube-auth-out", "Authentication proxy started");
-  await app.client.waitForExist(`iframe[name="minikube"]`);
-  await app.client.frame("minikube");
-  await app.client.waitUntilTextExists("span.link-text", "Cluster");
-}
@@ -18,49 +18,20 @@
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
-import { Application } from "spectron";
-import * as util from "util";
-import { exec } from "child_process";
+import { createHash } from "crypto";
+import { mkdirp, remove } from "fs-extra";
+import * as os from "os";
+import * as path from "path";
+import * as uuid from "uuid";
+import { ElectronApplication, Frame, Page, _electron as electron } from "playwright";
+import { noop } from "lodash";

-const AppPaths: Partial<Record<NodeJS.Platform, string>> = {
+export const AppPaths: Partial<Record<NodeJS.Platform, string>> = {
  "win32": "./dist/win-unpacked/OpenLens.exe",
  "linux": "./dist/linux-unpacked/open-lens",
  "darwin": "./dist/mac/OpenLens.app/Contents/MacOS/OpenLens",
 };

-interface DoneCallback {
-  (...args: any[]): any;
-  fail(error?: string | { message: string }): any;
-}
-
-/**
- * This is necessary because Jest doesn't do this correctly.
- * @param fn The function to call
- */
-export function wrapJestLifecycle(fn: () => Promise<void> | void): (done: DoneCallback) => void {
-  return function (done: DoneCallback) {
-    (async () => fn())()
-      .then(() => done())
-      .catch(error => done.fail(error));
-  };
-}
-
-export function beforeAllWrapped(fn: () => Promise<void> | void): void {
-  beforeAll(wrapJestLifecycle(fn));
-}
-
-export function beforeEachWrapped(fn: () => Promise<void> | void): void {
-  beforeEach(wrapJestLifecycle(fn));
-}
-
-export function afterAllWrapped(fn: () => Promise<void> | void): void {
-  afterAll(wrapJestLifecycle(fn));
-}
-
-export function afterEachWrapped(fn: () => Promise<void> | void): void {
-  afterEach(wrapJestLifecycle(fn));
-}
-
 export function itIf(condition: boolean) {
  return condition ? it : it.skip;
 }
@@ -69,71 +40,80 @@ export function describeIf(condition: boolean) {
  return condition ? describe : describe.skip;
 }

-export const keys = {
-  backspace: "\uE003"
-};
+async function getMainWindow(app: ElectronApplication, timeout = 50_000): Promise<Page> {
+  const deadline = Date.now() + timeout;

-export async function setup(): Promise<Application> {
-  const app =  new Application({
-    path: AppPaths[process.platform], // path to electron app
-    args: [],
-    startTimeout: 60000,
-    waitTimeout: 10000,
-    env: {
-      CICD: "true"
+  for (; Date.now() < deadline;) {
+    for (const page of app.windows()) {
+      if (page.url().startsWith("http://localhost")) {
+        return page;
+      }
    }
-  });

-  await app.start();
-  // Wait for splash screen to be closed
-  while (await app.client.getWindowCount() > 1);
-  await app.client.windowByIndex(0);
-  await app.client.waitUntilWindowLoaded();
-  await showCatalog(app);
-
-  return app;
-}
-
-export async function showCatalog(app: Application) {
-  await app.client.waitForExist("#hotbarIcon-catalog-entity .Icon");
-  await app.client.click("#hotbarIcon-catalog-entity .Icon");
-}
-
-type AsyncPidGetter = () => Promise<number>;
-
-export async function tearDown(app?: Application) {
-  if (!app?.isRunning()) {
-    return;
+    await new Promise(resolve => setTimeout(resolve, 2_000));
  }

-  const pid = await (app.mainProcess.pid as any as AsyncPidGetter)();
+  throw new Error(`Lens did not open the main window within ${timeout}ms`);
+}

-  await app.stop();
+export async function start() {
+  const CICD = path.join(os.tmpdir(), "lens-integration-testing", uuid.v4());
+
+  // Make sure that the directory is clear
+  await remove(CICD).catch(noop);
+  await mkdirp(CICD);
+
+  const app = await electron.launch({
+    args: ["--integration-testing"], // this argument turns off the blocking of quit
+    executablePath: AppPaths[process.platform],
+    bypassCSP: true,
+    env: {
+      CICD,
+      ...process.env
+    },
+    timeout: 100_000,
+  } as Parameters<typeof electron["launch"]>[0]);

  try {
-    process.kill(pid, "SIGKILL");
-  } catch (e) {
-    console.error(e);
+    const window = await getMainWindow(app);
+
+    return {
+      app,
+      window,
+      cleanup: async () => {
+        await app.close();
+        await remove(CICD).catch(noop);
+      },
+    };
+  } catch (error) {
+    await app.close();
+    await remove(CICD).catch(noop);
+    throw error;
  }
 }

-export const promiseExec = util.promisify(exec);
+export async function clickWelcomeButton(window: Page) {
+  await window.click("#hotbarIcon-catalog-entity .Icon");
+}

-type HelmRepository = {
-  name: string;
-  url: string;
-};
+function minikubeEntityId() {
+  return createHash("md5").update(`${path.join(os.homedir(), ".kube", "config")}:minikube`).digest("hex");
+}

-export async function listHelmRepositories(): Promise<HelmRepository[]>{
-  for (let i = 0; i < 10; i += 1) {
-    try {
-      const { stdout } = await promiseExec("helm repo list -o json");
+/**
+ * From the catalog, click the minikube entity and wait for it to connect, returning its frame
+ */
+export async function lauchMinikubeClusterFromCatalog(window: Page): Promise<Frame> {
+  await window.waitForSelector("div.TableCell");
+  await window.click("div.TableCell >> text='minikube'");
+  await window.waitForSelector("div.drawer-title-text >> text='KubernetesCluster: minikube'");
+  await window.click("div.EntityIcon div.HotbarIcon div div.MuiAvatar-root");

-      return JSON.parse(stdout);
-    } catch {
-      await new Promise(r => setTimeout(r, 2000)); // if no repositories, wait for Lens adding bitnami repository
-    }
-  }
+  const minikubeFrame = await window.waitForSelector(`#cluster-frame-${minikubeEntityId()}`);

-  return [];
+  const frame = await minikubeFrame.contentFrame();
+
+  await frame.waitForSelector("div.Sidebar");
+
+  return frame;
 }