test: introduce playwright to run e2e tests (#336)

reearth · Oct 26, 2022 · 3af5206 · 3af5206
1 parent 5bfa190
commit 3af5206
Show file tree

Hide file tree

Showing 22 changed files with 273 additions and 782 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -54,7 +54,3 @@ overrides:
         - env: literal
           requiredFields:
             - id
-  - files:
-      - cypress/**/*
-    extends:
-      - plugin:cypress/recommended
diff --git a/.github/workflows/e2e.yml b/.github/workflows/e2e.yml
@@ -6,21 +6,9 @@ on:
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
 jobs:
-  e2e_pre:
-    runs-on: ubuntu-latest
-    outputs:
-      result: ${{ steps.e2e_pre.outputs.result }}
-    env:
-      CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
-    steps:
-      - name: Set vars
-        id: e2e_pre
-        run: echo "::set-output name=result::`test -n "$CYPRESS_PROJECT_ID" && echo 1`"
   e2e:
     name: E2E test
     runs-on: ubuntu-latest
-    needs: e2e_pre
-    if: needs.e2e_pre.outputs.result != null
     steps:
       - uses: actions/setup-node@v3
         with:
@@ -36,34 +24,33 @@ jobs:
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-yarn-
+      - name: install
+        run: yarn install
+      - name: install playwright dependencies
+        run: yarn run playwright install
       - name: E2E test
-        uses: cypress-io/github-action@v4
-        with:
-          browser: chrome
-          record: true
+        run: yarn run e2e
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
-          CYPRESS_BASE_URL: https://test.reearth.dev
-          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-          CYPRESS_REEARTH_WEB_API: https://api.test.reearth.dev/api
-          CYPRESS_REEARTH_WEB_AUTH0_AUDIENCE: ${{ secrets.REEARTH_WEB_AUTH0_AUDIENCE }}
-          CYPRESS_REEARTH_WEB_AUTH0_CLIENT_ID: ${{ secrets.REEARTH_WEB_AUTH0_CLIENT_ID }}
-          CYPRESS_REEARTH_WEB_AUTH0_DOMAIN: ${{ secrets.REEARTH_WEB_AUTH0_DOMAIN }}
-          CYPRESS_REEARTH_WEB_E2E_USER_ID: ${{ secrets.REEARTH_WEB_E2E_USER_ID }}
-          CYPRESS_REEARTH_WEB_E2E_TEAM_ID: ${{ secrets.REEARTH_WEB_E2E_TEAM_ID }}
-          CYPRESS_REEARTH_WEB_E2E_USERNAME: ${{ secrets.REEARTH_WEB_E2E_USERNAME }}
-          CYPRESS_REEARTH_WEB_E2E_PASSWORD: ${{ secrets.REEARTH_WEB_E2E_PASSWORD }}
-          CYPRESS_REEARTH_WEB_E2E_USER_NAME: ${{ secrets.REEARTH_WEB_E2E_USER_NAME }}
-          CYPRESS_REEARTH_WEB_E2E_SIGNUP_SECRET: ${{ secrets.REEARTH_WEB_E2E_SIGNUP_SECRET }}
+          REEARTH_WEB_API: https://api.test.reearth.dev/api
+          REEARTH_WEB_AUTH0_AUDIENCE: ${{ secrets.REEARTH_WEB_AUTH0_AUDIENCE }}
+          REEARTH_WEB_AUTH0_CLIENT_ID: ${{ secrets.REEARTH_WEB_AUTH0_CLIENT_ID }}
+          REEARTH_WEB_AUTH0_DOMAIN: ${{ secrets.REEARTH_WEB_AUTH0_DOMAIN }}
+          REEARTH_WEB_E2E_BASEURL: https://test.reearth.dev
+          REEARTH_WEB_E2E_USER_ID: ${{ secrets.REEARTH_WEB_E2E_USER_ID }}
+          REEARTH_WEB_E2E_TEAM_ID: ${{ secrets.REEARTH_WEB_E2E_TEAM_ID }}
+          REEARTH_WEB_E2E_USERNAME: ${{ secrets.REEARTH_WEB_E2E_USERNAME }}
+          REEARTH_WEB_E2E_PASSWORD: ${{ secrets.REEARTH_WEB_E2E_PASSWORD }}
+          REEARTH_WEB_E2E_USER_NAME: ${{ secrets.REEARTH_WEB_E2E_USER_NAME }}
+          REEARTH_WEB_E2E_SIGNUP_SECRET: ${{ secrets.REEARTH_WEB_E2E_SIGNUP_SECRET }}
       - uses: actions/upload-artifact@v3
         if: always()
         with:
-          name: e2etest-result
-          if-no-files-found: ignore
+          name: playwright
           path: |
-            cypress/screenshots
-            cypress/videos
+            playwright-report/
+            test-results/
+          if-no-files-found: ignore
+          retention-days: 7
   slack-notification:
     if: success() || failure()
     name: Slack Notification

diff --git a/.gitignore b/.gitignore
@@ -7,8 +7,8 @@ node_modules
 /vendor
 /storybook-static
 __screenshots__
-/cypress/videos
-/cypress/screenshots
+/playwright-report
+/test-results
 /.env*
 /reearth-config.json
 .idea/*
diff --git a/cypress.config.ts b/cypress.config.ts
diff --git a/cypress/e2e/Dashboard/dashboard.cy.ts b/cypress/e2e/Dashboard/dashboard.cy.ts
diff --git a/cypress/e2e/common.ts b/cypress/e2e/common.ts
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
diff --git a/cypress/support/config.ts b/cypress/support/config.ts
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
diff --git a/cypress/support/index.d.ts b/cypress/support/index.d.ts
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
diff --git a/e2e/dashboard.spec.ts b/e2e/dashboard.spec.ts
@@ -0,0 +1,8 @@
+import { expect, test } from "./utils";
+
+test("dasboard can be logged in", async ({ page, reearth }) => {
+  await reearth.initUser();
+  await reearth.goto(`/dashboard/${reearth.teamId}`);
+
+  await expect(page.getByText(`${reearth.userName}'s workspace`)).toBeVisible();
+});
diff --git a/e2e/utils/config.ts b/e2e/utils/config.ts
@@ -0,0 +1,21 @@
+export const config = {
+  api: process.env["REEARTH_WEB_API"],
+  userId: process.env["REEARTH_WEB_E2E_USER_ID"],
+  userName: process.env["REEARTH_WEB_E2E_USERNAME"],
+  password: process.env["REEARTH_WEB_E2E_PASSWORD"],
+  teamId: process.env["REEARTH_WEB_E2E_TEAM_ID"],
+  authAudience: process.env["REEARTH_WEB_AUTH0_AUDIENCE"],
+  authClientId: process.env["REEARTH_WEB_AUTH0_CLIENT_ID"],
+  authUrl: process.env["REEARTH_WEB_AUTH0_DOMAIN"],
+  signUpSecret: process.env["REEARTH_WEB_E2E_SIGNUP_SECRET"],
+};
+
+export type Config = typeof config;
+
+export function setAccessToken(accessToken: string) {
+  process.env.REEARTH_WEB_E2E_ACCESS_TOKEN = accessToken;
+}
+
+export function getAccessToken(): string | undefined {
+  return process.env.REEARTH_WEB_E2E_ACCESS_TOKEN;
+}