Phân biệt fontend và backend

Trong quá trình test bạn thường hay sử dụng hoặc thấy các bạn tester có base IT sử dụng F12 trên trình duyệt để đọc, lấy thông tin. Chúng ta cũng sử dụng và chưa hiểu lắm tác dụng của nó

Bạn mới vào công ty và nghe testlead bảo: “ em viết testcase phần fontend và test cho chị trước nhé”

Trong quá trình test dev fontend và backend trêu tester mới, lỗi này của bên fontend mà, bên fontend nói lỗi này của backend mà em. Chúng ta làm gì để biết phần đó của bên nào để chốt nhỉ?

Để hiểu hơn về Fontend và Backend chúng ta cùng hiểu 1 chút về hệ thống và luồng hoạt động của 1 website như thế nào, cụ thể là website bán hàng nhé:

Nhìn sơ đồ hoạt động trên từ khi thao tác vào công việc chỉnh sửa 1 sản phẩm đến khi nhận thông báo dữ liệu upload thành công mà trước giờ chúng ta chỉ nhìn trên giao diện màn hình mà chưa rõ cách thức hoạt động để trả ra kết quả đó như thế nào phải không ạ?

Giờ mình giải thích từng bước hoạt động của nó ở hình theo case “Update sản phẩm thanh công” nhé: 

Màn B1. Tại đây, sau khi thao tác vào màn sản phẩm trên webadmin chúng ta thấy có rất nhiều tác vụ như: xem, xóa và sửa thông tin. Người dùng sẽ click vào tác vụ sửa thông tin để thay đổi dữ liệu

Màn B2. Màn chỉnh sửa dữ liệu được hiển thị ra cho phép chúng ta chỉnh sửa theo tiêu chí. Tại màn này những thông tin chúng ta nhập vào bị sai sẽ được thông báo luôn là do màn Màn B3( đoạn code của dev sẽ xử lý kiểm tra- giải thích ở B3)

Sau khi chỉnh sửa xong chúng ta click vào button Update để gửi đến bên trong xử lý

Màn B3. Tại bước này trên hình là đoạn code mà các bạn dev lập trình để nhận thông tin. Những dòng code tại màn này chính là giao diện mà chúng ta nhìn thấy được, thao tác vào được trên màn hình máy tính. Đoạn code này có nhiệm vụ kiểm tra xem dữ liệu chúng ta nhập vào có đúng định dạng cho phép hay không( vidu: tên sản phẩm chặn ký tự đặc biệt, giá sản phẩm chặn ký tự chữ,..). Sau khi kiểm tra, tiếp đến có những câu lệnh gọi tới server để chuyển nhiệm vụ cho bên server

Màn B4. Tại đây server nhận thông tin và kiểm tra thông tin có đúng không( kiểm tra về phần đường dẫn, dữ liệu) gọi đến Database

Màn B5. Database kiểm tra lời gọi của server - kiểm tra id sản phầm trong bảng sản phẩm sau đó lưu thông tin đó vào id mà server gửi đến

Màn B6. Sau khi hoàn tất lưu thông tin tại màn hình sẽ được gửi đến 1 box thông báo: Update sản phẩm thành công. Người dùng click vào button ok thì giao diện được chuyển sang màn B7

Màn B7. Tại màn này dữ liệu đã được thay đổi giống chính xác dữ liệu mà người dùng đã thay đổi. Đã hoàn thành hoạt động của 1 case xử lý update sản phẩm thành công.

 

Giải thích đến đoạn này, chắc hẳn các bạn sẽ có thêm câu hỏi:

1. Từ màn B1 đến màn B7 trên hình kia thì phần nào là của backend và phần nào là của fontend?

2. Có những trường hợp nào xảy ra với luồng từ B1 đến B7?

3. Tester sẽ test những gì với luồng hoạt động của màn B1 đến B7?

Cùng đi lý giải nó nhé:

1. Fontend - Backend

 

Những gì chúng ta thao tác trên máy tính như: xem thông tin, tìm kiếm thông tin đó là do lập trình viên code HTML, CSS, JS xây dựng lên để giúp người dùng có giao diện để xử lý.

Nhờ có internet kết nối với máy chủ server, mà tại đây lập trình viên code ngôn ngữ java, python, lệnh SQL,.. Thao tác với server để trả lại kết quả trên màn hình máy tính

Hiểu đơn giản: cái gì giúp chúng ta nhìn thấy thao tác được trên màn hình máy tính là do lập trình viên front end thực hiện.  Những gì liên quan đến lấy dữ liệu, lưu trữ dữ liệu, làm việc được với server là do lập trình viên backend code

Để hiểu hơn chúng ta cùng xem video: giới thiệu về HTML, CSS nhé ( chưa update)

- Lý do để chúng ta cần hiểu HTML, CSS là khi đọc đoạn code trên thao tác F12 trên website chúng ta có thể hiểu được cấu trúc(chức năng hay chỉ là thao tác), tên gọi để báo lỗi với dev được tự tin hơn

- Phân loại được các case để test: testUI, testUX( test thao tác với màn hình), testFunction, testValidate,...

2. Có những trường hợp có thể xảy ra ở luồng từ B1 đến B7:

- Tại B1, không click được vào tác vụ: xóa, sửa hoặc click vào tác vụ xóa lại chuyển sang màn sửa thông tin hoặc ngược lại

- Tại B2, nhập thông tin sai không có thông báo hoặc không click được vào các trường thông tin, button Update

- Tại B4, nhận sai thông tin dẫn đến gửi sai thông tin cho database

- Tại B5, update sai thông tin gửi lại tới B7 bị sai thông tin

- Tại B6, hiển thị sai box thông báo hoặc không click được vào button OK

- Tại B7, hiển thị sai thông tin từ B5 hoặc thông tin hiển thị sai cột

……

Dựa vào giải thích và video giới thiệu về HTML,CSS chúng ta sẽ thấy những lỗi về fontend gồm: 

- Tại B1, không click được vào tác vụ: xóa, sửa hoặc click vào tác vụ xóa lại chuyển sang màn sửa thông tin hoặc ngược lại

- Tại B2, nhập thông tin sai không có thông báo hoặc không click được vào các trường thông tin, button Update

- Tại B6, hiển thị sai box thông báo hoặc không click được vào button OK

- Tại B7, hiển thị sai thông tin từ B5 hoặc thông tin hiển thị sai cột

Lỗi Backend  gồm: 

- Tại B4, nhận sai thông tin dẫn đến gửi sai thông tin cho database

- Tại B5, update sai thông tin gửi lại tới B7 bị sai thông tin

Ở tại màn B3, phía fontend chỉ có nhiệm vụ gọi đến đoạn code của backend( đoạn code này sẽ được gói gọn giống 1 cái hộp mà fontend chỉ quan tâm đến đoạn 1 đó gọi đến hộp backend1. Phía bên trong hộp đó backend sẽ phải kiểm tra nếu có lỗi xảy ra

Vậy khi test trường hợp liên quan đến dữ liệu, đó sẽ là do backend lấy/xử lý sai 

Giao diện chúng ta test gặp trường hợp sai là do fontend đó 

3. Dựa trên luồng trên thì testmanual sẽ kiểm tra ở B1, B2, B6, B7

- Testdatabase sẽ sử dụng lệnh SQL để thao tác với DB và kiểm tra tại màn B1 và sau tác vụ xóa, sửa sẽ đối chiếu với màn B7

- TestAPI là tester sẽ test các  đường dẫn vào các hộp của backend tạo với dữ liệu trong hộp có đúng với DB mà backend xử lý từ DB về hay không? kết quả trả ra từ hộp đó có đúng mong muốn/tài liệu liên quan không? 

 

Phần giới thiệu về việc test giao diện và hiểu hơn về hoạt động của hệ thống từ lúc chúng ta thao tác trên màn hình đến khi chúng ta nhận về kết quả. nếu blog có phần nào chưa rõ các bạn bình luận phía dưới để mình bổ sung vào nhé

Cảm ơn các bạn đã ghé qua blog donghanhcungtester.com của mình, nếu bài viết hay các bạn hay like và để lại bình luận cho mình lấy động lực chia sẻ nhiều hơn nữa bạn nhé

Hoặc mời mình một cốc trà sữa cho mình khấn khởi với nè