Playwright: Convert sliding-sync test to playwright (matrix-org#11989)

* Add method to send text message * Add dockerUrl to HomeServerConfig * Implement sliding sync proxy * Convert tests * Reload page after applying labs feature * Remove converted files * Remove timeout * Remove sliding-sync * Remove proxy import * Remove reference to proxy * wait for load * Update date * Convert enableLabsFeature to separate fixture * Enable feature in fixture * Skip over config and just write to local-storage * Rename fixture * Fix room header test * Use type inference * Override config instead of setting localstorage * Set default language * Always add labs feature * Put this one test into a separate describe block * Move labs lag within describe block

Author: MidhunSureshR

cypress/e2e/sliding-sync/sliding-sync.spec.ts

@@ -22,7 +22,6 @@ import PluginEvents = Cypress.PluginEvents;
 import PluginConfigOptions = Cypress.PluginConfigOptions;
 import { synapseDocker } from "./synapsedocker";
 import { dendriteDocker } from "./dendritedocker";
-import { slidingSyncProxyDocker } from "./sliding-sync";
 import { webserver } from "./webserver";
 import { docker } from "./docker";
 import { log } from "./log";
@@ -31,7 +30,7 @@ import { log } from "./log";
  * @type {Cypress.PluginConfig}
  */
 export default function (on: PluginEvents, config: PluginConfigOptions) {
- initPlugins(on, [docker, synapseDocker, dendriteDocker, slidingSyncProxyDocker, webserver, log], config);
+ initPlugins(on, [docker, synapseDocker, dendriteDocker, webserver, log], config);
  installLogsPrinter(on, {
  printLogsToConsole: "never",
 

cypress/plugins/index.ts

@@ -38,7 +38,6 @@ import "./iframes";
 import "./timeline";
 import "./network";
 import "./composer";
-import "./proxy";
 import "./axe";
 import "./promise";
 

cypress/plugins/sliding-sync/index.ts

@@ -22,14 +22,14 @@ const NAME = "Alice";
 test.describe("NotificationPanel", () => {
  test.use({
  displayName: NAME,
+ labsFlags: ["feature_notifications"],
  });
 
  test.beforeEach(async ({ app, user }) => {
  await app.client.createRoom({ name: ROOM_NAME });
  });
 
  test("should render empty state", async ({ page, app }) => {
- await app.labs.enableLabsFeature("feature_notifications");
  await app.viewRoomByName(ROOM_NAME);
 
  await page.getByRole("button", { name: "Notifications" }).click();

cypress/support/e2e.ts

@@ -25,10 +25,9 @@ test.describe("Room Header", () => {
  });
 
  test.describe("with feature_notifications enabled", () => {
- test.beforeEach(async ({ app }) => {
- await app.labs.enableLabsFeature("feature_notifications");
+ test.use({
+ labsFlags: ["feature_notifications"],
  });
-
  test("should render default buttons properly", async ({ page, app, user }) => {
  await app.client.createRoom({ name: "Test Room" });
  await app.viewRoomByName("Test Room");
@@ -101,9 +100,7 @@ test.describe("Room Header", () => {
  });
 
  test.describe("with feature_pinning enabled", () => {
- test.beforeEach(async ({ app }) => {
- await app.labs.enableLabsFeature("feature_pinning");
- });
+ test.use({ labsFlags: ["feature_pinning"] });
 
  test("should render the pin button for pinned messages card", async ({ page, app, user }) => {
  await app.client.createRoom({ name: "Test Room" });
@@ -126,9 +123,7 @@ test.describe("Room Header", () => {
  });
 
  test.describe("with a video room", () => {
- test.beforeEach(async ({ app }) => {
- await app.labs.enableLabsFeature("feature_video_rooms");
- });
+ test.use({ labsFlags: ["feature_video_rooms"] });
 
  const createVideoRoom = async (page: Page, app: ElementAppPage) => {
  await page.locator(".mx_LeftPanel_roomListContainer").getByRole("button", { name: "Add room" }).click();
@@ -142,33 +137,36 @@ test.describe("Room Header", () => {
  await app.viewRoomByName("Test video room");
  };
 
- test("should render buttons for room options, beta pill, invite, chat, and room info", async ({
- page,
- app,
- user,
- }) => {
- await app.labs.enableLabsFeature("feature_notifications");
- await createVideoRoom(page, app);
-
- const header = page.locator(".mx_LegacyRoomHeader");
- // Names (aria-label) of the buttons on the video room header
- const expectedButtonNames = [
- "Room options",
- "Video rooms are a beta feature Click for more info", // Beta pill
- "Invite",
- "Chat",
- "Room info",
- ];
-
- // Assert they are found and visible
- for (const name of expectedButtonNames) {
- await expect(header.getByRole("button", { name })).toBeVisible();
- }
-
- // Assert that there is not a button except those buttons
- await expect(header.getByRole("button")).toHaveCount(7);
-
- await expect(header).toMatchScreenshot("room-header-video-room.png");
+ test.describe("and with feature_notifications enabled", () => {
+ test.use({ labsFlags: ["feature_video_rooms", "feature_notifications"] });
+
+ test("should render buttons for room options, beta pill, invite, chat, and room info", async ({
+ page,
+ app,
+ user,
+ }) => {
+ await createVideoRoom(page, app);
+
+ const header = page.locator(".mx_LegacyRoomHeader");
+ // Names (aria-label) of the buttons on the video room header
+ const expectedButtonNames = [
+ "Room options",
+ "Video rooms are a beta feature Click for more info", // Beta pill
+ "Invite",
+ "Chat",
+ "Room info",
+ ];
+
+ // Assert they are found and visible
+ for (const name of expectedButtonNames) {
+ await expect(header.getByRole("button", { name })).toBeVisible();
+ }
+
+ // Assert that there is not a button except those buttons
+ await expect(header.getByRole("button")).toHaveCount(7);
+
+ await expect(header).toMatchScreenshot("room-header-video-room.png");
+ });
  });
 
  test("should render a working chat button which opens the timeline on a right panel", async ({