Tweak tests to be less flaky

microbit-foundation · Mar 19, 2024 · be59f1d · be59f1d
1 parent 918d530
commit be59f1d
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git a/src/e2e/app.ts b/src/e2e/app.ts
@@ -84,7 +84,6 @@ class FileActionsMenu {
   }
 
   async delete() {
-    await this.deleteButton.waitFor();
     await this.deleteButton.click();
     await this.page.getByRole("button", { name: "Delete" }).click();
   }
@@ -102,9 +101,12 @@ class ProjectTabPanel {
     const fileActionsMenu = this.page.getByRole("button", {
       name: `${filename} file actions`,
     });
+    const actionMenu = new FileActionsMenu(this.page, filename);
     await fileActionsMenu.waitFor();
+    await fileActionsMenu.hover();
     await fileActionsMenu.click();
-    return new FileActionsMenu(this.page, filename);
+    await actionMenu.editButton.waitFor();
+    return actionMenu;
   }
 
   async chooseFile(filePathFromProjectRoot: string) {
@@ -312,10 +314,13 @@ export class App {
   }
 
   async typeInEditor(text: string): Promise<void> {
-    const textWithoutLastChar = text.slice(0, text.length - 1);
+    const textWithoutLastChar = text.slice(0, text.length - 3);
     await this.editorTextArea.fill(textWithoutLastChar);
-    // Last character is typed separately to trigger editor suggestions
-    await this.page.keyboard.press(text.slice(-1));
+    // Last few characters are typed separately to trigger editor suggestions
+    const [a, b, c] = text.slice(-3);
+    await this.page.keyboard.press(a, { delay: 500 });
+    await this.page.keyboard.press(b, { delay: 500 });
+    await this.page.keyboard.press(c, { delay: 500 });
   }
 
   async switchTab(tabName: "Project" | "API" | "Reference" | "Ideas") {
@@ -480,11 +485,16 @@ export class App {
   async closeAndExpectBeforeUnloadDialogVisible(
     visible: boolean
   ): Promise<void> {
-    this.page.on("dialog", async (dialog) => {
-      expect(dialog.type() === "beforeunload").toEqual(visible);
-      await dialog.dismiss();
-    });
-    this.page.close({ runBeforeUnload: true });
+    if (visible) {
+      this.page.on("dialog", async (dialog) => {
+        expect(dialog.type() === "beforeunload").toEqual(visible);
+
+        // Though https://playwright.dev/docs/api/class-page#page-event-dialog
+        // says that dialog.dismiss() is needed otherwise the page will freeze,
+        // in practice, it appears that the dialog is dismissed automatically.
+      });
+    }
+    await this.page.close({ runBeforeUnload: true });
   }
 
   async expectDocumentationTopLevelHeading(
@@ -536,8 +546,7 @@ export class App {
 
   async dragDropCodeEmbed(name: string, targetLine: number) {
     const codeExample = this.getCodeExample(name);
-    const editorLine = this.page
-      .getByTestId("editor")
+    const editorLine = this.editor
       .getByRole("textbox")
       .locator("div")
       .filter({ hasText: targetLine.toString() });
@@ -628,6 +637,7 @@ export class App {
 
   async expectCompletionOptions(expected: string[]): Promise<void> {
     const completions = this.page.getByRole("listbox", { name: "Completions" });
+    await completions.waitFor();
     const contents = await completions.innerText();
     expect(contents).toEqual(expected.join("\n"));
   }
@@ -637,13 +647,16 @@ export class App {
       .locator("div")
       .filter({ hasText: signature })
       .nth(2);
+    await activeOption.waitFor();
     await expect(activeOption).toBeVisible();
   }
 
   async acceptCompletion(name: string): Promise<void> {
     // This seems significantly more reliable than pressing Enter, though there's
     // no real-life issue here.
-    await this.editor.getByRole("option", { name }).click();
+    const option = this.editor.getByRole("option", { name });
+    await option.waitFor();
+    await option.click();
   }
 
   async followCompletionOrSignatureDocumentionLink(

diff --git a/src/e2e/autocomplete.test.ts b/src/e2e/autocomplete.test.ts
@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: MIT
  */
 import { test } from "./app-test-fixtures.js";
+import { expect } from "@playwright/test";
 
-const showFullSignature =
-  "show(image, delay=400, wait=True, loop=False, clear=False)";
+const showSignature = "show(image, delay=400, wait=";
 
 test.describe("autocomplete", () => {
   test("shows autocomplete as you type", async ({ app }) => {
@@ -44,7 +44,7 @@ test.describe("autocomplete", () => {
 
     await app.followCompletionOrSignatureDocumentionLink("API");
 
-    await app.expectActiveApiEntry(showFullSignature);
+    await app.expectActiveApiEntry(showSignature);
   });
 
   test("autocomplete can navigate to Reference toolkit content", async ({
@@ -62,7 +62,7 @@ test.describe("autocomplete", () => {
     await app.typeInEditor("from microbit import *\ndisplay.sho");
     await app.acceptCompletion("show");
 
-    await app.expectSignatureHelp(showFullSignature);
+    await app.expectSignatureHelp(showSignature);
   });
 
   test("does not insert brackets for import completion", async ({ app }) => {
@@ -79,11 +79,16 @@ test.describe("autocomplete", () => {
     // The closing bracket is autoinserted.
     await app.typeInEditor("from microbit import *\ndisplay.show(");
 
-    await app.expectSignatureHelp(showFullSignature);
-
+    const signatureHelp = app.page
+      .getByTestId("editor")
+      .locator("div")
+      .filter({ hasText: showSignature })
+      .nth(1);
+    await signatureHelp.waitFor();
+    await expect(signatureHelp).toBeVisible();
     await app.followCompletionOrSignatureDocumentionLink("API");
 
-    await app.expectActiveApiEntry(showFullSignature);
+    await app.expectActiveApiEntry(showSignature);
   });
 
   test("signature can navigate to Reference toolkit content", async ({
@@ -92,7 +97,7 @@ test.describe("autocomplete", () => {
     await app.selectAllInEditor();
     // The closing bracket is autoinserted.
     await app.typeInEditor("from microbit import *\ndisplay.show(");
-    await app.expectSignatureHelp(showFullSignature);
+    await app.expectSignatureHelp(showSignature);
     await app.followCompletionOrSignatureDocumentionLink("Help");
     await app.expectActiveApiEntry("Show");
   });

diff --git a/src/e2e/multiple-files.test.ts b/src/e2e/multiple-files.test.ts
@@ -68,9 +68,7 @@ test.describe("multiple-files", () => {
       acceptDialog: LoadDialogType.CONFIRM,
     });
     await app.editFile("module.py");
-
     await app.deleteFile("module.py");
-
     await app.expectEditorContainText(/Hello/);
   });