Migrate remaining E2E tests from Cypress to Playwright

Completes the migration of all example projects to use Playwright for E2E testing, ensuring consistent testing infrastructure across the monorepo and leveraging Playwright's improved performance and debugging capabilities.

Author: ScriptedAlchemy

.vscode/launch.json

@@ -0,0 +1,4 @@
+{
+    "version": "0.2.0",
+    "configurations": []
+}

angular-universal-ssr/cypress.env.json

@@ -1,95 +1,113 @@
-import { BaseMethods } from '../../../cypress-e2e/common/base';
+import { expect, Page } from '@playwright/test';
+
+import { BaseMethods } from '../../../playwright-e2e/common/base';
 import { baseSelectors, selectors, updatedSelectors } from '../../../cypress-e2e/common/selectors';
 import { Constants } from '../../../cypress-e2e/fixtures/constants';
 
 export class AngularUniversalSsrMethods extends BaseMethods {
-  public checkActiveTabNameConnection(activeTabName: string, componentName: string): void {
-    cy.get(selectors.angularUniversalSsrApp.activeTab)
-      .invoke('text')
-      .then((text: string) => {
-        if (text === activeTabName) {
-          this.checkElementWithTextPresence({
-            selector: baseSelectors.tags.appRoot,
-            text: componentName,
-            visibilityState: 'be.visible',
-          });
-        }
+  constructor(protected readonly page: Page) {
+    super(page);
+  }
+
+  async checkActiveTabNameConnection(activeTabName: string, componentName: string): Promise<void> {
+    const text = (await this.page.locator(selectors.angularUniversalSsrApp.activeTab).innerText()).trim();
+
+    if (text === activeTabName) {
+      await this.checkElementWithTextPresence({
+        selector: baseSelectors.tags.appRoot,
+        text: componentName,
+        visibilityState: 'be.visible',
       });
+    }
   }
 
-  public checkAddedCitiesBlockFunctionalityForMultipleHosts(
+  async checkAddedCitiesBlockFunctionalityForMultipleHosts(
     extraHost: number,
     addedCities: string[],
     addedCitySelector: string,
     selectedCityInfo: string[],
     selectedCityInfoSelector: string,
-  ): void {
-    this.clickElementWithText({
+  ): Promise<void> {
+    await this.clickElementWithText({
       selector: updatedSelectors.angularUniversalSsrApp.tab,
       text: Constants.elementsText.angularUniversalSsrApp.tabsNames[2],
     });
-    this.checkCitiesBlockFunctionality();
-    cy.origin(
-      Cypress.env(`localhost${extraHost}`),
-      { args: { addedCities, addedCitySelector, selectedCityInfoSelector, selectedCityInfo } },
-      ({ addedCities, addedCitySelector, selectedCityInfoSelector, selectedCityInfo }) => {
-        cy.visit('/');
-        addedCities.forEach((city: string, counter: number) => {
-          cy.get(addedCitySelector).contains(city).click();
-          cy.get(selectedCityInfoSelector).contains(selectedCityInfo[counter]).should('be.visible');
-          cy.reload(true);
-          cy.get(selectedCityInfoSelector).should('not.exist');
-        });
-      },
-    );
+
+    await this.checkCitiesBlockFunctionality();
+
+    const remotePage = await this.page.context().newPage();
+
+    try {
+      await remotePage.goto(`http://localhost:${extraHost}/`, { waitUntil: 'networkidle' });
+
+      for (let index = 0; index < addedCities.length; index++) {
+        const city = addedCities[index];
+        const expectedInfo = selectedCityInfo[index];
+
+        await remotePage.locator(addedCitySelector).filter({ hasText: city }).first().click();
+        await expect(remotePage.locator(selectedCityInfoSelector).filter({ hasText: expectedInfo })).toBeVisible();
+
+        await remotePage.reload({ waitUntil: 'networkidle' });
+        await expect(remotePage.locator(selectedCityInfoSelector).filter({ hasText: expectedInfo })).toHaveCount(0);
+      }
+    } finally {
+      await remotePage.close();
+    }
   }
 
-  public checkCitiesBlockFunctionality(): void {
-    Constants.elementsText.angularUniversalSsrApp.addedCities.forEach(
-      (city: string, counter: number) => {
-        this.clickElementWithText({
-          selector: updatedSelectors.angularUniversalSsrApp.addedCity,
-          text: city,
-        });
-        this.checkElementWithTextPresence({
-          selector: selectors.angularUniversalSsrApp.selectedCityInfo,
-          text: Constants.commonPhrases.angularUniversalSsrApp.selectedCityInfo[counter],
-          visibilityState: 'be.visible',
-        });
-        this.reloadWindow();
-        this.checkElementVisibility({
-          selector: selectors.angularUniversalSsrApp.selectedCityInfo,
-          isVisible: false,
-        });
-      },
-    );
+  async checkCitiesBlockFunctionality(): Promise<void> {
+    for (let index = 0; index < Constants.elementsText.angularUniversalSsrApp.addedCities.length; index++) {
+      const city = Constants.elementsText.angularUniversalSsrApp.addedCities[index];
+      const expectedInfo = Constants.commonPhrases.angularUniversalSsrApp.selectedCityInfo[index];
+
+      await this.clickElementWithText({
+        selector: updatedSelectors.angularUniversalSsrApp.addedCity,
+        text: city,
+      });
+
+      await this.checkElementWithTextPresence({
+        selector: selectors.angularUniversalSsrApp.selectedCityInfo,
+        text: expectedInfo,
+        visibilityState: 'be.visible',
+      });
+
+      await this.reloadWindow();
+      await this.checkElementVisibility({
+        selector: selectors.angularUniversalSsrApp.selectedCityInfo,
+        isVisible: false,
+      });
+    }
   }
 
-  public checkTextedElementsVisibility(elementsArray: string[], elementSelector: string): void {
-    elementsArray.forEach((element: string) => {
-      this.checkElementWithTextPresence({
+  async checkTextedElementsVisibility(elementsArray: string[], elementSelector: string): Promise<void> {
+    for (const element of elementsArray) {
+      await this.checkElementWithTextPresence({
         selector: elementSelector,
         text: element,
         visibilityState: 'be.visible',
       });
-    });
+    }
   }
 
-  public addNewListValue(): void {
-    this.checkElementQuantity({
+  async addNewListValue(): Promise<void> {
+    await this.checkElementQuantity({
       selector: baseSelectors.tags.coreElements.list,
       quantity: 3,
     });
-    this.fillField({
+
+    await this.fillField({
       selector: baseSelectors.tags.inputs.input,
       text: Constants.commonConstantsData.standardPhrase,
     });
-    this.checkInputValue(Constants.commonConstantsData.standardPhrase);
-    this.clickElementWithText({
+
+    await this.checkInputValue(Constants.commonConstantsData.standardPhrase);
+
+    await this.clickElementWithText({
       selector: baseSelectors.tags.coreElements.button,
       text: Constants.elementsText.angularUniversalSsrApp.inputButtonText,
     });
-    this.checkElementQuantity({
+
+    await this.checkElementQuantity({
       selector: baseSelectors.tags.coreElements.list,
       quantity: 4,
     });

angular-universal-ssr/e2e/methods/methods.ts

@@ -0,0 +1,74 @@
+import { expect, test } from '@playwright/test';
+
+import { BaseMethods } from '../../../playwright-e2e/common/base';
+import { baseSelectors, selectors, updatedSelectors } from '../../../cypress-e2e/common/selectors';
+import { Constants } from '../../../cypress-e2e/fixtures/constants';
+import { AngularUniversalSsrMethods } from '../methods/methods';
+
+test.describe('Angular Universal SSR - Client App', () => {
+  let basePage: BaseMethods;
+  let methodsPage: AngularUniversalSsrMethods;
+
+  test.beforeEach(async ({ page }) => {
+    basePage = new BaseMethods(page);
+    methodsPage = new AngularUniversalSsrMethods(page);
+
+    await basePage.openLocalhost({ number: 3000 });
+  });
+
+  test('Checks cities block visibility', async () => {
+    await basePage.checkElementVisibility({
+      selector: selectors.angularUniversalSsrApp.citiesBlock,
+    });
+  });
+
+  test('Checks cities block header visibility', async () => {
+    await basePage.checkElementWithTextPresence({
+      parentSelector: selectors.angularUniversalSsrApp.citiesBlock,
+      selector: baseSelectors.tags.coreElements.div,
+      text: Constants.commonPhrases.angularUniversalSsrApp.blockHeaderText,
+      visibilityState: 'be.visible',
+    });
+  });
+
+  test('Checks base cities names visibility', async () => {
+    await methodsPage.checkTextedElementsVisibility(
+      Constants.elementsText.angularUniversalSsrApp.addedCities,
+      updatedSelectors.angularUniversalSsrApp.addedCity,
+    );
+  });
+
+  test('Checks that both cities links can be clicked', async ({ page }) => {
+    const locator = page.locator(updatedSelectors.angularUniversalSsrApp.addedCity);
+    const count = await locator.count();
+    expect(count).toBeGreaterThan(0);
+
+    for (let index = 0; index < count; index++) {
+      await expect(locator.nth(index)).toBeEnabled();
+    }
+  });
+
+  test('Clicks on city by name and checks description with text appear', async () => {
+    const cities = Constants.elementsText.angularUniversalSsrApp.addedCities;
+
+    for (let index = 0; index < cities.length; index++) {
+      const city = cities[index];
+      const expected = Constants.commonPhrases.angularUniversalSsrApp.selectedCityInfo[index];
+
+      await basePage.clickElementWithText({
+        selector: updatedSelectors.angularUniversalSsrApp.addedCity,
+        text: city,
+      });
+
+      await basePage.checkElementWithTextPresence({
+        selector: selectors.angularUniversalSsrApp.selectedCityInfo,
+        text: expected,
+        visibilityState: 'be.visible',
+      });
+    }
+  });
+
+  test('Checks that selection of city info can be reverted after reload', async () => {
+    await methodsPage.checkCitiesBlockFunctionality();
+  });
+});