ci(web): set up playwright (#1342)

* wip * env setting * revert webServer setting * fix: login logic * fix: install only chromium * fix: extend timeout * fix * fix * fix: get report * fix path * fix * fix * fix * fix * test * test * fix * fix: pass secrets * fix: e2e tests * ci: setup e2e workflow cron * test * Revert "test" This reverts commit 8fab00a. * fix: job name * fix: use cache * rename * test * Update .github/workflows/e2e_web.yml Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Revert "test" This reverts commit 35acab6. --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
reearth · Jan 9, 2025 · 6253e15 · 6253e15
1 parent 2943e6f
commit 6253e15
Show file tree

Hide file tree

Showing 18 changed files with 156 additions and 150 deletions.
diff --git a/.github/workflows/e2e_web.yml b/.github/workflows/e2e_web.yml
@@ -0,0 +1,51 @@
+name: Web E2E test
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "0 3 * * 1-5"
+jobs:
+  e2e:
+    name: playwright
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: web
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: yarn
+          cache-dependency-path: "**/yarn.lock"
+      - name: Install dependencies
+        run: yarn install
+      - name: Get installed Playwright version
+        id: playwright-version
+        run: echo "version=$( node -e "console.log(require('@playwright/test/package.json').version)" )" >> $GITHUB_OUTPUT
+      - name: Cache Playwright browsers
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: "${{ runner.os }}-playwright-${{ steps.playwright-version.outputs.version }}"
+          restore-keys: |
+            ${{ runner.os }}-playwright-
+      - name: Install Playwright system dependencies and browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: yarn playwright install --with-deps chromium
+      - name: Install Playwright system dependencies
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        run: yarn playwright install-deps chromium
+      - name: Run Playwright tests
+        run: yarn e2e
+        env:
+          REEARTH_CMS_API: https://api.cms.test.reearth.dev/api
+          REEARTH_CMS_E2E_BASEURL: https://cms.test.reearth.dev
+          REEARTH_CMS_E2E_USERNAME: ${{ secrets.REEARTH_WEB_E2E_USERNAME }}
+          REEARTH_CMS_E2E_PASSWORD: ${{ secrets.REEARTH_WEB_E2E_PASSWORD }}
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: test-results
+          path: web/test-results/
+          retention-days: 7
diff --git a/web/.gitignore b/web/.gitignore
@@ -57,3 +57,4 @@ amplifytools.xcconfig
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/e2e/utils/.auth
diff --git a/web/e2e/auth.setup.ts b/web/e2e/auth.setup.ts
@@ -0,0 +1,21 @@
+import { test, expect } from "@playwright/test";
+
+import { baseURL, authFile } from "../playwright.config";
+
+import { config } from "./utils/config";
+
+const { userName, password } = config;
+
+test("authenticate", async ({ page }) => {
+  expect(userName).toBeTruthy();
+  expect(password).toBeTruthy();
+  await page.goto(baseURL);
+  await page.getByPlaceholder("username/email").fill(userName as string);
+  await page.getByPlaceholder("your password").fill(password as string);
+  await page.getByText("LOG IN").click();
+  await page.waitForURL(baseURL);
+  await expect(page.getByRole("button", { name: "New Project" }).first()).toBeVisible({
+    timeout: 10 * 1000,
+  });
+  await page.context().storageState({ path: authFile });
+});
diff --git a/web/e2e/dashboard.spec.ts b/web/e2e/dashboard.spec.ts
diff --git a/web/e2e/project/accessibility.spec.ts b/web/e2e/project/accessibility.spec.ts
@@ -1,6 +1,8 @@
 import { closeNotification } from "@reearth-cms/e2e/common/notification";
 import { expect, test } from "@reearth-cms/e2e/utils";
 
+import { config } from "../utils/config";
+
 import { createProject, deleteProject } from "./utils/project";
 
 test.beforeEach(async ({ reearth, page }) => {
@@ -14,6 +16,7 @@ test.afterEach(async ({ page }) => {
 
 test("Update settings on Accesibility page has succeeded", async ({ page }) => {
   await page.getByText("Accessibility").click();
+  await expect(page.getByRole("textbox")).not.toBeEmpty();
   const alias = await page.getByRole("textbox").inputValue();
   await expect(page.getByRole("button", { name: "Save changes" })).toBeDisabled();
   await page.getByText("Private").click();
@@ -24,7 +27,7 @@ test("Update settings on Accesibility page has succeeded", async ({ page }) => {
   await expect(page.locator("form")).toContainText("Public");
   await expect(page.getByRole("textbox")).toHaveValue(alias);
   await expect(page.getByRole("switch")).toHaveAttribute("aria-checked", "true");
-  await expect(page.locator("tbody")).toContainText(`http://localhost:8080/api/p/${alias}/assets`);
+  await expect(page.locator("tbody")).toContainText(`${config.api}/p/${alias}/assets`);
   await expect(page.getByRole("button", { name: "Save changes" })).toBeDisabled();
 });
 

diff --git a/web/e2e/project/item/fields/asset.spec.ts b/web/e2e/project/item/fields/asset.spec.ts
@@ -51,7 +51,7 @@ test("Asset field creating and updating has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "Save" }).click();
   await closeNotification(page);
   await page.getByLabel("Back").click();
-  await expect(page.getByText("tileset.json")).toBeVisible();
+  await expect(page.getByText(uploadFileName_1)).toBeVisible();
   await page.getByRole("cell").getByLabel("edit").locator("svg").click();
   await page.getByRole("button", { name: `folder ${uploadFileName_1}` }).click();
   await page.getByRole("button", { name: "upload Upload Asset" }).click();
@@ -67,7 +67,7 @@ test("Asset field creating and updating has succeeded", async ({ page }) => {
   await page.getByRole("button", { name: "Save" }).click();
   await closeNotification(page);
   await page.getByLabel("Back").click();
-  await expect(page.getByText("lowpolycar.gltf")).toBeVisible();
+  await expect(page.getByText(uploadFileName_2)).toBeVisible();
 });
 
 test("Asset field editing has succeeded", async ({ page }) => {
@@ -162,5 +162,7 @@ test("Asset field editing has succeeded", async ({ page }) => {
   await closeNotification(page);
   await page.getByLabel("Back").click();
   await page.getByRole("button", { name: "x2" }).click();
-  await expect(page.getByRole("tooltip")).toContainText("new asset1 lowpolycar.gltf tileset.json");
+  await expect(page.getByRole("tooltip")).toContainText(`new asset1`);
+  await expect(page.getByRole("tooltip").locator("p").first()).toContainText(uploadFileName_2);
+  await expect(page.getByRole("tooltip").locator("p").last()).toContainText(uploadFileName_1);
 });
diff --git a/web/e2e/project/item/metadata/boolean.spec.ts b/web/e2e/project/item/metadata/boolean.spec.ts
@@ -53,6 +53,8 @@ test("Boolean metadata creating and updating has succeeded", async ({ page }) =>
   await page.getByLabel("Back").click();
   await expect(page.getByRole("switch", { name: "close" })).toBeVisible();
   await page.getByRole("cell").getByLabel("edit").locator("svg").click();
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(500);
   await page.getByLabel("boolean1").click();
   await closeNotification(page);
   await expect(page.getByLabel("boolean1")).toHaveAttribute("aria-checked", "true");
@@ -65,6 +67,7 @@ test("Boolean metadata creating and updating has succeeded", async ({ page }) =>
 });
 
 test("Boolean metadata editing has succeeded", async ({ page }) => {
+  test.slow();
   await page.getByRole("tab", { name: "Meta Data" }).click();
   await page.locator("li").filter({ hasText: "Boolean" }).locator("div").first().click();
   await page.getByLabel("Display name").click();
@@ -137,22 +140,16 @@ test("Boolean metadata editing has succeeded", async ({ page }) => {
   await expect(page.getByRole("switch").nth(0)).toHaveAttribute("aria-checked", "false");
   await expect(page.getByRole("switch").nth(1)).toHaveAttribute("aria-checked", "false");
   await expect(page.getByRole("switch").nth(2)).toHaveAttribute("aria-checked", "true");
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(500);
   await page.getByRole("button", { name: "plus New" }).click();
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("switch").nth(2).click();
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("button", { name: "plus New" }).click();
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("switch").nth(4).click();
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("button", { name: "delete" }).first().click();
   await closeNotification(page);
   await page.getByLabel("Back").click();

diff --git a/web/e2e/project/item/metadata/checkbox.spec.ts b/web/e2e/project/item/metadata/checkbox.spec.ts
@@ -53,6 +53,8 @@ test("Checkbox metadata creating and updating has succeeded", async ({ page }) =
   await page.getByLabel("Back").click();
   await expect(page.getByLabel("", { exact: true }).nth(1)).not.toBeChecked();
   await page.getByRole("cell").getByLabel("edit").locator("svg").click();
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(500);
   await page.getByLabel("checkbox1").check();
   await closeNotification(page);
   await expect(page.getByLabel("checkbox1")).toBeChecked();
@@ -68,6 +70,7 @@ test("Checkbox metadata creating and updating has succeeded", async ({ page }) =
 });
 
 test("Checkbox metadata editing has succeeded", async ({ page }) => {
+  test.slow();
   await page.getByRole("tab", { name: "Meta Data" }).click();
   await page.locator("li").filter({ hasText: "Check Box" }).locator("div").first().click();
   await page.getByLabel("Display name").click();
@@ -147,22 +150,16 @@ test("Checkbox metadata editing has succeeded", async ({ page }) => {
   await expect(page.getByLabel("", { exact: true }).nth(0)).toBeChecked();
   await expect(page.getByLabel("", { exact: true }).nth(1)).toBeChecked();
   await expect(page.getByLabel("", { exact: true }).nth(2)).toBeChecked();
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(500);
   await page.getByRole("button", { name: "plus New" }).click();
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByLabel("", { exact: true }).nth(2).uncheck();
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("button", { name: "plus New" }).click();
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByLabel("", { exact: true }).nth(4).click();
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("button", { name: "delete" }).first().click();
   await closeNotification(page);
   await expect(page.getByLabel("", { exact: true }).nth(0)).toBeChecked();

diff --git a/web/e2e/project/item/metadata/date.spec.ts b/web/e2e/project/item/metadata/date.spec.ts
@@ -56,6 +56,8 @@ test("Date metadata creating and updating has succeeded", async ({ page }) => {
   await page.getByLabel("Back").click();
   await expect(page.getByPlaceholder("-")).toHaveValue("2024-01-01");
   await page.getByRole("cell").getByLabel("edit").locator("svg").click();
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(500);
   await page.getByPlaceholder("Select date").click();
   await page.getByPlaceholder("Select date").fill("2024-01-02");
   await page.getByPlaceholder("Select date").press("Enter");
@@ -73,6 +75,7 @@ test("Date metadata creating and updating has succeeded", async ({ page }) => {
 });
 
 test("Date metadata editing has succeeded", async ({ page }) => {
+  test.slow();
   await page.getByRole("tab", { name: "Meta Data" }).click();
   await page.locator("li").filter({ hasText: "Date" }).locator("div").first().click();
   await page.getByLabel("Display name").click();
@@ -157,34 +160,25 @@ test("Date metadata editing has succeeded", async ({ page }) => {
   await expect(page.getByRole("textbox").nth(0)).toHaveValue("2024-01-01");
   await expect(page.getByRole("textbox").nth(1)).toHaveValue("2024-01-04");
   await expect(page.getByRole("textbox").nth(2)).toHaveValue("2024-01-02");
-  await page.getByRole("button", { name: "plus New" }).click();
-  await closeNotification(page);
   // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
+  await page.waitForTimeout(500);
+  await page.getByRole("button", { name: "plus New" }).click();
   await page.getByRole("textbox").nth(3).click();
   await page.getByRole("textbox").nth(3).fill("2024-01-05");
   await page.getByRole("textbox").nth(3).press("Enter");
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("button", { name: "plus New" }).click();
-  await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("textbox").nth(4).click();
   await page.getByRole("textbox").nth(4).fill("2024-01-06");
   await page.getByRole("textbox").nth(4).press("Enter");
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("button", { name: "delete" }).first().click();
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("button", { name: "plus New" }).click();
+  await page.getByRole("textbox").nth(4).click();
+  await page.getByRole("textbox").nth(4).fill("2024-01-07");
+  await page.getByRole("textbox").nth(4).press("Enter");
   await closeNotification(page);
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("button", { name: "close-circle" }).nth(4).click();
   await closeNotification(page);
   await expect(page.getByRole("textbox").nth(0)).toHaveValue("2024-01-04");

diff --git a/web/e2e/project/item/metadata/tag.spec.ts b/web/e2e/project/item/metadata/tag.spec.ts
@@ -23,10 +23,10 @@ test("Tag metadata creating and updating has succeeded", async ({ page }) => {
   await page.getByLabel("Settings").locator("#description").click();
   await page.getByLabel("Settings").locator("#description").fill("tag1 description");
   await page.getByRole("button", { name: "plus New" }).click();
-  await page.locator("div").filter({ hasText: /^Tag$/ }).click();
+  await page.locator("div").filter({ hasText: /^Tag$/ }).last().click();
   await page.getByLabel("Set Tags").fill("Tag1");
   await page.getByRole("button", { name: "plus New" }).click();
-  await page.locator("div").filter({ hasText: /^Tag$/ }).click();
+  await page.locator("div").filter({ hasText: /^Tag$/ }).last().click();
   await page.locator("#tags").nth(1).fill("");
   await expect(page.getByText("Empty values are not allowed")).toBeVisible();
   await expect(page.getByRole("button", { name: "OK" })).toBeDisabled();
@@ -72,6 +72,8 @@ test("Tag metadata creating and updating has succeeded", async ({ page }) => {
   await page.getByLabel("Back").click();
   await expect(page.getByText("Tag1", { exact: true })).toBeVisible();
   await page.getByRole("cell").getByLabel("edit").locator("svg").click();
+  // eslint-disable-next-line playwright/no-wait-for-timeout
+  await page.waitForTimeout(500);
   await page.getByLabel("close-circle").locator("svg").click();
   await closeNotification(page);
   await page.getByLabel("tag1").click();
@@ -92,8 +94,6 @@ test("Tag metadata creating and updating has succeeded", async ({ page }) => {
     .click();
   await closeNotification(page);
   await expect(page.locator("tbody").getByText("Tag1").first()).toBeVisible();
-  // eslint-disable-next-line playwright/no-wait-for-timeout
-  await page.waitForTimeout(100);
   await page.getByRole("cell", { name: "Tag1", exact: true }).locator("svg").click();
   await closeNotification(page);
   await expect(page.locator("#root").getByText("Tag1", { exact: true }).first()).toBeHidden();
@@ -111,10 +111,10 @@ test("Tag metadata editing has succeeded", async ({ page }) => {
   await page.getByLabel("Settings").locator("#description").click();
   await page.getByLabel("Settings").locator("#description").fill("tag1 description");
   await page.getByRole("button", { name: "plus New" }).click();
-  await page.locator("div").filter({ hasText: /^Tag$/ }).click();
+  await page.locator("div").filter({ hasText: /^Tag$/ }).last().click();
   await page.getByLabel("Set Tags").fill("Tag1");
   await page.getByRole("button", { name: "plus New" }).click();
-  await page.locator("div").filter({ hasText: /^Tag$/ }).click();
+  await page.locator("div").filter({ hasText: /^Tag$/ }).last().click();
   await page.locator("#tags").nth(1).fill("Tag2");
   await page.getByRole("tab", { name: "Default value" }).click();
   await page.getByLabel("Set default value").click();
@@ -145,7 +145,7 @@ test("Tag metadata editing has succeeded", async ({ page }) => {
   await page.getByLabel("Description(optional)").click();
   await page.getByLabel("Description(optional)").fill("new tag1 description");
   await page.getByRole("button", { name: "plus New" }).click();
-  await page.locator("div").filter({ hasText: /^Tag$/ }).click();
+  await page.locator("div").filter({ hasText: /^Tag$/ }).last().click();
   await page.locator("#tags").nth(2).fill("Tag3");
   await page.getByLabel("Support multiple values").check();
   await page.getByRole("tab", { name: "Validation" }).click();
@@ -157,11 +157,11 @@ test("Tag metadata editing has succeeded", async ({ page }) => {
   await expect(page.getByText("Tag1").last()).toBeVisible();
   await page.getByText("Tag2").nth(2).click();
   await page.getByText("Tag3").nth(2).click();
-  await expect(page.getByLabel("Update Tag").getByText("Tag1Tag2Tag3")).toBeVisible();
+  await expect(page.getByLabel("Update Tag").getByText("Tag1Tag2Tag3").last()).toBeVisible();
   await page.getByRole("tab", { name: "Settings" }).click();
   await page.getByLabel("Update Tag").getByRole("button", { name: "delete" }).first().click();
   await page.getByRole("tab", { name: "Default value" }).click();
-  await expect(page.getByLabel("Update Tag").getByText("Tag2Tag3")).toBeVisible();
+  await expect(page.getByLabel("Update Tag").getByText("Tag2Tag3").last()).toBeVisible();
   await page.locator(".ant-select-selector").click();
   await expect(page.getByText("Tag1").last()).toBeHidden();
   await page.locator(".ant-select-selector").click();
@@ -189,7 +189,7 @@ test("Tag metadata editing has succeeded", async ({ page }) => {
   await expect(page.getByText("Please input field!")).toBeVisible();
   await page.locator(".ant-select-selector").click();
   await page.getByText("Tag2").click();
-  await page.getByLabel("Back").click();
   await closeNotification(page);
+  await page.getByLabel("Back").click();
   await expect(page.getByText("Tag2")).toBeVisible();
 });