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/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,22 @@
+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 });
+  }
+}

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

@@ -0,0 +1,16 @@
+const path = require('node:path');
+const { BasePage } = require('./base-page');
+
+export class ConnectionsPage extends BasePage {
+  async screenshot(options = {}) {
+    const { path: plainPath, ...restOptions } = options;
+
+    const computedPath = path.join('connections', plainPath);
+
+    return await super.screenshot({ path: computedPath, ...restOptions });
+  }
+
+  async clickAddConnectionButton() {
+    await this.page.getByTestId('add-connection-button').click();
+  }
+}

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

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

packages/e2e-tests/fixtures/flow-editor-page.js

@@ -0,0 +1,27 @@
+const path = require('node:path');
+const { BasePage } = require('./base-page');
+
+export class FlowEditorPage extends BasePage {
+  constructor(page) {
+    super(page);
+    this.appAutocomplete = this.page.getByTestId('choose-app-autocomplete');
+    this.eventAutocomplete = this.page.getByTestId('choose-event-autocomplete');
+    this.continueButton = this.page.getByTestId('flow-substep-continue-button');
+    this.connectionAutocomplete = this.page.getByTestId(
+      'choose-connection-autocomplete'
+    );
+    this.testOuput = this.page.getByTestId('flow-test-substep-output');
+    this.unpublishFlowButton = this.page.getByTestId('unpublish-flow-button');
+    this.publishFlowButton = this.page.getByTestId('publish-flow-button');
+    this.infoSnackbar = this.page.getByTestId('flow-cannot-edit-info-snackbar');
+    this.trigger = this.page.getByLabel('Trigger on weekends?');
+  }
+
+  async screenshot(options = {}) {
+    const { path: plainPath, ...restOptions } = options;
+
+    const computedPath = path.join('flow-editor', plainPath);
+
+    return await super.screenshot({ path: computedPath, ...restOptions });
+  }
+}

packages/e2e-tests/fixtures/index.js

@@ -0,0 +1,28 @@
+const base = require('@playwright/test');
+const { ApplicationsPage } = require('./applications-page');
+const { ConnectionsPage } = require('./connections-page');
+const { ExecutionsPage } = require('./executions-page');
+const { FlowEditorPage } = require('./flow-editor-page');
+const { LoginPage } = require('./login-page');
+
+exports.test = base.test.extend({
+  page: async ({ page }, use) => {
+    await new LoginPage(page).login();
+
+    await use(page);
+  },
+  applicationsPage: async ({ page }, use) => {
+    await use(new ApplicationsPage(page));
+  },
+  connectionsPage: async ({ page }, use) => {
+    await use(new ConnectionsPage(page));
+  },
+  executionsPage: async ({ page }, use) => {
+    await use(new ExecutionsPage(page));
+  },
+  flowEditorPage: async ({ page }, use) => {
+    await use(new FlowEditorPage(page));
+  },
+});
+
+exports.expect = base.expect;

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

@@ -0,0 +1,27 @@
+const path = require('node:path');
+const { BasePage } = require('./base-page');
+
+export class LoginPage extends BasePage {
+  /**
+   * @param {import('@playwright/test').Page} page
+   */
+  constructor(page) {
+    super(page);
+
+    this.page = page;
+
+    this.emailTextField = this.page.getByTestId('email-text-field');
+    this.passwordTextField = this.page.getByTestId('password-text-field');
+    this.loginButton = this.page.getByTestId('login-button');
+  }
+
+  path = '/login';
+
+  async login() {
+    await this.page.goto(this.path);
+    await this.emailTextField.fill(process.env.LOGIN_EMAIL);
+    await this.passwordTextField.fill(process.env.LOGIN_PASSWORD);
+
+    await this.loginButton.click();
+  }
+}