feat: introduce playwright (#1194)

* feat: introduce playwright

* test: migrate apps folder to playwright (#1201)

* test: rewrite connections tests with playwright (#1203)

* test: rewrite executions tests with playwright (#1207)

* test: rewrite flow editor tests with playwright (#1212)

* test(flow-editor): rewrite tests using serial mode (#1218)

* test: update custom connection creation paths

* test: move login logic to page fixture

* test: remove cypress tests and deps

---------

Co-authored-by: Ali BARIN <ali.barin53@gmail.com>

packages/e2e-tests/tests/apps/list-apps.spec.js

@@ -0,0 +1,66 @@
+// @ts-check
+const { test, expect } = require('../../fixtures/index');
+
+test.describe('Apps page', () => {
+  test.beforeEach(async ({ page, applicationsPage }) => {
+    await page.getByTestId('apps-page-drawer-link').click();
+  });
+
+  test('displays applications', async ({ page, applicationsPage }) => {
+    await page.getByTestId('apps-loader').waitFor({
+      state: 'detached',
+    });
+    await expect(page.getByTestId('app-row')).not.toHaveCount(0);
+
+    await applicationsPage.screenshot({
+      path: 'Applications.png',
+    });
+  });
+
+  test.describe('can add connection', () => {
+    test.beforeEach(async ({ page }) => {
+      await expect(page.getByTestId('add-connection-button')).toBeVisible();
+      await page.getByTestId('add-connection-button').click();
+      await page
+        .getByTestId('search-for-app-loader')
+        .waitFor({ state: 'detached' });
+    });
+
+    test('lists applications', async ({ page, applicationsPage }) => {
+      const appListItemCount = await page.getByTestId('app-list-item').count();
+      expect(appListItemCount).toBeGreaterThan(10);
+
+      await applicationsPage.clickAway();
+    });
+
+    test('searches an application', async ({ page, applicationsPage }) => {
+      await page.getByTestId('search-for-app-text-field').fill('DeepL');
+      await expect(page.getByTestId('app-list-item')).toHaveCount(1);
+
+      await applicationsPage.clickAway();
+    });
+
+    test('goes to app page to create a connection', async ({
+      page,
+      applicationsPage,
+    }) => {
+      await page.getByTestId('app-list-item').first().click();
+      await expect(page).toHaveURL('/app/deepl/connections/add?shared=false');
+      await expect(page.getByTestId('add-app-connection-dialog')).toBeVisible();
+
+      await applicationsPage.clickAway();
+    });
+
+    test('closes the dialog on backdrop click', async ({
+      page,
+      applicationsPage,
+    }) => {
+      await page.getByTestId('app-list-item').first().click();
+      await expect(page).toHaveURL('/app/deepl/connections/add?shared=false');
+      await expect(page.getByTestId('add-app-connection-dialog')).toBeVisible();
+      await applicationsPage.clickAway();
+      await expect(page).toHaveURL('/app/deepl/connections');
+      await expect(page.getByTestId('add-app-connection-dialog')).toBeHidden();
+    });
+  });
+});

packages/e2e-tests/tests/connections/create-connection.spec.js

@@ -0,0 +1,49 @@
+// @ts-check
+const { test, expect } = require('../../fixtures/index');
+
+test.describe('Connections page', () => {
+  test.beforeEach(async ({ page, connectionsPage }) => {
+    await page.getByTestId('apps-page-drawer-link').click();
+    await page.goto('/app/ntfy/connections');
+  });
+
+  test('shows connections if any', async ({ page, connectionsPage }) => {
+    await page.getByTestId('apps-loader').waitFor({
+      state: 'detached',
+    });
+
+    await connectionsPage.screenshot({
+      path: 'Connections.png',
+    });
+  });
+
+  test.describe('can add connection', () => {
+    test('has a button to open add connection dialog', async ({ page }) => {
+      await expect(page.getByTestId('add-connection-button')).toBeVisible();
+    });
+
+    test('add connection button takes user to add connection page', async ({
+      page,
+      connectionsPage,
+    }) => {
+      await connectionsPage.clickAddConnectionButton();
+      await expect(page).toHaveURL('/app/ntfy/connections/add?shared=false');
+    });
+
+    test('shows add connection dialog to create a new connection', async ({
+      page,
+      connectionsPage,
+    }) => {
+      await connectionsPage.clickAddConnectionButton();
+      await expect(page).toHaveURL('/app/ntfy/connections/add?shared=false');
+      await page.getByTestId('create-connection-button').click();
+      await expect(
+        page.getByTestId('create-connection-button')
+      ).not.toBeVisible();
+
+      await connectionsPage.screenshot({
+        path: 'Ntfy connections after creating a connection.png',
+      });
+    });
+  });
+});

packages/e2e-tests/tests/executions/display-execution.spec.js

@@ -0,0 +1,37 @@
+// @ts-check
+const { test, expect } = require('../../fixtures/index');
+
+test.describe('Executions page', () => {
+  test.beforeEach(async ({ page, executionsPage }) => {
+    await page.getByTestId('executions-page-drawer-link').click();
+    await page.getByTestId('execution-row').first().click();
+
+    await expect(page).toHaveURL(/\/executions\//);
+  });
+
+  test('displays data in by default', async ({ page, executionsPage }) => {
+    await expect(page.getByTestId('execution-step').last()).toBeVisible();
+    await expect(page.getByTestId('execution-step')).toHaveCount(2);
+
+    await executionsPage.screenshot({
+      path: 'Execution - data in.png',
+    });
+  });
+
+  test('displays data out', async ({ page, executionsPage }) => {
+    const executionStepCount = await page.getByTestId('execution-step').count();
+    for (let i = 0; i < executionStepCount; i++) {
+      await page.getByTestId('data-out-tab').nth(i).click();
+      await expect(page.getByTestId('data-out-panel').nth(i)).toBeVisible();
+
+      await executionsPage.screenshot({
+        path: `Execution - data out - ${i}.png`,
+        animations: 'disabled',
+      });
+    }
+  });
+
+  test('does not display error', async ({ page }) => {
+    await expect(page.getByTestId('error-tab')).toBeHidden();
+  });
+});

packages/e2e-tests/tests/executions/list-executions.spec.js

@@ -0,0 +1,17 @@
+// @ts-check
+const { test, expect } = require('../../fixtures/index');
+
+test.describe('Executions page', () => {
+  test.beforeEach(async ({ page, executionsPage }) => {
+    await page.getByTestId('executions-page-drawer-link').click();
+  });
+
+  test('displays executions', async ({ page, executionsPage }) => {
+    await page.getByTestId('executions-loader').waitFor({
+      state: 'detached',
+    });
+    await expect(page.getByTestId('execution-row').first()).toBeVisible();
+
+    await executionsPage.screenshot({ path: 'Executions.png' });
+  });
+});

packages/e2e-tests/tests/flow-editor/create-flow.spec.js

@@ -0,0 +1,204 @@
+// @ts-check
+const { FlowEditorPage } = require('../../fixtures/flow-editor-page');
+const { LoginPage } = require('../../fixtures/login-page');
+const { test, expect } = require('../../fixtures/index');
+
+test.describe.configure({ mode: 'serial' });
+
+let flowEditorPage;
+
+test.beforeAll(async ({ browser }) => {
+  const page = await browser.newPage();
+  await new LoginPage(page).login();
+  flowEditorPage = new FlowEditorPage(page);
+});
+
+test('create flow', async ({}) => {
+  await flowEditorPage.page.getByTestId('create-flow-button').click();
+  await expect(flowEditorPage.page).toHaveURL(/\/editor\/create/);
+  await expect(flowEditorPage.page).toHaveURL(
+    /\/editor\/[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}/
+  );
+});
+
+test('has two steps by default', async ({}) => {
+  await expect(flowEditorPage.page.getByTestId('flow-step')).toHaveCount(2);
+});
+
+test.describe('arrange Scheduler trigger', () => {
+  test.describe('choose app and event substep', () => {
+    test('choose application', async ({}) => {
+      await flowEditorPage.appAutocomplete.click();
+      await flowEditorPage.page
+        .getByRole('option', { name: 'Scheduler' })
+        .click();
+    });
+
+    test('choose an event', async ({}) => {
+      await expect(flowEditorPage.eventAutocomplete).toBeVisible();
+      await flowEditorPage.eventAutocomplete.click();
+      await flowEditorPage.page
+        .getByRole('option', { name: 'Every hour' })
+        .click();
+    });
+
+    test('continue to next step', async ({}) => {
+      await flowEditorPage.continueButton.click();
+    });
+
+    test('collapses the substep', async ({}) => {
+      await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
+      await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
+    });
+  });
+
+  test.describe('set up a trigger', () => {
+    test('choose "yes" in "trigger on weekends?"', async ({}) => {
+      await expect(flowEditorPage.trigger).toBeVisible();
+      await flowEditorPage.trigger.click();
+      await flowEditorPage.page.getByRole('option', { name: 'Yes' }).click();
+    });
+
+    test('continue to next step', async ({}) => {
+      await flowEditorPage.continueButton.click();
+    });
+
+    test('collapses the substep', async ({}) => {
+      await expect(flowEditorPage.trigger).not.toBeVisible();
+    });
+  });
+
+  test.describe('test trigger', () => {
+    test('show sample output', async ({}) => {
+      await expect(flowEditorPage.testOuput).not.toBeVisible();
+      await flowEditorPage.continueButton.click();
+      await expect(flowEditorPage.testOuput).toBeVisible();
+      await flowEditorPage.screenshot({
+        path: 'Scheduler trigger test output.png',
+      });
+      await flowEditorPage.continueButton.click();
+    });
+  });
+});
+
+test.describe('arrange Ntfy action', () => {
+  test.describe('choose app and event substep', () => {
+    test('choose application', async ({}) => {
+      await flowEditorPage.appAutocomplete.click();
+      await flowEditorPage.page.getByRole('option', { name: 'Ntfy' }).click();
+    });
+
+    test('choose an event', async ({}) => {
+      await expect(flowEditorPage.eventAutocomplete).toBeVisible();
+      await flowEditorPage.eventAutocomplete.click();
+      await flowEditorPage.page
+        .getByRole('option', { name: 'Send message' })
+        .click();
+    });
+
+    test('continue to next step', async ({}) => {
+      await flowEditorPage.continueButton.click();
+    });
+
+    test('collapses the substep', async ({}) => {
+      await expect(flowEditorPage.appAutocomplete).not.toBeVisible();
+      await expect(flowEditorPage.eventAutocomplete).not.toBeVisible();
+    });
+  });
+
+  test.describe('choose connection', () => {
+    test('choose connection list item', async ({}) => {
+      await flowEditorPage.connectionAutocomplete.click();
+      await flowEditorPage.page.getByRole('option').first().click();
+    });
+
+    test('continue to next step', async ({}) => {
+      await flowEditorPage.continueButton.click();
+    });
+
+    test('collapses the substep', async ({}) => {
+      await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
+    });
+  });
+
+  test.describe('set up action', () => {
+    test('fill topic and message body', async ({}) => {
+      await flowEditorPage.page
+        .getByTestId('parameters.topic-power-input')
+        .locator('[contenteditable]')
+        .fill('Topic');
+      await flowEditorPage.page
+        .getByTestId('parameters.message-power-input')
+        .locator('[contenteditable]')
+        .fill('Message body');
+    });
+
+    test('continue to next step', async ({}) => {
+      await flowEditorPage.continueButton.click();
+    });
+
+    test('collapses the substep', async ({}) => {
+      await expect(flowEditorPage.connectionAutocomplete).not.toBeVisible();
+    });
+  });
+
+  test.describe('test trigger', () => {
+    test('show sample output', async ({}) => {
+      await expect(flowEditorPage.testOuput).not.toBeVisible();
+      await flowEditorPage.page
+        .getByTestId('flow-substep-continue-button')
+        .first()
+        .click();
+      await expect(flowEditorPage.testOuput).toBeVisible();
+      await flowEditorPage.screenshot({
+        path: 'Ntfy action test output.png',
+      });
+      await flowEditorPage.continueButton.click();
+    });
+  });
+});
+
+test.describe('publish and unpublish', () => {
+  test('publish flow', async ({}) => {
+    await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
+    await expect(flowEditorPage.publishFlowButton).toBeVisible();
+    await flowEditorPage.publishFlowButton.click();
+    await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
+  });
+
+  test('shows read-only sticky snackbar', async ({}) => {
+    await expect(flowEditorPage.infoSnackbar).toBeVisible();
+    await flowEditorPage.screenshot({
+      path: 'Published flow.png',
+    });
+  });
+
+  test('unpublish from snackbar', async ({}) => {
+    await flowEditorPage.page
+      .getByTestId('unpublish-flow-from-snackbar')
+      .click();
+    await expect(flowEditorPage.infoSnackbar).not.toBeVisible();
+  });
+
+  test('publish once again', async ({}) => {
+    await expect(flowEditorPage.publishFlowButton).toBeVisible();
+    await flowEditorPage.publishFlowButton.click();
+    await expect(flowEditorPage.publishFlowButton).not.toBeVisible();
+  });
+
+  test('unpublish from layout top bar', async ({}) => {
+    await expect(flowEditorPage.unpublishFlowButton).toBeVisible();
+    await flowEditorPage.unpublishFlowButton.click();
+    await expect(flowEditorPage.unpublishFlowButton).not.toBeVisible();
+    await flowEditorPage.screenshot({
+      path: 'Unpublished flow.png',
+    });
+  });
+});
+
+test.describe('in layout', () => {
+  test('can go back to flows page', async ({}) => {
+    await flowEditorPage.page.getByTestId('editor-go-back-button').click();
+    await expect(flowEditorPage.page).toHaveURL('/flows');
+  });
+});