cypress login test pass

cypress/e2e/example.cy.js

@@ -1,8 +0,0 @@
-// https://docs.cypress.io/api/introduction/api.html
-
-describe("My First Test", () => {
-  it("visits the app root url", () => {
-    cy.visit("/");
-    cy.contains("h1", "You did it!");
-  });
-});

cypress/e2e/loginToLogout.cy.js

@@ -0,0 +1,39 @@
+// 之後要優化: 加入生命週期、每一個測試步驟要分開寫，不寫在同一個 it 裡面、將測試寫成 report 輸出成 html(嘗試)
+
+describe("Login to Logout", () => {
+  before(() => {
+    cy.visit("/"); // 測試可否進入網站
+    cy.contains("h2", "LOGIN"); // 是否轉址到 /login 並顯示畫面
+    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');
+
+    // 正確帳密登入
+    cy.get('#account').clear().type('');
+    cy.get('#password').clear().type('');
+    cy.get('.btn-lg').click();
+    cy.get('form').submit(); // 選取 form 表單並發送
+
+    // 轉址到 files 頁
+    cy.url().should('include', 'files');
+    cy.get('a #iconMember').scrollIntoView().click();
+
+    // 轉址到會員頁
+    cy.url().should('include', 'member-area');
+
+    // 登出
+    cy.get('.btn-sm').contains('log out').click();
+  });
+});