[FE] Automate click Edit map in OSM and control OSM opening (web OSM)

e2e/openOsm.spec.ts

@@ -0,0 +1,31 @@
+import { expect } from '@playwright/test';
+import { test } from './fixtures/test-options.ts';
+import { getProjects } from './page-objects/helperBase.ts';
+
+const projects = getProjects();
+
+for (const project of projects) {
+  test(`As Guest, I can go to ${project.title}, open map and open OSM at map coordinates`, async ({
+    context,
+    pageManager,
+  }) => {
+    await pageManager.atBrowser.openProject(project);
+    await pageManager.fromNavigationMenu.goToMap();
+
+    // TO DO: remove this action after 18582 issue is fixed
+    await pageManager.atMap.goToSpecificAreaByUrl(10.597, 53.9196, 27.5097, project);
+
+    const coordinates = await pageManager.atMap.getIntegerCoordinatesFromUrl();
+
+    // Start waiting for new page being opened
+    const newPagePromise = context.waitForEvent('page');
+
+    await (await pageManager.atToolBar.getButtonByText('Edit map in OSM')).click();
+    const newPage = await newPagePromise;
+    await pageManager.atMap.waitForUrlToMatchPattern(/openstreetmap/, newPage);
+    const osmCoordinates = await pageManager.atMap.getIntegerCoordinatesFromUrl(newPage, {
+      isMapInHash: true,
+    });
+    expect(osmCoordinates).toStrictEqual(coordinates);
+  });
+}

e2e/openOsmWithUser.spec.ts

@@ -0,0 +1,31 @@
+import { expect } from '@playwright/test';
+import { test } from './fixtures/test-options.ts';
+import { getProjects } from './page-objects/helperBase.ts';
+
+const projects = getProjects();
+
+for (const project of projects) {
+  test(`As User with no rights, I can go to ${project.title}, open map and open Rapid OSM editor at map coordinates`, async ({
+    context,
+    pageManager,
+  }) => {
+    await pageManager.atBrowser.openProject(project, { skipCookieBanner: true });
+    await pageManager.fromNavigationMenu.goToMap();
+
+    // TO DO: remove this action after 18582 issue is fixed
+    await pageManager.atMap.goToSpecificAreaByUrl(10.597, 53.9196, 27.5097, project);
+
+    const coordinates = await pageManager.atMap.getIntegerCoordinatesFromUrl();
+
+    // Start waiting for new page being opened
+    const newPagePromise = context.waitForEvent('page');
+
+    await (await pageManager.atToolBar.getButtonByText('Edit map in OSM')).click();
+    const newPage = await newPagePromise;
+    await pageManager.atMap.waitForUrlToMatchPattern(/rapideditor/, newPage);
+    const osmCoordinates = await pageManager.atMap.getIntegerCoordinatesFromUrl(newPage, {
+      isMapInHash: true,
+    });
+    expect(osmCoordinates).toStrictEqual(coordinates);
+  });
+}

e2e/page-objects/mapPage.ts

@@ -1,7 +1,12 @@
 import { expect } from '@playwright/test';
 import { HelperBase } from './helperBase';
+import type { Page } from '@playwright/test';
 import type { Project } from './helperBase';
 
+type UrlOptions = {
+  isMapInHash?: boolean;
+};
+
 export class MapCanvas extends HelperBase {
   /**
    * Splits the provided text by ':' and checks the resulting parts. The first part should match the expected label, and the second part should be a number that is not NaN. Additionally, if the value cannot be zero, this is also checked.
@@ -42,10 +47,11 @@ export class MapCanvas extends HelperBase {
   /**
    * This method waits for URL to match specific regexp pattern. It is mostly useful for testing maps.
    * @param pattern value for url to have inside in form of RegExp
+   * @param page playwright page to wait for
    */
 
-  async waitForUrlToMatchPattern(pattern: RegExp) {
-    await this.page.waitForURL(pattern);
+  async waitForUrlToMatchPattern(pattern: RegExp, page: Page = this.page) {
+    await page.waitForURL(pattern);
   }
 
   /**
@@ -112,4 +118,34 @@ export class MapCanvas extends HelperBase {
     ).not.toBeVisible();
     await expect(this.page.locator('#map-view')).toBeVisible();
   }
+
+  /**
+   * This method gets current url coordinates and returns its integer parts
+   * @param page playwright page to get url from
+   * @returns object with zoom, latitude, longitude. Integer values at string format
+   */
+
+  async getIntegerCoordinatesFromUrl(
+    page: Page = this.page,
+    { isMapInHash = false }: UrlOptions = {},
+  ) {
+    const urlObj = new URL(page.url());
+    const mapData = isMapInHash
+      ? urlObj.hash.replace('#map=', '')
+      : urlObj.searchParams.get('map');
+
+    expect(mapData).not.toBeNull();
+    expect(mapData).not.toBe('');
+
+    const [zoom, latitude, longitude] = mapData!.split('/').map(Number);
+    expect(zoom).not.toBeNaN();
+    expect(latitude).not.toBeNaN();
+    expect(longitude).not.toBeNaN();
+
+    return {
+      zoomInteger: Math.trunc(zoom),
+      latitudeInteger: Math.trunc(latitude),
+      longitudeInteger: Math.trunc(longitude),
+    };
+  }
 }