test: rewrite executions tests with playwright (#1207)

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/index.js

@@ -1,6 +1,7 @@
 const base = require('@playwright/test');
 const { ApplicationsPage } = require('./applications-page');
 const { ConnectionsPage } = require('./connections-page');
+const { ExecutionsPage } = require('./executions-page');
 
 exports.test = base.test.extend({
   applicationsPage: async ({ page }, use) => {
@@ -9,5 +10,8 @@ exports.test = base.test.extend({
   connectionsPage: async ({ page }, use) => {
     await use(new ConnectionsPage(page));
   },
+  executionsPage: async ({ page }, use) => {
+    await use(new ExecutionsPage(page));
+  },
 });
 exports.expect = base.expect;

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

@@ -0,0 +1,39 @@
+// @ts-check
+const { test, expect } = require('../../fixtures/index');
+
+test.describe('Executions page', () => {
+  test.beforeEach(async ({ page, executionsPage }) => {
+    await executionsPage.login();
+
+    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,19 @@
+// @ts-check
+const { test, expect } = require('../../fixtures/index');
+
+test.describe('Executions page', () => {
+  test.beforeEach(async ({ page, executionsPage }) => {
+    await executionsPage.login();
+
+    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/web/src/components/ExecutionStep/index.tsx

@@ -37,10 +37,12 @@ function ExecutionStepDate(props: Pick<IExecutionStep, 'createdAt'>) {
   const relativeCreatedAt = createdAt.toRelative();
 
   return (
-    <Tooltip title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}>
+    <Tooltip
+      title={createdAt.toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)}
+    >
       <Typography variant="caption" gutterBottom>
         {formatMessage('executionStep.executedAt', {
-          datetime: relativeCreatedAt
+          datetime: relativeCreatedAt,
         })}
       </Typography>
     </Tooltip>
@@ -117,7 +119,7 @@ export default function ExecutionStep(
           <SearchableJSONViewer data={executionStep.dataIn} />
         </TabPanel>
 
-        <TabPanel value={activeTabIndex} index={1}>
+        <TabPanel value={activeTabIndex} index={1} data-test="data-out-panel">
           <SearchableJSONViewer data={executionStep.dataOut} />
         </TabPanel>