[AAE-7160] Setup Playwright in ADF - Storybook testing (#7537)

* [AAE-7160] Setup Playwright in ADF - Storybook testing

* New test cases for groups component. Reorganize the files

* Add to package.json scripts - npm run playwright

* Change amount of workers

* Change workesr to 2

e2e-playwright/models/component-titles.model.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+export enum ComponentTitles {
+    processServicesCloud = 'process-services-cloud',
+}

e2e-playwright/page-object/components/base.component.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Locator, Page } from '@playwright/test';
+import { PlaywrightBase } from '../playwright-base';
+
+export abstract class BaseComponent extends PlaywrightBase {
+    private rootElement: string;
+
+    constructor(page: Page,rootElement: string) {
+        super(page);
+        this.rootElement = rootElement;
+    }
+
+    /**
+     * Method which should be used across the repository, while creating
+     * reference to elements, which are in root element of component.
+     * @param cssLocator css selector as String. Need to be in the tree under the root element
+     * @param options if you want to localize it by text, then provide an optional hasText
+     * @returns Locator object
+     */
+     getChild(cssLocator: string, options?: { hasText: string | RegExp }): Locator {
+        return this.page.locator(`${this.rootElement} ${cssLocator}`, options);
+    }
+
+}

e2e-playwright/page-object/components/basic/error.component.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Page } from '@playwright/test';
+import { BaseComponent } from '../base.component';
+
+export class ErrorComponent extends BaseComponent {
+    private static rootElement = 'mat-error';
+    public content = this.getChild('');
+
+    constructor(page: Page) {
+        super(page, ErrorComponent.rootElement);
+    }
+}

e2e-playwright/page-object/components/basic/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+export * from './error.component';
+export * from './listbox.component';
+export * from './validation.component';

e2e-playwright/page-object/components/basic/listbox.component.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Page } from '@playwright/test';
+import { BaseComponent } from '../base.component';
+
+export class ListboxComponent extends BaseComponent {
+    private static rootElement = 'div[role=listbox]';
+    public allOptions = this.getChild('');
+    public oneOption = this.getChild('span >> span');
+
+    constructor(page: Page) {
+        super(page, ListboxComponent.rootElement);
+    }
+}

e2e-playwright/page-object/components/basic/validation.component.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Page } from '@playwright/test';
+import { BaseComponent } from '../base.component';
+
+export class TooltipComponent extends BaseComponent {
+    private static rootElement = 'mat-tooltip-component';
+    public content = this.getChild('div');
+
+    constructor(page: Page) {
+        super(page, TooltipComponent.rootElement);
+    }
+}

e2e-playwright/page-object/components/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+export * from './basic';
+export * from './base.component';

e2e-playwright/page-object/index.ts

@@ -0,0 +1,10 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+export * from './components';
+export * from './stories/base.storie';

e2e-playwright/page-object/playwright-base.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Page } from '@playwright/test';
+
+export abstract class PlaywrightBase {
+    public page: Page;
+
+    constructor(page: Page) {
+        this.page = page;
+    }
+}

e2e-playwright/page-object/stories/base.storie.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Page } from '@playwright/test';
+import { timeouts } from '../../utils/timeouts';
+import { ComponentTitles } from '../../models/component-titles.model';
+import { PlaywrightBase } from '../playwright-base';
+
+interface NavigateParameters { componentName: string; story: string };
+
+export class BaseStories extends PlaywrightBase {
+    private rootComponentTitle: string;
+
+    constructor(page: Page, rootComponentTitle: ComponentTitles) {
+        super(page);
+        this.rootComponentTitle = rootComponentTitle;
+    }
+
+    async navigateTo({ componentName, story }: NavigateParameters): Promise<void> {
+        await this.page.goto(`/iframe.html?id=${this.rootComponentTitle}-components-${componentName}--${story}`, {
+            waitUntil: 'networkidle',
+            timeout: timeouts.large
+        });
+    }
+}

e2e-playwright/playwright.config.ts

@@ -0,0 +1,101 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { PlaywrightTestConfig, ReporterDescription, WebServerConfig } from '@playwright/test';
+import { dotenvConfig } from '@alfresco/adf-cli/tooling';
+import { paths } from './utils/paths';
+import { timeouts } from './utils/timeouts';
+import path from 'path';
+
+export const getGlobalConfig = (): PlaywrightTestConfig => {
+    dotenvConfig();
+    const env = process.env;
+    const baseUrl = `${env.PLAYWRIGHT_STORYBOOK_E2E_HOST}:${env.PLAYWRIGHT_STORYBOOK_E2E_PORT}`;
+    let startCommand: string;
+    let report: ReporterDescription;
+
+    if (!!env.CI) {
+        startCommand = 'nx run stories:storybook';
+        report = ['html', { outputFolder: path.resolve(`../${paths.report}`), open: 'never' }];
+    } else {
+        startCommand = 'nx run stories:build-storybook && nx run stories:storybook';
+        report = ['html', { outputFolder: path.resolve(`../${paths.report}`), open: 'on-failure' }];
+    }
+
+    const webServer: WebServerConfig = {
+        command: startCommand,
+        // It's true, but watch on on localhost! If you'll have other app up and running then it'll use this app to run the tests.
+        // It won't check what application is currently running.
+        reuseExistingServer: true,
+        timeout: timeouts.webServer,
+        url: baseUrl
+    };
+
+    return {
+        timeout: timeouts.globalTest,
+        globalTimeout: timeouts.globalSpec,
+        testMatch: /.*\.e2e\.ts/,
+
+        expect: {
+            timeout: timeouts.large
+        },
+
+        /* Fail the build on CI if you accidentally left test.only in the source code. */
+        forbidOnly: !!env.CI,
+
+        /* Retry on CI only */
+        retries: env.CI ? 2 : 0,
+
+        /* Opt out of parallel tests on CI. */
+        workers: env.PLAYWRIGHT_WORKERS ? parseInt(env.PLAYWRIGHT_WORKERS, 0) : 1,
+
+        /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+        reporter: [['list'], report],
+        quiet: false,
+
+        /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+        use: {
+            actionTimeout: 0,
+            trace: 'retain-on-failure',
+            screenshot: 'only-on-failure',
+            headless: !!env.PLAYWRIGHT_HEADLESS ? (env.PLAYWRIGHT_HEADLESS === 'true') : !!env.CI,
+            ignoreHTTPSErrors: true,
+            bypassCSP: true,
+            browserName: 'chromium',
+            baseURL: baseUrl,
+            viewport: {
+                height: 900,
+                width: 1400
+            },
+            launchOptions: {
+                devtools: false,
+                args: [
+                    '--disable-web-security',
+                    '--no-sandbox'
+                ]
+            }
+        },
+
+        projects: [
+            {
+                name: 'Process Services Cloud : People',
+                testMatch: /.people-cloud*\.e2e\.ts/
+            },
+            {
+                name: 'Process Services Cloud : Groups',
+                testMatch: /.groups-cloud*\.e2e\.ts/
+            }
+        ],
+
+        webServer
+    };
+
+};
+
+export default getGlobalConfig();

e2e-playwright/process-services-cloud/components/group.component.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Page } from '@playwright/test';
+import { BaseComponent } from '../../page-object/components/base.component';
+import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components/basic';
+
+export class GroupComponent extends BaseComponent {
+    private static rootElement = 'adf-cloud-group';
+    public error = new ErrorComponent(this.page);
+    public tooltip = new TooltipComponent(this.page);
+    public listbox = new ListboxComponent(this.page);
+
+    public groupNaming = this.getChild('[data-automation-id="adf-cloud-group-chip-list"]');
+    public groupInput = this.getChild('[data-automation-id="adf-group-cloud-search-input"]');
+
+    constructor(page: Page, rootElement = GroupComponent.rootElement) {
+        super(page, rootElement);
+    }
+
+    public getUserLocator = (userName: string) => this.getChild(`[data-automation-id="adf-cloud-group-chip-${userName}"]`);
+
+}

e2e-playwright/process-services-cloud/components/people.component.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { Page } from '@playwright/test';
+import { BaseComponent } from '../../page-object/components/base.component';
+import { ErrorComponent, TooltipComponent, ListboxComponent } from '../../page-object/components/basic';
+
+export class PeopleComponent extends BaseComponent {
+    private static rootElement = 'adf-cloud-people';
+    public error = new ErrorComponent(this.page);
+    public tooltip = new TooltipComponent(this.page);
+    public listbox = new ListboxComponent(this.page);
+
+    public usersNaming = this.getChild('[data-automation-id="adf-cloud-people-chip-list"]');
+    public usersInput = this.getChild('[data-automation-id="adf-people-cloud-search-input"]');
+
+    constructor(page: Page, rootElement = PeopleComponent.rootElement) {
+        super(page, rootElement);
+    }
+
+    public getUserLocator = (userName: 'userName1' | 'userName2') => this.getChild(`[data-automation-id="adf-people-cloud-chip-${userName}"]`);
+
+}

e2e-playwright/process-services-cloud/fixtures/page-initialization.ts

@@ -0,0 +1,28 @@
+/* eslint-disable brace-style */
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { test as base } from '@playwright/test';
+import { BaseStories } from '../../page-object';
+import { ComponentTitles } from '../../models/component-titles.model';
+import { PeopleComponent } from '../components/people.component';
+import { GroupComponent } from '../components/group.component';
+
+interface Pages {
+    processServicesCloud: BaseStories;
+    peopleComponent: PeopleComponent;
+    groupComponent: GroupComponent;
+}
+
+export const test = base.extend<Pages>({
+    processServicesCloud: async ({ page }, use) => { await use(new BaseStories(page, ComponentTitles.processServicesCloud)); },
+    peopleComponent: async ({ page }, use) => { await use(new PeopleComponent(page)); },
+    groupComponent: async ({ page }, use) => { await use(new GroupComponent(page)); }
+});
+
+export { expect } from '@playwright/test';

e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts

@@ -0,0 +1,50 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { test, expect } from '../fixtures/page-initialization';
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('Groups component stories tests', () => {
+    test('Valid Preselected Groups', async ({ processServicesCloud, groupComponent }) => {
+        const expectedUsersName = `
+            Mock Group 1  cancel
+            Mock Group 2  cancel
+            Mock Group 3  cancel
+            Mock Group 4  cancel
+            Mock Group 5
+        `;
+
+        await processServicesCloud.navigateTo({ componentName: 'group', story: 'valid-preselected-groups' });
+
+        await expect(groupComponent.groupNaming).toContainText(expectedUsersName);
+    });
+
+    test('Mandatory Preselected Groups', async ({ processServicesCloud, groupComponent }) => {
+        const expectedUsersName = `
+            Mock Group 1
+            Mock Group 2  cancel
+            Mock Group 3
+        `;
+
+        await processServicesCloud.navigateTo({ componentName: 'group', story: 'mandatory-preselected-groups' });
+        await expect.soft(groupComponent.groupNaming).toContainText(expectedUsersName);
+
+        await groupComponent.getUserLocator('Mock Group 1').hover();
+        await expect(groupComponent.tooltip.content).toContainText('Mandatory');
+    });
+
+    test('Invalid Preselected Groups', async ({ processServicesCloud, groupComponent }) => {
+        const expectedWarningMessage = 'warning No group found with the name invalid groups';
+
+        await processServicesCloud.navigateTo({ componentName: 'group', story: 'invalid-preselected-groups' });
+
+        await expect(groupComponent.error.content).toContainText(expectedWarningMessage);
+    });
+
+});

e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts

@@ -0,0 +1,69 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+import { test, expect } from '../fixtures/page-initialization';
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('People component stories tests', () => {
+    test('Valid Preselected Users', async ({ processServicesCloud, peopleComponent }) => {
+        const expectedUsersName = `
+            first-name-1 last-name-1  cancel
+            first-name-2 last-name-2  cancel
+            first-name-3 last-name-3  cancel
+            first-name-4 last-name-4  cancel
+            first-name-5 last-name-5
+        `;
+
+        await processServicesCloud.navigateTo({ componentName: 'people', story: 'valid-preselected-users' });
+
+        await expect(peopleComponent.usersNaming).toContainText(expectedUsersName);
+    });
+
+    test('Mandatory Preselected Users', async ({ processServicesCloud, peopleComponent }) => {
+        const expectedUsersName = `
+            first-name-1 last-name-1
+            first-name-2 last-name-2  cancel
+        `;
+
+        await processServicesCloud.navigateTo({ componentName: 'people', story: 'mandatory-preselected-users' });
+        await peopleComponent.getUserLocator('userName1').hover();
+
+        await expect.soft(peopleComponent.usersNaming).toContainText(expectedUsersName);
+        await expect(peopleComponent.tooltip.content).toContainText('Mandatory');
+    });
+
+    test('Invalid Preselected Users', async ({ processServicesCloud, peopleComponent }) => {
+        const expectedWarningMessage = 'warning No user found with the username invalid user';
+
+        await processServicesCloud.navigateTo({ componentName: 'people', story: 'invalid-preselected-users' });
+
+        await expect(peopleComponent.error.content).toContainText(expectedWarningMessage);
+    });
+
+    test('Excluded Users', async ({ processServicesCloud, peopleComponent }) => {
+        const expectedExcludedUsers = `
+            mocked-user-id-2
+            mocked-user-id-3
+        `;
+
+        await processServicesCloud.navigateTo({ componentName: 'people', story: 'excluded-users' });
+        await peopleComponent.usersInput.type('user');
+
+        await expect(peopleComponent.listbox.allOptions).not.toContainText(expectedExcludedUsers);
+    });
+
+    test('No Users', async ({ processServicesCloud, peopleComponent }) => {
+        const expectedInformation = 'No user found with the username user';
+
+        await processServicesCloud.navigateTo({ componentName: 'people', story: 'no-users' });
+        await peopleComponent.usersInput.type('user');
+
+        await expect(peopleComponent.listbox.oneOption).toContainText(expectedInformation);
+    });
+});

e2e-playwright/utils/paths.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+const rootFolder = 'e2e-output/playwright-data';
+
+export const paths = {
+    rootFolder,
+    files: `${rootFolder}/downloads`,
+    report: `${rootFolder}/report`,
+    userStates: `${rootFolder}/user-states`
+};

e2e-playwright/utils/timeouts.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright © 2005 - 2021 Alfresco Software, Ltd. All rights reserved.
+ *
+ * License rights for this program may be obtained from Alfresco Software, Ltd.
+ * pursuant to a written agreement and any use of this program without such an
+ * agreement is prohibited.
+ */
+
+export const timeouts = {
+    tiny: 500,
+    short: 1000,
+    medium: 5000,
+    large: 10000,
+    globalTest: 30 * 1000,
+    webServer: 120 * 1000,
+    globalSpec: 60 * 10 * 1000
+};