Add e2e tests

.env

@@ -0,0 +1,9 @@
+BASE_URL=http://localhost:4200/
+TIMEOUT=20
+EXPECT_TIMEOUT=5
+SCREEN_WIDTH=1280,
+SCREEN_HEIGHT=720,
+OUTPUT_DIR=./test-output
+HEADLESS=true
+# TEST_TAG=[SMOKE]
+# PWDEBUG=console npm run test

.gitignore

@@ -50,4 +50,6 @@ Thumbs.db
 .angular
 test-results/
 playwright-report/
-.ngapimock
+.ngapimock
+allure-results/
+test-output/

apps/golden-sample-app-e2e/data/credentials.ts

@@ -0,0 +1,11 @@
+import { User } from './data-types/user';
+
+export const defaultUser: User = {
+  username: '<USER_NAME>',
+  password: '<PASSWORD>',
+};
+
+export const wrongUser: User = {
+  username: 'someone',
+  password: 'some_password',
+};

apps/golden-sample-app-e2e/data/data-types/user.ts

@@ -0,0 +1,4 @@
+export interface User {
+  username: string;
+  password: string;
+}

apps/golden-sample-app-e2e/page-objects/pages/_base-page.ts

@@ -0,0 +1,42 @@
+import { expect, Locator, Page, test, TestInfo } from '@playwright/test';
+import { LocatorOptions } from '../../utils/locator-options';
+
+export abstract class BasePage {
+  url: string;
+  title: string | RegExp;
+
+  constructor(
+    public page: Page,
+    public testInfo: TestInfo,
+    options?: Partial<{ url: string; title: string | RegExp }>,
+  ) {
+    this.url = options?.url || '';
+    this.title = options?.title || '';
+  }
+
+  async open() {
+    await test.step(`Open ${this.getPageName(this)} page`, async () => {
+      await this.page.goto(this.url);
+    });
+  }
+
+  $(selector: string, options?: LocatorOptions): Locator {
+    return this.page.locator(selector, options);
+  }
+
+  async toBeOpened() {
+    if (this.url) {
+      await expect(this.page).toHaveURL(this.url);
+    }
+    if (this.title) {
+      await expect(this.page).toHaveTitle(this.title);
+    }
+  }
+
+  protected getPageName(page: object): string {
+    const pageName = page.constructor.name;
+    return pageName.toLowerCase().endsWith('page')
+      ? pageName.substring(0, pageName.length - 4)
+      : pageName;
+  }
+}

apps/golden-sample-app-e2e/page-objects/pages/identity-page.ts

@@ -0,0 +1,20 @@
+import { User } from '../../data/data-types/user';
+import { BasePage } from './_base-page';
+import { defaultUser } from '../../data/credentials';
+
+export class IdentityPage extends BasePage {
+  userName = this.$('#username');
+  userNameLabel = this.$('label[for="username"]');
+  password = this.$('#password');
+  passwordLabel = this.$('label[for="password"]');
+  errorMessage = this.$('#input-error');
+  loginButton = this.$('.btn[value="Log in"]');
+  loginForm = this.$('.identity-container__panel');
+
+  async login(user: User = defaultUser) {
+    await this.open();
+    await this.userName.fill(user.username);
+    await this.password.fill(user.password);
+    await this.loginButton.click();
+  }
+}

apps/golden-sample-app-e2e/page-objects/test-runner.ts

@@ -0,0 +1,15 @@
+import { test as baseTest } from '@playwright/test';
+import { IdentityPage } from './pages/identity-page';
+import { testConfig } from '../test-config';
+import 'dotenv/config';
+
+export const test = baseTest.extend<{
+  // Pages
+  identityPage: IdentityPage;
+}>({
+  identityPage: async ({ page }, use, testInfo) => {
+    await use(
+      new IdentityPage(page, testInfo, { url: testConfig.appBaseUrl() }),
+    );
+  },
+});

apps/golden-sample-app-e2e/page-objects/ui-components/_base-component.ts

@@ -0,0 +1,22 @@
+import { Locator, Page } from '@playwright/test';
+import { LocatorOptions } from '../../utils/locator-options';
+import { isLocator } from 'apps/golden-sample-app-e2e/utils/playwright-utils';
+
+export abstract class BaseComponent {
+  get page(): Page { 
+    if (isLocator(this.accessor)) 
+      throw new Error('Root locator is not defined');
+    return this.accessor as Page; 
+  }
+  get root(): Locator {
+    if (!isLocator(this.accessor)) 
+      throw new Error('Root locator is not defined');
+    return this.accessor as Locator; 
+  }
+
+  constructor(private accessor: Page | Locator) { }
+
+  $(selector: string, options?: LocatorOptions): Locator {
+    return this.root.locator(selector, options);
+  }
+}

apps/golden-sample-app-e2e/specs/login.spec.ts

@@ -0,0 +1,43 @@
+import { expect } from '@playwright/test';
+import { test } from '../page-objects/test-runner';
+import { wrongUser } from '../data/credentials';
+
+const i18n = {
+  identity: {
+    username: 'Username or email',
+    password: 'Password',
+    loginButton: 'Log in',
+    error:
+      'Incorrect username or passwordPlease check your credentials and try again.',
+  },
+};
+
+test.describe.configure({ mode: 'parallel' });
+
+test.describe('@feature @i18n Login tests', () => {
+
+  test('Empty user name', async ({ identityPage }) => {
+    identityPage.open();
+    await test.step('Validate Input fields labels', async () => {
+      await expect.soft(identityPage.userNameLabel, { message: `Expect Username label: "${i18n.identity.username}"` })
+        .toHaveText(i18n.identity.username);
+      await expect.soft(identityPage.passwordLabel, { message: `Expect Password label: "${i18n.identity.password}"` })
+        .toHaveText(i18n.identity.password);
+    });
+    await test.step(
+      `Fill in credentials: "${wrongUser.username}/${wrongUser.password}"`,
+      async () => {
+        await identityPage.userName.fill(wrongUser.username);
+        await identityPage.password.fill(wrongUser.password);
+      },
+    );
+    await test.step('Try to login"', async () => {
+      await identityPage.loginButton.click();
+    });
+    await test.step('Validate Failed login error message', async () => {
+      await expect(identityPage.errorMessage, { message: `Expect error message: "${i18n.identity.error}"` })
+        .toHaveText(i18n.identity.error);
+    });
+  });
+
+});

apps/golden-sample-app-e2e/test-config.ts

@@ -0,0 +1,23 @@
+import { User } from './data/data-types/user';
+import config from '../../playwright.config';
+import 'dotenv/config';
+
+export class TestConfig {
+  baseUrl: string = config.use?.baseURL || 'BASE URL UNDEFINED';
+  locale: string = 'en';
+
+  appBaseUrl() {
+    return this.baseUrl;
+  }
+
+  init(
+    options: Partial<{ user: User; url: string; }> = {
+      url: this.baseUrl,
+    },
+  ) {
+    if (options.url) {
+      this.baseUrl = options.url;
+    }
+  }
+}
+export const testConfig = new TestConfig();

apps/golden-sample-app-e2e/utils/locator-options.ts

@@ -0,0 +1,8 @@
+import { Locator } from '@playwright/test';
+
+export interface LocatorOptions {
+  has?: Locator;
+  hasNot?: Locator;
+  hasNotText?: string | RegExp;
+  hasText?: string | RegExp;
+}

apps/golden-sample-app-e2e/utils/playwright-utils.ts

@@ -0,0 +1,5 @@
+import { Locator } from '@playwright/test';
+
+export const isLocator = (param: any): param is Locator =>
+  typeof param === 'object' && param.toString().split('@')[0] === 'Locator';
+

apps/golden-sample-app-e2e/utils/time-utils.ts

@@ -0,0 +1,6 @@
+export const timeID = () =>
+  new Date()
+    .toISOString()
+    .split('.')[0]
+    .replace(/T/g, '-')
+    .replace(/:/g, '-');

apps/golden-sample-app-e2e/utils/timer-utils.ts

@@ -0,0 +1,9 @@
+export async function waitDelay(timeoutMSec: number) {
+  await new Promise(function (r) {
+    setTimeout(r, timeoutMSec);
+  });
+}
+
+export async function waitSeconds(timeoutSec: number) {
+  await waitDelay(timeoutSec * 1000);
+}

global-setup.ts

@@ -0,0 +1,8 @@
+import type { FullConfig } from '@playwright/test';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function globalSetup(config: FullConfig) {
+  // Add your global setup code here
+}
+
+export default globalSetup;