Add basic Playwright tests.

Author: apognu

.github/workflows/playground.yaml

@@ -0,0 +1,24 @@
+name: E2E tests
+
+on:
+  push:
+    branches: [poc/playwright]
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v4
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm --filter tests exec playwright install
+      - run: pnpm --filter tests run test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: |
+            packages/tests/playwright-report/
+            packages/tests/trace.zip
+          retention-days: 1

packages/tests/.gitignore

@@ -3,3 +3,4 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/auth.json

packages/tests/common/utils.ts

@@ -0,0 +1,12 @@
+import type { Locator, Page } from '@playwright/test';
+
+export const waitForThen = async (
+  page: Page,
+  locator: Locator,
+  callback: (locator: Locator) => Promise<void>,
+  state: 'attached' | 'detached' | 'visible' | 'hidden' = 'visible',
+) => {
+  await locator.waitFor({ state });
+  await callback(locator);
+  await page.waitForLoadState();
+};

packages/tests/e2e/001-user-signin-flow.test.ts

@@ -0,0 +1,65 @@
+import { expect, test } from '@playwright/test';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+test('Initial login page', async ({ page }) => {
+  await page.goto('/');
+  await page.waitForURL('/sign-in');
+
+  await expect(page).toHaveTitle('Marble');
+  await expect(page.getByText('Great rules are built with the Right Tools')).toBeVisible();
+});
+
+test('Invalid username', async ({ page }) => {
+  await page.goto('/sign-in');
+
+  await page
+    .getByRole('textbox')
+    .and(page.locator('[name="credentials.email"]'))
+    .fill('invalid@zorg.com');
+  await page
+    .getByRole('textbox')
+    .and(page.locator('[name="credentials.password"]'))
+    .fill('very-secret');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+
+  await expect(page.getByText('No user account found for this address.')).toBeVisible();
+});
+
+test('Invalid password', async ({ page }) => {
+  await page.goto('/sign-in');
+
+  await page
+    .getByRole('textbox')
+    .and(page.locator('[name="credentials.email"]'))
+    .fill('jbe@zorg.com');
+  await page
+    .getByRole('textbox')
+    .and(page.locator('[name="credentials.password"]'))
+    .fill('invalid');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+
+  await expect(page.getByText('Wrong password.')).toBeVisible();
+});
+
+const authState = path.join(path.dirname(fileURLToPath(import.meta.url)), '../auth.json');
+
+test('Authentication', async ({ page }) => {
+  await page.goto('/sign-in');
+
+  await page
+    .getByRole('textbox')
+    .and(page.locator('[name="credentials.email"]'))
+    .fill('jbe@zorg.com');
+  await page
+    .getByRole('textbox')
+    .and(page.locator('[name="credentials.password"]'))
+    .fill('very-secret');
+  await page.getByRole('button', { name: 'Sign in', exact: true }).click();
+
+  await page.waitForURL('/scenarios');
+
+  await expect(page.locator('nav').getByRole('link', { name: 'Scenarios ' })).toBeVisible();
+
+  await page.context().storageState({ path: authState, indexedDB: true });
+});

packages/tests/e2e/002-custom-lists.test.ts

@@ -0,0 +1,50 @@
+import { expect, test } from '@playwright/test';
+import crypto from 'crypto';
+import { waitForThen } from 'tests/common/utils';
+
+test('Create new list', async ({ page }) => {
+  await page.goto('/lists');
+
+  const listName = crypto.randomUUID();
+  const values = Array.from({ length: 5 }, () => crypto.randomUUID());
+
+  await page.getByRole('button', { name: 'New List' }).click();
+  await page.getByRole('textbox', { name: 'Name' }).fill(listName);
+  await page.getByRole('textbox', { name: 'Description' }).fill('Lorem ipsum dolor sit amet');
+
+  await waitForThen(
+    page,
+    page.getByRole('button', { name: 'Create new list' }),
+    async (button) => await button.click(),
+  );
+
+  await page.waitForURL('/lists/**');
+  await page.waitForLoadState();
+
+  for (const value of values) {
+    await waitForThen(page, page.getByRole('button', { name: 'New value' }), async (button) =>
+      button.click(),
+    );
+
+    await waitForThen(
+      page,
+      page.getByRole('textbox', { name: 'Value' }),
+      async (field) => await field.fill(value),
+    );
+
+    await page.getByRole('button', { name: 'Save' }).click();
+    await page.getByRole('textbox', { name: 'Value' }).waitFor({ state: 'hidden' });
+  }
+
+  await page.getByRole('listitem').filter({ hasText: 'Lists' }).getByRole('link').click();
+  await page.waitForURL('/lists');
+  await page.waitForLoadState();
+
+  await page.getByRole('cell', { name: listName }).click();
+  await page.waitForURL('/lists/**');
+  await page.waitForLoadState();
+
+  for (const value of values) {
+    await expect(page.locator('table')).toContainText(value);
+  }
+});

packages/tests/e2e/003-scenario-publication.test.ts

@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test';
+import crypto from 'crypto';
+import { waitForThen } from 'tests/common/utils';
+
+test('Create a user', async ({ page }) => {
+  await page.goto('/settings');
+  await page.waitForURL('/settings/users');
+
+  await waitForThen(
+    page,
+    page.getByRole('button', { name: 'New user' }),
+    async (button) => await button.click(),
+  );
+
+  const fn = crypto.randomUUID();
+  const ln = crypto.randomUUID();
+  const email = `${crypto.randomUUID()}@example.com`;
+
+  await page.getByRole('textbox').and(page.locator('[name="firstName"]')).fill(fn);
+  await page.getByRole('textbox').and(page.locator('[name="lastName"]')).fill(ln);
+  await page.getByRole('textbox').and(page.locator('[name="email"]')).fill(email);
+  await page.getByRole('button', { name: 'Create new user' }).click();
+
+  await expect(page.locator('table')).toContainText(`${fn} ${ln}`);
+  await expect(page.locator('table')).toContainText(email);
+});