feat: add abstractions for flow builder create test

src/index.ts

@@ -18,6 +18,7 @@ export * from './services/ShopInfo';
 export * from './services/ImageHelper';
 export * from './types/ShopwareTypes';
 export * from './services/TestDataService';
+export * from './services/ShopwareUIHelpers';
 
 export { StorefrontPageObjects } from './page-objects/StorefrontPages';
 export { AdminPageObjects } from './page-objects/AdministrationPages';

src/page-objects/AdministrationPages.ts

@@ -138,16 +138,16 @@ export const test = base.extend<FixtureTypes>({
         await use(new FirstRunWizard(AdminPage, InstanceMeta));
     },
 
-    AdminFlowBuilderCreate: async ({ AdminPage }, use) => {
-        await use(new FlowBuilderCreate(AdminPage));
+    AdminFlowBuilderCreate: async ({ AdminPage, InstanceMeta }, use) => {
+        await use(new FlowBuilderCreate(AdminPage, InstanceMeta));
     },
 
-    AdminFlowBuilderListing: async ({ AdminPage }, use) => {
-        await use(new FlowBuilderListing(AdminPage));
+    AdminFlowBuilderListing: async ({ AdminPage, InstanceMeta }, use) => {
+        await use(new FlowBuilderListing(AdminPage, InstanceMeta));
     },
 
-    AdminFlowBuilderDetail: async ({ AdminPage }, use) => {
-        await use(new FlowBuilderDetail(AdminPage));
+    AdminFlowBuilderDetail: async ({ AdminPage, InstanceMeta }, use) => {
+        await use(new FlowBuilderDetail(AdminPage, InstanceMeta));
     },
 
     AdminDataSharing: async ({ AdminPage }, use) => {

src/page-objects/administration/FlowBuilderCreate.ts

@@ -1,17 +1,90 @@
-import type { Page, Locator } from '@playwright/test';
+import type { Locator, Page } from '@playwright/test';
 import type { PageObject } from '../../types/PageObject';
+import { satisfies } from 'compare-versions';
+import { HelperFixtureTypes } from '../../fixtures/HelperFixtures';
 
 export class FlowBuilderCreate implements PageObject {
 
+    //header
     public readonly saveButton: Locator;
     public readonly header: Locator;
+    public readonly smartBarHeader: Locator;
+    //tabs
+    public readonly generalTab: Locator;
+    public readonly flowTab: Locator;
+    //../general
+    public readonly nameField: Locator;
+    public readonly descriptionField: Locator;
+    public readonly priorityField: Locator;
+    public readonly activeSwitch: Locator;
+    //../flow
+    public readonly triggerSelectField: Locator;
+    public readonly modalAddButton: Locator;
+    public readonly sequenceSelectorConditionButton: Locator;
+    public readonly conditionSelectField: Locator;
+    public readonly sequenceSelectorActionButton: Locator;
+    public readonly actionSelectField: Locator;
+    public readonly selectFieldResultList: Locator;
+    public readonly trueBlockAddConditionButton: Locator;
+    public readonly trueBlockAddActionButton: Locator;
+    public readonly trueBlockActionSelectField: Locator;
+    public readonly trueBlockActionDescription: Locator;
+    public readonly mailSendModal: Locator;
+    public readonly mailSendModalTemplateSelectField: Locator;
+    public readonly falseBlockAddConditionButton: Locator;
+    public readonly falseBlockAddActionButton: Locator;
+    public readonly falseBlockActionSelectField: Locator;
+    public readonly falseBlockActionDescription: Locator;
+    public readonly tagModal: Locator;
+    public readonly tagModalTagsSelectField: Locator;
+    public readonly delayCard: Locator;
+    public readonly conditionRule: Locator;
+    public readonly sequenceSeparator: Locator;
 
-    constructor(public readonly page: Page) {
+    constructor(public readonly page: Page, public readonly instanceMeta: HelperFixtureTypes['InstanceMeta']) {
         this.saveButton = page.locator('.sw-flow-detail__save');
         this.header = page.locator('h2');
+        this.smartBarHeader = page.locator('.smart-bar__header');
+        this.generalTab = page.locator('.sw-flow-detail__tab-general');
+        this.triggerSelectField = page.locator('.sw-flow-detail-flow__trigger-card').getByRole('textbox');
+        if (satisfies(instanceMeta.version, '<6.7')) {
+            this.flowTab = page.locator('.sw-tabs__content').locator('.sw-flow-detail__tab-flow');
+            this.modalAddButton = page.locator('.sw-button--primary').getByText('Add action');
+        } else {
+            this.flowTab = page.locator('.mt-tabs').locator('.mt-tabs__item').getByText('Flow');
+            this.modalAddButton = page.locator('.mt-button--primary').getByText('Add action');
+        }
+        this.nameField = page.locator('.sw-flow-detail-general__general-name').getByLabel('Name');
+        this.descriptionField = page.locator('.sw-flow-detail-general__general-description').getByLabel('Description');
+        this.priorityField = page.locator('.sw-flow-detail-general__general-priority').getByLabel('Priority');
+        this.activeSwitch = page.locator('.sw-flow-detail-general__general-active').getByLabel('Active');
+        this.sequenceSelectorConditionButton = page.locator('.sw-flow-sequence-selector__actions').getByText('Add condition (IF)');
+        this.conditionSelectField = page.locator('.sw-flow-sequence-condition__select');
+        this.conditionRule = page.locator('.sw-flow-sequence-condition__rule-header');
+        this.sequenceSelectorActionButton = page.locator('.sw-flow-sequence-selector__actions').getByText('Add action (THEN)');
+        this.actionSelectField = page.locator('.sw-flow-sequence-action__content').locator('.sw-single-select__selection');
+        this.selectFieldResultList = page.locator('.sw-select-result-list__item-list');
+        this.trueBlockAddConditionButton = page.locator('.sw-flow-sequence__true-block').getByText('Add condition (IF)');
+        this.trueBlockAddActionButton = page.locator('.sw-flow-sequence__true-block').getByText('Add action (THEN)');
+        this.trueBlockActionSelectField = page.locator('.sw-flow-sequence__true-block').locator('.sw-single-select');
+        this.trueBlockActionDescription = page.locator('.sw-flow-sequence__true-block').locator('.sw-flow-sequence-action__action-description');
+        this.mailSendModal = page.locator('.sw-flow-mail-send-modal');
+        this.mailSendModalTemplateSelectField = page.locator('.sw-flow-mail-send-modal').locator('.sw-entity-single-select__selection');
+        this.falseBlockAddConditionButton = page.locator('.sw-flow-sequence__false-block').getByText('Add condition (IF)');
+        this.falseBlockAddActionButton = page.locator('.sw-flow-sequence__false-block').getByText('Add action (THEN)');
+        this.falseBlockActionSelectField = page.locator('.sw-flow-sequence__false-block').locator('.sw-single-select');
+        this.falseBlockActionDescription = page.locator('.sw-flow-sequence__false-block').locator('.sw-flow-sequence-action__actions');
+        this.tagModal = page.locator('.sw-flow-tag-modal');
+        this.tagModalTagsSelectField = page.locator('.sw-flow-tag-modal').locator('.sw-select__selection').getByLabel('Tags');
+        this.delayCard = page.locator('.sw-flow-delay-action__delay_card');
+        this.sequenceSeparator = page.locator('.sw-flow-detail-flow__position-connection');
     }
-
     url() {
         return '#/sw/flow/create/general';
     }
-}
+    async getSelectedTrigger(): Promise<string> {
+        await this.page.locator('.sw-flow-detail-flow__trigger-card').getByRole('textbox').hover();
+        const tooltip = await this.page.waitForSelector('.sw-tooltip');
+        return await tooltip.innerText();
+    }
+}

src/page-objects/administration/FlowBuilderDetail.ts

@@ -1,19 +1,25 @@
 import type { Page, Locator } from '@playwright/test';
 import type { PageObject } from '../../types/PageObject';
+import { FlowBuilderCreate } from './FlowBuilderCreate';
+import { satisfies } from 'compare-versions';
+import { HelperFixtureTypes } from '../../fixtures/HelperFixtures';
 
-export class FlowBuilderDetail implements PageObject {
+export class FlowBuilderDetail extends FlowBuilderCreate implements PageObject {
+
+    public readonly successMessage: Locator;
+
+    constructor(public readonly page: Page, public readonly instanceMeta: HelperFixtureTypes['InstanceMeta']) {
+        super(page, instanceMeta);
+        if (satisfies(instanceMeta.version, '<6.7')) {
+            this.successMessage = page.locator('.sw-alert__title');
+        } else {
+            this.successMessage = page.locator('.mt-banner__title');
+        }
 
-    public readonly saveButton: Locator;
-    public readonly generalTab: Locator;
-    public readonly flowTab: Locator;
 
-    constructor(public readonly page: Page) {
-        this.saveButton = page.locator('.sw-flow-detail__save');
-        this.generalTab = page.locator('.sw-flow-detail__tab-general');
-        this.flowTab = page.locator('.sw-flow-detail__tab-flow');
     }
 
-    url(flowId: string, tabName = 'general') {
+    url(flowId?: string, tabName = 'general') {
         return `#/sw/flow/detail/${flowId}/${tabName}`
     }
 }

src/page-objects/administration/FlowBuilderListing.ts

@@ -1,5 +1,7 @@
 import type { Page, Locator } from '@playwright/test';
 import type { PageObject } from '../../types/PageObject';
+import { satisfies } from 'compare-versions';
+import { HelperFixtureTypes } from '../../fixtures/HelperFixtures';
 
 export class FlowBuilderListing implements PageObject {
 
@@ -17,22 +19,22 @@ export class FlowBuilderListing implements PageObject {
     public readonly successAlert: Locator;
     public readonly successAlertMessage: Locator;
 
-    constructor(public readonly page: Page) {
-        this.createFlowButton = page.locator('.sw-flow-list__create');
-        this.firstFlowName = page.locator('.sw-data-grid__cell--name a').first();
-        this.firstFlowContextButton = page.locator('.sw-data-grid__actions-menu').first();
-        this.flowContextMenu = page.locator('.sw-context-menu__content');
-        this.contextMenuDownload = this.flowContextMenu.locator('.sw-flow-list__item-download');
-        this.contextMenuDuplicate = this.flowContextMenu.locator('.sw-flow-list__item-duplicate');
-        this.contextMenuEdit = this.flowContextMenu.locator('.sw-flow-list__item-edit');
-        this.contextMenuDelete = this.flowContextMenu.locator('.sw-flow-list__item-delete');
-        this.flowDownloadModal = page.locator('.sw-flow-download-modal');
-        this.flowDeleteButton = page.getByRole('dialog')
-            .filter( {hasText: 'If you delete this flow, no more actions will be performed for the trigger. Are you sure you want to delete this flow?'} )
-            .getByRole('button', { name: 'Delete' });
-        this.downloadFlowButton = page.getByRole('button', { name: 'Download flow' });
-        this.successAlert = page.locator('.sw-alert__body');
-        this.successAlertMessage = page.locator('.sw-alert__message');
+    constructor(public readonly page: Page, public readonly instanceMeta: HelperFixtureTypes['InstanceMeta']) {
+    this.createFlowButton = page.locator('.sw-flow-list__create');
+    this.firstFlowName = page.locator('.sw-data-grid__cell--name a').first();
+    this.firstFlowContextButton = page.locator('.sw-data-grid__actions-menu').first();
+    this.flowContextMenu = page.locator('.sw-context-menu__content');
+    this.contextMenuDownload = this.flowContextMenu.locator('.sw-flow-list__item-download');
+    this.contextMenuDuplicate = this.flowContextMenu.locator('.sw-flow-list__item-duplicate');
+    this.contextMenuEdit = this.flowContextMenu.locator('.sw-flow-list__item-edit');
+    this.contextMenuDelete = this.flowContextMenu.locator('.sw-flow-list__item-delete');
+    this.flowDownloadModal = page.locator('.sw-flow-download-modal');
+    this.flowDeleteButton = page.getByRole('dialog')
+        .filter( {hasText: 'If you delete this flow, no more actions will be performed for the trigger. Are you sure you want to delete this flow?'} )
+        .getByRole('button', { name: 'Delete' });
+    this.downloadFlowButton = page.getByRole('button', { name: 'Download flow' });
+    this.successAlert = page.locator('.sw-alert__body');
+    this.successAlertMessage = page.locator('.sw-alert__message');
     }
 
     url() {
@@ -42,12 +44,16 @@ export class FlowBuilderListing implements PageObject {
     async getLineItemByFlowName(flowName: string): Promise<Record<string, Locator>> {
         const lineItem = this.page.locator('.sw-data-grid__row').filter({ hasText: flowName });
         const flowSelectionCheckbox = lineItem.locator('.sw-data-grid__cell--selection').locator('.sw-field__checkbox');
-        const flowActiveCheckmark = lineItem.locator('.sw-data-grid__cell--active').locator('.icon--regular-checkmark-xs');
+        let flowActiveCheckmark
+        if (satisfies(this.instanceMeta.version, '<6.7')) {
+            flowActiveCheckmark = lineItem.locator('.sw-data-grid__cell--active').locator('.icon--regular-checkmark-xs');
+        } else {
+            flowActiveCheckmark = lineItem.locator('.sw-data-grid__cell--active').getByTestId('mt-icon__regular-checkmark-xs');
+        }
         const flowDisabledCheckmark = lineItem.locator('.sw-data-grid__cell--active').locator('.icon--regular-times-s');
         const flowNameText = lineItem.locator('.sw-data-grid__cell--name');
         const flowEventNameText = lineItem.locator('.sw-data-grid__cell--eventName');
         const flowContextMenuButton = lineItem.locator('.sw-data-grid__actions-menu');
-
         return {
             flowSelectionCheckbox: flowSelectionCheckbox,
             flowActiveCheckmark: flowActiveCheckmark,
@@ -57,4 +63,4 @@ export class FlowBuilderListing implements PageObject {
             flowContextMenuButton: flowContextMenuButton,
         }
     }
-}
+}

src/services/ShopwareUIHelpers.ts

@@ -0,0 +1,15 @@
+import { type Page, type Locator } from '@playwright/test';
+
+/**
+ * Returns the locator for a list item on a select field's result list.
+ *
+ * @param pageObject - Page object that contains the select field.
+ * @param selectFieldLocator - Locator for the select field.
+ * @param listItem - List item to select.
+ * @returns The locator for the list item.
+ */
+export const getResultListItem = async (pageObject: Page, selectField: Locator, listItem: string): Promise<Locator> => {
+    await selectField.click();
+    await pageObject.locator('.sw-select-result-list__item-list').waitFor({ state: 'visible' });
+    return pageObject.locator('.sw-select-result-list__content').getByRole('listitem').filter({ hasText: listItem });
+};

src/tasks/shop-admin-tasks.ts

@@ -6,6 +6,7 @@ import { CreateLinkTypeCategory } from './shop-admin/Category/CreateLinkTypeCate
 import { BulkEditProducts } from './shop-admin/Product/BulkEditProducts';
 import { BulkEditCustomers } from './shop-admin/Customers/BulkEditCustomers';
 import { AssignEntitiesToRule } from './shop-admin/Rule/AssignEntitiesToRule';
+import { CreateFlow } from './shop-admin/Flow/CreateFlow';
 
 export const test = mergeTests(
     SaveProduct,
@@ -14,4 +15,5 @@ export const test = mergeTests(
     BulkEditProducts,
     BulkEditCustomers,
     AssignEntitiesToRule,
+    CreateFlow,
 );

src/tasks/shop-admin/Flow/CreateFlow.ts

@@ -0,0 +1,49 @@
+import { test as base } from '@playwright/test';
+import type { Task } from '../../../types/Task';
+import type { FixtureTypes } from '../../../types/FixtureTypes';
+import { FlowConfig } from '../../../types/ShopwareTypes';
+import { getResultListItem } from '../../../services/ShopwareUIHelpers';
+
+export const CreateFlow = base.extend<{ CreateFlow: Task }, FixtureTypes>({
+    CreateFlow: async ({ AdminFlowBuilderCreate, AdminFlowBuilderDetail, AdminFlowBuilderListing, ShopAdmin }, use ) => {
+        const task = (flowConfig: FlowConfig) => {
+            return async function createFlow() {
+                await AdminFlowBuilderListing.createFlowButton.click();
+                // Fill out fields on general tab
+                await ShopAdmin.expects(AdminFlowBuilderCreate.smartBarHeader).toHaveText('New flow');
+                await AdminFlowBuilderCreate.nameField.fill(`${flowConfig.name}`);
+                await AdminFlowBuilderCreate.descriptionField.fill(`${flowConfig.description}`);
+                await AdminFlowBuilderCreate.priorityField.fill(`${flowConfig.priority}`);
+                if (flowConfig.active){
+                    await AdminFlowBuilderCreate.activeSwitch.click();
+                }
+                // Switch to flow tab
+                await AdminFlowBuilderCreate.flowTab.click();
+                // Select trigger
+                await AdminFlowBuilderCreate.triggerSelectField.fill(flowConfig.triggerSearchTerm);
+                await AdminFlowBuilderCreate.triggerSelectField.press('Enter');
+                // Add condition
+                await AdminFlowBuilderCreate.sequenceSelectorConditionButton.click();
+                await (await getResultListItem(AdminFlowBuilderCreate.page, AdminFlowBuilderCreate.conditionSelectField, `${flowConfig.condition}`)).click();
+                // Add action to condition true block
+                await AdminFlowBuilderCreate.trueBlockAddActionButton.click();
+                await (await getResultListItem(AdminFlowBuilderCreate.page, AdminFlowBuilderCreate.trueBlockActionSelectField, `${flowConfig.trueAction}`)).click();
+                await ShopAdmin.expects(AdminFlowBuilderCreate.mailSendModal).toBeVisible();
+                await (await getResultListItem(AdminFlowBuilderCreate.page, AdminFlowBuilderCreate.mailSendModalTemplateSelectField, `${flowConfig.trueActionIdentifier}`)).click();
+                await AdminFlowBuilderCreate.modalAddButton.click();
+                await ShopAdmin.expects(AdminFlowBuilderCreate.trueBlockActionDescription).toContainText(`${flowConfig.trueActionIdentifier}`);
+                // Add action to condition false block
+                await AdminFlowBuilderCreate.falseBlockAddActionButton.click();
+                await ShopAdmin.expects(AdminFlowBuilderCreate.falseBlockActionSelectField).toBeVisible();
+                await (await getResultListItem(AdminFlowBuilderCreate.page, AdminFlowBuilderCreate.falseBlockActionSelectField, `${flowConfig.falseAction}`)).click();
+                await ShopAdmin.expects(AdminFlowBuilderCreate.tagModal).toBeVisible();
+                await (await getResultListItem(AdminFlowBuilderCreate.page, AdminFlowBuilderCreate.tagModalTagsSelectField, `${flowConfig.falseActionIdentifier}`)).click();
+                await AdminFlowBuilderCreate.modalAddButton.click();
+                await ShopAdmin.expects(AdminFlowBuilderCreate.falseBlockActionDescription).toContainText(`Tag: ${flowConfig.falseActionIdentifier}`);
+                await AdminFlowBuilderCreate.saveButton.click();
+                await ShopAdmin.expects(AdminFlowBuilderDetail.successMessage).toHaveText('Success');
+            }
+        };
+        await use(task);
+    },
+});

src/types/ShopwareTypes.ts

@@ -257,6 +257,20 @@ export interface RuleAssignmentEntity {
     ruleType: RuleType
 }
 
+export interface FlowConfig {
+    name: string;
+    description: string;
+    priority: string;
+    active: boolean;
+    triggerSearchTerm: string
+    triggerLabel: string;
+    condition: string;
+    trueAction: string;
+    trueActionIdentifier: string;
+    falseAction: string;
+    falseActionIdentifier: string;
+}
+
 export interface CategoryData {
     name: string;
     categoryType: 'Link' | 'Page / List' | 'Structuring element / Entry point';