test: migrate apps folder to playwright (#1201)

packages/e2e-tests/.gitignore

@@ -2,3 +2,4 @@ node_modules/
 /test-results/
 /playwright-report/
 /playwright/.cache/
+/output

packages/e2e-tests/fixtures/applications-page.js

@@ -0,0 +1,12 @@
+const path = require('node:path');
+const { BasePage } = require('./base-page');
+
+export class ApplicationsPage extends BasePage {
+  async screenshot(options = {}) {
+    const { path: plainPath, ...restOptions } = options;
+
+    const computedPath = path.join('applications', plainPath);
+
+    return await super.screenshot({ path: computedPath, ...restOptions });
+  }
+}

packages/e2e-tests/fixtures/base-page.js

@@ -0,0 +1,34 @@
+const path = require('node:path');
+
+export class BasePage {
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor(page) {
+    this.page = page;
+  }
+
+  async clickAway() {
+    await this.page.locator('body').click({ position: { x: 0, y: 0 } });
+  }
+
+  async screenshot(options = {}) {
+    const { path: plainPath, ...restOptions } = options;
+
+    const computedPath = path.join('output/screenshots', plainPath);
+
+    return await this.page.screenshot({ path: computedPath, ...restOptions });
+  }
+
+  async login() {
+    await this.page.goto('/login');
+    await this.page
+      .getByTestId('email-text-field')
+      .fill(process.env.LOGIN_EMAIL);
+    await this.page
+      .getByTestId('password-text-field')
+      .fill(process.env.LOGIN_PASSWORD);
+
+    await this.page.getByTestId('login-button').click();
+  }
+}

packages/e2e-tests/fixtures/index.js

@@ -0,0 +1,9 @@
+const base = require('@playwright/test');
+const { ApplicationsPage } = require('./applications-page');
+
+exports.test = base.test.extend({
+  applicationsPage: async ({ page }, use) => {
+    await use(new ApplicationsPage(page));
+  },
+});
+exports.expect = base.expect;

packages/e2e-tests/package.json

@@ -5,7 +5,8 @@
   "private": true,
   "description": "The open source Zapier alternative. Build workflow automation without spending time and money.",
   "scripts": {
-    "open": "cypress open"
+    "open": "cypress open",
+    "playwright": "playwright test"
   },
   "contributors": [
     {
@@ -24,5 +25,8 @@
   "devDependencies": {
     "@playwright/test": "^1.36.2",
     "cypress": "^10.9.0"
+  },
+  "dependencies": {
+    "dotenv": "^16.3.1"
   }
 }

packages/e2e-tests/playwright.config.js

@@ -5,7 +5,7 @@ const { defineConfig, devices } = require('@playwright/test');
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// require('dotenv').config();
+require('dotenv').config();
 
 /**
  * @see https://playwright.dev/docs/test-configuration
@@ -21,14 +21,18 @@ module.exports = defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env.CI ? 'github' : 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
+    baseURL: process.env.CI
+      ? 'https://sandbox.automatisch.io'
+      : 'http://localhost:3001',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    testIdAttribute: 'data-test',
+    viewport: { width: 1280, height: 720 },
   },
 
   /* Configure projects for major browsers */
@@ -38,15 +42,15 @@ module.exports = defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
 
     /* Test against mobile viewports. */
     // {
@@ -76,4 +80,3 @@ module.exports = defineConfig({
   //   reuseExistingServer: !process.env.CI,
   // },
 });
-

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

@@ -0,0 +1,66 @@
+const { test, expect } = require('../../fixtures/index');
+
+test.describe('Apps page', () => {
+  test.beforeEach(async ({ page, applicationsPage }) => {
+    await applicationsPage.login();
+    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');
+      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');
+      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/example.spec.js

@@ -1,19 +0,0 @@
-// @ts-check
-const { test, expect } = require('@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 the URL to contain intro.
-  await expect(page).toHaveURL(/.*intro/);
-});