Add e2e tests for login, survey and dashboard

.github/workflows/playwright-pipeline.yml

@@ -0,0 +1,39 @@
+name : ZenML Playwright test pipelines
+
+on: 
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  run_zenml_tests:
+    runs-on: ubunto-latest
+
+    steps:
+      - name: checkout repository
+        uses: actions/checkout@v3
+
+      - name: Set up Python 3.12
+        uses: actions/setup-python@v4
+        with:
+          python-version: "3.12"
+
+      - name: Install ZenML
+        run: |
+          pip install --upgrade pip
+          pip install zenml
+
+      - name: ZenMl up
+        run: |
+          zenml init
+          zenml up
+
+      - name: Run Playwright Tests
+        run: npx playwright test --workers=1
+
+      - name: Verify ZenML Installation
+        run: zenml version
+

e2e-tests/00-survey.spec.ts

@@ -0,0 +1,45 @@
+import { test } from "@playwright/test";
+import { login } from "./utils";
+
+test.describe("Survey", () => {
+	test("Fill survey for first time", async ({ page }) => {
+		await login(page);
+
+		const isVisible = await page.locator("text=Add your account details").isVisible();
+
+		if (!isVisible) {
+			return;
+		}
+
+		//survey form - Step 1
+		await page.fill('input[name="fullName"]', "test");
+		await page.fill('input[name="email"]', "[email protected]");
+		await page
+			.getByLabel("I want to receive news and recommendations about how to use ZenML")
+			.check();
+		await page.click('button span:has-text("Continue")');
+		await page.waitForSelector("text=What will be your primary use for ZenML?");
+
+		//survey form - Step 2
+		await page.click('div label:has-text("Personal")');
+		await page.click('button span:has-text("Continue")');
+		await page.waitForSelector("text=What best describes your current situation with ZenML?");
+
+		//survey form - Step 3
+		await page.check('label:has-text("I\'m new to MLOps and exploring")');
+		await page.click('button span:has-text("Continue")');
+		await page.waitForSelector("text=What is your current infrastructure?");
+
+		//survey form - Step 4
+		await page.check('label:has-text("GCP") button');
+		await page.check('label:has-text("Azure")');
+		await page.check('label:has-text("Openshift")');
+		await page.check('label:has-text("AWS")');
+		await page.check('label:has-text("Native Kubernetes")');
+		await page.click('button span:has-text("Continue")');
+		await page.waitForSelector("text=Join The ZenML Slack Community");
+
+		//survey form - Step 5
+		await page.click('button span:has-text("Skip")');
+	});
+});

e2e-tests/01-login.spec.ts

@@ -0,0 +1,8 @@
+import { test } from "@playwright/test";
+import { login } from "./utils";
+
+test.describe("Login", () => {
+	test("Login with default username", async ({ page }) => {
+		await login(page);
+	});
+});

e2e-tests/02-dashboard.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from "@playwright/test";
+import { login } from "./utils";
+
+test.describe("Dashboard", () => {
+	test("Check dashboard and Navbar", async ({ page }) => {
+		await login(page);
+
+		const overviewLink = await page.locator('a:has-text("Overview")').isVisible();
+
+		if (!overviewLink) {
+			return;
+		}
+		//Visible the navbar
+		await expect(page.locator('a:has-text("Pipelines")')).toBeVisible();
+		await expect(page.locator('a:has-text("Models")')).toBeVisible();
+		await expect(page.locator('a:has-text("Artifacts")')).toBeVisible();
+		await expect(page.locator('a:has-text("Stacks")')).toBeVisible();
+
+		//Change the URL by clicking each nav item
+		await page.click('a:has-text("Pipelines")');
+		await expect(page).toHaveURL(/\/pipelines\?tab=pipelines/);
+
+		await page.click('a:has-text("Models")');
+		await expect(page).toHaveURL(/\/models/);
+
+		await page.click('a:has-text("Artifacts")');
+		await expect(page).toHaveURL(/\/artifacts/);
+
+		await page.click('a:has-text("Stacks")');
+		await expect(page).toHaveURL(/\/stacks/);
+	});
+});

e2e-tests/utils.ts

@@ -0,0 +1,10 @@
+import { Page, expect } from "@playwright/test";
+
+// reusable login function
+export async function login(page: Page) {
+	await page.goto("http://127.0.0.1:8237/");
+	await expect(page.locator('h1:has-text("Log in to your account")')).toBeVisible();
+	await page.fill('input[name="username"]', "default");
+	await page.fill('input[name="password"]', "");
+	await page.click('button span:has-text("Login")');
+}