cypress E2e login to logout test done

.gitignore

@@ -15,6 +15,8 @@ coverage
 *.local
 /dist
 
+# Cypress
+cypress.env.json
 /cypress/videos/
 /cypress/screenshots/
 
@@ -32,6 +34,6 @@ vscode
 *.sw?
 
 # local env files
+.env.demo
 .env.local
 .env.*.local
-.env.demo

cypress.config.js

@@ -4,6 +4,6 @@ const { defineConfig } = require("cypress");
 module.exports = defineConfig({
   e2e: {
     specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
-    baseUrl: '',
+    // baseUrl: "" // 設定方式請看內部文件
   },
 });

cypress/e2e/loginToLogout.cy.js

@@ -1,4 +1,4 @@
-// 之後要優化: 加入生命週期、每一個測試步驟要分開寫，不寫在同一個 it 裡面、將測試寫成 report 輸出成 html(嘗試)
+// 之後要優化: 每一個測試步驟要分開寫，不寫在同一個 it 裡面、將測試寫成 report 輸出成 html(嘗試)
 
 describe("Login to Logout", () => {
   before(() => {
@@ -7,22 +7,24 @@ describe("Login to Logout", () => {
     cy.url().should('include', 'login') // url path 要有 'Login'，確定進入 login page
   })
 
-  it("login error username and password", () => {
-    // 驗證帳密是否刪除前後空白、輸入錯誤是否彈跳驗證、Button display
-    cy.get('.btn-lg').should('be.disabled');
-    cy.get('#account').should('have.focus').type('  test  ');
-    cy.get('.btn-lg').should('be.disabled');
-    cy.get('#password').type('  test  ');
-    cy.get('.btn-lg').click();
-    cy.get('#account').should('have.value', 'test');
-    cy.get('#password').should('have.value', 'test');
-    cy.get('form').submit();
-    cy.contains("p", "Incorrect account or password.");
-    cy.url().should('include', 'login');
+  it("test login success and error", () => {
+    // 驗證帳密是否刪除前後空白、錯誤帳密是否顯示驗證、Button display
+    cy.fixture('users/id-not-exists').then(({username, password}) => {
+      cy.get('.btn-lg').should('be.disabled');
+      cy.get('#account').should('have.focus').type(username);
+      cy.get('.btn-lg').should('be.disabled');
+      cy.get('#password').type(password);
+      cy.get('.btn-lg').click();
+      cy.get('#account').should('have.value', 'test');
+      cy.get('#password').should('have.value', 'test');
+      cy.get('form').submit();
+      cy.contains("p", "Incorrect account or password.");
+      cy.url().should('include', 'login');
+    });
 
     // 正確帳密登入
-    cy.get('#account').clear().type('');
-    cy.get('#password').clear().type('');
+    cy.get('#account').clear().type(Cypress.env('user').username);
+    cy.get('#password').clear().type(Cypress.env('user').password);
     cy.get('.btn-lg').click();
     cy.get('form').submit(); // 選取 form 表單並發送
 

cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

cypress/fixtures/users/id-not-exists.json

@@ -0,0 +1,4 @@
+{
+  "username": "   test   ",
+  "password": "   test   "
+}

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "lucia-frontend",
+  "name": "frontend",
   "version": "0.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "lucia-frontend",
+      "name": "frontend",
       "version": "0.2.0",
       "dependencies": {
         "autoprefixer": "^10.4.13",