diff --git a/cypress/e2e/location/location.spec.ts b/cypress/e2e/location/location.spec.ts
deleted file mode 100644
index 6588cde1a4..0000000000
--- a/cypress/e2e/location/location.spec.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
-Copyright 2022 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-///
-
-import { HomeserverInstance } from "../../plugins/utils/homeserver";
-import Chainable = Cypress.Chainable;
-
-describe("Location sharing", () => {
- let homeserver: HomeserverInstance;
-
- const selectLocationShareTypeOption = (shareType: string): Chainable => {
- return cy.findByTestId(`share-location-option-${shareType}`);
- };
-
- const submitShareLocation = (): void => {
- cy.findByRole("button", { name: "Share location" }).click();
- };
-
- beforeEach(() => {
- cy.window().then((win) => {
- win.localStorage.setItem("mx_lhs_size", "0"); // Collapse left panel for these tests
- });
- cy.startHomeserver("default").then((data) => {
- homeserver = data;
-
- cy.initTestUser(homeserver, "Tom");
- });
- });
-
- afterEach(() => {
- cy.stopHomeserver(homeserver);
- });
-
- it("sends and displays pin drop location message successfully", () => {
- let roomId: string;
- cy.createRoom({}).then((_roomId) => {
- roomId = _roomId;
- cy.visit("/#/room/" + roomId);
- });
-
- cy.openMessageComposerOptions().within(() => {
- cy.findByRole("menuitem", { name: "Location" }).click();
- });
-
- selectLocationShareTypeOption("Pin").click();
-
- cy.get("#mx_LocationPicker_map").click("center");
-
- submitShareLocation();
-
- cy.get(".mx_RoomView_body .mx_EventTile .mx_MLocationBody", { timeout: 10000 }).should("exist").click();
-
- // clicking location tile opens maximised map
- cy.get(".mx_LocationViewDialog_wrapper").should("exist");
-
- cy.closeDialog();
-
- cy.get(".mx_Marker").should("exist");
- });
-});
diff --git a/playwright/e2e/location/location.spec.ts b/playwright/e2e/location/location.spec.ts
new file mode 100644
index 0000000000..4b2d0f796d
--- /dev/null
+++ b/playwright/e2e/location/location.spec.ts
@@ -0,0 +1,67 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Locator, Page } from "@playwright/test";
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Location sharing", () => {
+ const selectLocationShareTypeOption = (page: Page, shareType: string): Locator => {
+ return page.getByTestId(`share-location-option-${shareType}`);
+ };
+
+ const submitShareLocation = (page: Page): Promise => {
+ return page.getByRole("button", { name: "Share location" }).click();
+ };
+
+ test.use({
+ displayName: "Tom",
+ });
+
+ test.beforeEach(async ({ page }) => {
+ await page.addInitScript(() => {
+ window.localStorage.setItem("mx_lhs_size", "0");
+ });
+ });
+
+ test("sends and displays pin drop location message successfully", async ({ page, user, app }) => {
+ const roomId = await app.createRoom({});
+ await page.goto(`/#/room/${roomId}`);
+
+ const composerOptions = await app.openMessageComposerOptions();
+ await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click();
+
+ await selectLocationShareTypeOption(page, "Pin").click();
+
+ await page.locator("#mx_LocationPicker_map").click();
+
+ await submitShareLocation(page);
+
+ await page.locator(".mx_RoomView_body .mx_EventTile .mx_MLocationBody").click({
+ position: {
+ x: 225,
+ y: 150,
+ },
+ });
+
+ // clicking location tile opens maximised map
+ await expect(page.getByRole("dialog")).toBeVisible();
+
+ await app.closeDialog();
+
+ await expect(page.locator(".mx_Marker")).toBeVisible();
+ });
+});
diff --git a/playwright/pages/ElementAppPage.ts b/playwright/pages/ElementAppPage.ts
index 1735877f5b..a984ba0d00 100644
--- a/playwright/pages/ElementAppPage.ts
+++ b/playwright/pages/ElementAppPage.ts
@@ -61,6 +61,13 @@ export class ElementAppPage {
return this.page.locator(".mx_CreateRoomDialog");
}
+ /**
+ * Close dialog currently open dialog
+ */
+ public async closeDialog(): Promise {
+ return this.page.getByRole("button", { name: "Close dialog", exact: true }).click();
+ }
+
/**
* Create a room with given options.
* @param options the options to apply when creating the room
@@ -74,4 +81,23 @@ export class ElementAppPage {
.then((res) => res.room_id);
}, options);
}
+
+ /**
+ * Get the composer element
+ * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
+ */
+ public async getComposer(isRightPanel?: boolean): Promise {
+ const panelClass = isRightPanel ? ".mx_RightPanel" : ".mx_RoomView_body";
+ return this.page.locator(`${panelClass} .mx_MessageComposer`);
+ }
+
+ /**
+ * Open the message composer kebab menu
+ * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
+ */
+ public async openMessageComposerOptions(isRightPanel?: boolean): Promise {
+ const composer = await this.getComposer(isRightPanel);
+ await composer.getByRole("button", { name: "More options", exact: true }).click();
+ return this.page.getByRole("menu");
+ }
}