test(test): implement e2e test with testcafe #3

package.json

@@ -12,7 +12,8 @@
     "prepare": "husky install",
     "format-check": "npx prettier --check ./",
     "format-write": "npx prettier --write ./",
-    "test": "vitest"
+    "test": "vitest",
+    "test:e2e": "testcafe chrome tests/"
   },
   "lint-staged": {
     "*.{js,vue,ts}": [
@@ -38,6 +39,7 @@
     "prettier": "^2.6.2",
     "prettier-plugin-tailwindcss": "^0.1.10",
     "tailwindcss": "^3.0.24",
+    "testcafe": "^1.18.6",
     "typescript": "^4.6.4",
     "vitest": "^0.12.4"
   },

tests/index.ts

@@ -0,0 +1,36 @@
+// import { Selector, ClientFunction } from 'testcafe'
+import { Selector } from 'testcafe'
+
+// fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`
+fixture`Getting Started`.page`http://localhost:3000`
+
+test('index page', async (t) => {
+  await t
+    // Use the assertion to check if the actual header text is equal to the expected one
+    .expect(Selector('h1').innerText)
+    .eql('Get Started')
+})
+
+// test('login layout without Drawer', async (t) => {
+//   const drawer = Selector('[data-testid="drawer"]').exists
+//   await t.expect(drawer).notOk
+// })
+
+// test('login with wrong account', async (t) => {
+//   await t
+//     .typeText('[data-testid="input-account"]', '[email protected]')
+//     .typeText('[data-testid="input-password"]', 'zxcvbnm')
+//     .click('[data-testid="submit"]')
+//     .expect(Selector('[data-testid="error"]').innerText)
+//     .eql('Error: 帳號不存在或密碼錯誤，請重新輸入。')
+// })
+
+// test('login success', async (t) => {
+//   await t
+//     .typeText('[data-testid="input-account"]', '[email protected]')
+//     .typeText('[data-testid="input-password"]', 'zxcvbnm')
+//     .click('[data-testid="submit"]')
+
+//   const getLocation = ClientFunction(() => document.location.href)
+//   await t.expect(getLocation()).contains('http://localhost:3000/')
+// })