Skip to main content

0. Bài tập trải nghiệm WEB

Xây dựng mẫu kiểm thử cho form Login sau​

Xem form (https://aptech-tester.web.app/login)

Yêu cầu chung về số lượng thành phần​

Yêu cầu về thiết kế các đối tượng​

  • Tên đăng nhập:
    • Khi focus có border màu xanh (#1890ff), khi không focus có border màu xám (#d9d9d9).
    • Các placeholder text: "Nhập tên đăng nhập".
    • Kích thước: chiều cao 32px, chiều rộng 460px.
    • Font: Roboto, Regular, 14px.
    • Màu chữ: #000000.
    • Màu nền: #ffffff.
    • Các ràng buộc:
      • Bắt buộc nhập, không được để trống, không được chứa ký tự đặc biệt, không được chứa emoji, độ dài từ 3 đến 30 ký tự.
      • Nếu vi phạm các ràng buộc trên thì sẽ hiển thị các thông báo lỗi và không cho phép click vào Đăng nhập.
  • Mật khẩu:
    • Khi focus có border màu xanh (#1890ff), khi không focus có border màu xám (#d9d9d9).
    • Các placeholder text: "Nhập mật khẩu".
    • Kích thước: chiều cao 32px, chiều rộng 460px.
    • Font: Roboto, Regular, 14px.
    • Màu chữ: #000000.
    • Màu nền: #ffffff.
    • Các ràng buộc:
      • Bắt buộc nhập, không được để trống, không được chứa ký tự đặc biệt, không được chứa emoji, độ dài từ 6 đến 10 ký tự.
      • Nếu vi phạm các ràng buộc trên thì sẽ hiển thị các thông báo lỗi và không cho phép click vào Đăng nhập.
  • Nút Đăng nhập:
    • Màu chữ: #ffffff.
    • Font: Roboto, Regular, 14px.
    • Màu nền: #1890ff.
    • Kích thước: chiều cao 32px, chiều rộng 120px.
    • Khi mouse hover có màu nền xanh (#40a9ff).
    • Khi mouse down có màu nền xanh (#096dd9).
    • Khi click vào nút Đăng nhập thì sẽ kiểm tra các ràng buộc trên, nếu không thỏa mãn thì hiển thị các thông báo lỗi.
    • Khi click vào nút Đăng nhập thì sẽ kiểm tra Tên đăng nhập và Mật khẩu có đúng hay không, nếu không thỏa mãn thì hiển thị các thông báo lỗi.
    • Khi click vào nút Đăng nhập thì sẽ kiểm tra Tên đăng nhập và Mật khẩu có đúng hay không, nếu đúng thì chuyển sang màn hình chính (https://domain-name/home).
  • CheckBox Ghi nhớ thông tin tài khoản:
    • Khi click vào CheckBox Ghi nhớ thông tin tài khoản thì sẽ lưu lại Tên đăng nhập và Mật khẩu (đã mã hóa).
  • Link Quên mật khẩu và Đăng ký:

Yêu cầu về nội dung thông báo lỗi​

  • Màu sắc của các message thông báo lỗi: #ff4d4f
  • Các thông báo lỗi:
    • Tên đăng nhập:
      • Khi bỏ trống Tên đăng nhập: "Tên đăng nhập không được để trống"
      • Khi nhập Tên đăng nhập không nằm trong phạm vi cho phép: "Độ dài Tên đăng nhập phải nằm trong khoảng 3 đến 30 ký tự"
    • Mật khẩu:
      • Khi bỏ trống Mật khẩu: "Mật khẩu không được để trống"
      • Khi nhập Mật khẩu không nằm trong phạm vi cho phép: "Độ dài Mật khẩu phải nằm trong khoảng 6 đến 10 ký tự"
    • Khi nhập sai Tên đăng nhập hoặc Mật khẩu: "Tên đăng nhập hoặc Mật khẩu đã nhập sai"

Thông tin đăng nhập thành công:​

  • Tên đăng nhập: admin
  • Mật khẩu: Tester@123

Yêu cầu về bảo mật​

  • Mật khẩu phải được mã hóa trước khi gửi lên server.
  • Mật khẩu không được lưu trong browser cookies.
  • Mật khẩu không được lưu trong browser session storage..
  • Mật khẩu không được lưu trong browser local storage.
  • Mật khẩu phải được phân biệt chữ hoa và chữ thường.
  • Khi refresh màn hình, mật khẩu, tên đăng nhập phải xóa trắng.
  • Khi người dùng đã đăng nhập thành công, màn hình login không được hiển thị mà phải tự động chuyển sang màn hình chính.
  • Khi người dùng đã đăng nhập thành công, mở 2 tabs trên cùng 1 browser, tab 1 logout thì tab 2 phải logout theo.
  • Cùng mở 2 tabs, login từng tab. chỉ sinh ra 1 session duy nhất.
  • Khi người dùng đăng nhập 2 tài khoản trên cùng 1 browser, session của tài khoản trước phải kết thúc khi đăng nhập tài khoản sau thành công.
  • Kiểm tra chức năng Paste trên bàn phím (Ctrl + V) và right click (Mouse) hoạt động với tên đăng nhập, mật khẩu.
  • Kiểm tra chức năng Copy trên bàn phím (Ctrl + C) và right click (Mouse) hoạt động với tên đăng nhập.
  • Kiểm tra chức năng Copy trên bàn phím (Ctrl + C) bị disable, right-click (chức năng Copy) disable với mật khẩu.

Hướng dẫn:​

  • Phím tắt chụp màn hình Windows: Windows+Shift+S

  • Phím tắt chụp màn hình MacOS: Command+Shift+4

  • Công cụ lấy mẫu màu sắc Windows:

    Phần mềm Instant Eyedropper, download tại: http://instant-eyedropper.com

  • Công cụ lấy mẫu màu sắc MacOS: Phần mềm Digital Color Meter có sẵn trên MacOS

  • Công cụ xác minh các thành phần WEB:

https://chrispederick.com/work/web-developer