TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH

KHOA ĐÀO TẠO CHẤT LƯỢNG CAO

MOBILE DEVICE TESTING PLATFORM WEB APPLICATION

DETAIL DESIGN DOCUMENT
SCREEN DESIGN

Giảng viên hướng dẫn:

Nguyễn Thanh Phước
Nhóm sinh viên thực hiện:
17110201 - Bùi Thị Hồng Nhung
17110256 - Huỳnh Quốc Hoàng Vương

Ngày 14 Tháng 06 Năm 2021

 MỤC LỤC
1. GIỚI THIỆU..............................................................................................................3
1.1. Mục đích...............................................................................................................3
1.2. Định nghĩa và các từ viết tắt.................................................................................3
1.3. Tổng quan.............................................................................................................3
1.3.1. Kiến trúc tổng quan....................................................................................4
1.3.2. Các tính năng cần có...................................................................................4
2. Screen Flow................................................................................................................5
2.1. Screen Flow cho ứng dụng phía Guest..................................................................5
2.1.1. SCG001. Home Screen...............................................................................7
2.1.2. SCG003. Register Screen............................................................................8
2.1.3. SCG004. Login Screen...............................................................................9
2.1.4. SCG007. Real device testing Screen........................................................10
2.1.5. SCG005. Contact Screen.........................................................................11
2.1.6. SCG006. Support Screen.........................................................................12
2.2. Screen Flow cho phía người dùng hệ thống........................................................13
2.2.1. SCU001. Dashboard - Devices Screen......................................................15
2.2.2. SCU007 - Devices - Details......................................................................17
2.2.3. SCU008-009 - Device - Automation Settings...........................................18
2.2.4. SCU002 - Dashboard - Sessions...............................................................21
2.2.5. SCU013 - Session Details.........................................................................22
2.2.6. SCU012 - Session Overview....................................................................23
2.2.7. SCU014 - Session Devices - Log..............................................................25
2.2.8. SCU004 - Dashboard - Apps - Facebook Details......................................26
2.2.9. SCU011 - Launch Devices Automation....................................................27

2
1. GIỚI THIỆU
1.1. Mục đích
Với sự phát triển của Internet và ứng dụng di động, các nền tảng thương mại càng
có cơ sở để phát triển mạnh mẽ. Bên cạnh việc phát triển xây dựng sản phẩm thì việc
kiểm tra, kiểm nghiệm sản phẩm cũng là quá trình quan trọng trong việc đáp ứng được
một sản phẩm chỉnh chu để đưa đến tay người dung.
Hiện nay, các ứng dụng và thiết bị di dộng ngày một phát triển, các loại sản phẩm
mới được ra đời rất nhiều. Mỗi loại sản phẩm đều có một môi trường hoạt động cũng như
hệ điều hành riêng. Vì vậy không thể tránh khỏi việc khi chúng ta phát triển một sản
phẩm phần mềm thì cũng phải cần đáp ứng được việc sản phẩm đó có thể chạy và hoạt
động trên nhiều thiết bị khác nhau.
Từ đó, mục tiêu của đề tài là có thể áp dụng các kiến thức đã học để xây dựng một
nền tảng thương mại giúp ích cho việc thuê thiết bị Mobile (Smartphone, table) cũng như
xây dựng phòng lab để phục vụ việc test trên các ứng dụng di động đa dạng, đảm bảo sản
phẩm hoạt động tốt trên các môi trường khác nhau.

1.2. Định nghĩa và các từ viết tắt

Bảng sau đây định nghĩa các từ viết tắt và một số thuật ngữ sử dụng trong tài liệu.

ST
Thuật ngữ Giải thích
T
Một kiến trúc hệ thống áp dụng việc tách các chức năng thành
1 Microservices các microservice riêng giúp rút ngắn thời gian build, deploy và
maintenance.
2 API Application Programming Interface.
4 Admin Người quản trị.

1.3. Tổng quan

Hệ thống sẽ có 2 nhóm người dùng chính: Khách (Guest) và người dung hệ thống (User).
Cả khách và người dung hệ thống sẽ thao tác chung trên Web Application, ứng với hai
loại người dùng sẽ có hai vùng (Zone) riêng biệt:

3
  Guest Zone: Chứa thông tin giới thiệu về sản phẩm MobiLab, các infographics
giới thiệu về mobile testing và các chức năng tiêu biểu của sản phẩm, đồng thời là
nơi dành cho khách tạo tài khoảng và cho người dùng hệ thống đăng nhập.
 User Zone: Cho phép người dùng hệ thống thực hiện các thao tác liên quan tới
quản lí thiết bị, quản lí phiên làm việc, …

1.3.1. Kiến trúc tổng quan

4
1.3.2. Các tính năng cần có
Dưới đây là danh sách các tính năng cần có của hệ thống:
Phía khách: Actor

 Đăng kí.
 Đăng nhập.
 Xem thông tin giới thiệu.

Phía người dùng hệ thống: Actor

 Đăng nhập, đăng ký

 Quản lí các thiết bị di động.
 Thiết lập các mục liên quan tới automation profile cho từng thiết bị.
 Quản lí các App (Ứng dụng) sẽ được cài liên thiết bị để test.
 Quản lí phiên làm việc của từng thiết bị.
 Mở các phiên Manual test và thao tác lên thiết bị.
 Mở, theo dõi, lấy kiết quả các phiên automation test.

2. Screen Flow
2.1. Screen Flow cho ứng dụng phía Guest
No Screen Name Description

SCG001 Home Screen Màn hình chính khi truy cập vào hệ thống.

SCG002 Home-Platform Screen Màn hình điều hướng tới các infographic giới
thiệu tính năng tiêu biểu của sản phẩm.

SCG003 Register Screen Màn hình đăng kí.

SCG004 Login Screen Màn hình đăng nhập.

SCG005 Contact Screen Màn hình cho phép người dùng liên lạc với đội
ngũ phát triển.

SCG006 Support Screen Màn hình hỗ trợ.

SCG007 Real device testing Màn hình hiển thị Infographic giới thiệu về
Screen tính năng Real device testing.

5
SCG008 Device Lab Management Màn hình hiển thị Infographic giới thiệu về
Screen tính năng Device Lab Management.

SCG009 Scriptless Test Màn hình hiển thị Infographic giới thiệu về
Automation Screen tính năng Scriptless Test Automation.

SCG010 Function Testing Screen Màn hình hiển thị Infographic giới thiệu về
tính năng Function Testing.

SCG011 Visual Testing Screen Màn hình hiển thị Infographic giới thiệu về
tính năng Visual Testing Screen.

SCG012 Performance Testing Màn hình hiển thị Infographic giới thiệu về
Screen tính năng Visual Testing Screen

Hình 1: Screen Flow cho ứng dụng phía khách

6
7
 2.1.1. SCG001. Home Screen

Required
(Input… Referenc
No Name Type Note
Validation e
)
Data từ Hiển thị tên website mặc định khi truy
1 MobiLab True Text
API cập tới trang web.
Thanh Thanh điều hướng người dùng đến các
2 True Button
Navigation trang khác.
Data từ Khi click, sẽ hiển thị infographic bao
3 Menu True Menu
API gồm Login và Support.
Drop- Data từ Hiển thị những platform mà người
4 Infographic True
down API dung có thể tìm hiểu thông tin
Khi click, người dung sẽ đướng điều
5 Try now Button
hướng đến trang SCG004
Liên kết các Khi click, người dùng sẽ liên kết tài
6 Button
ứng dụng khoản dựa trên ứng dụng mạng xã hội

8
 2.1.2. SCG003. Register Screen

Require Referenc
No Name Format Note
d e
Hình ảnh về Data từ
1 False Image Hiển thị hình ảnh mô tả về website
website API
Data từ
2 First name True Input Nhập first name
API
Data từ
3 Last name True Input Nhập last name
API
Data từ
4 Email True Input Nhập email
API
Phone Data từ
5 True Input Nhập số điện thoại
number API
Data từ
6 Password True Input Nhập mật khẩu
API
Confirm Data từ
6 True Input Nhập xác nhận lại mật khẩu
password API
Khi click, hệ thống sẽ xác nhận đắng
7 Register True Button ký và điều hướng sang màn hình
login SCG004
8 Login True Link Data từ Khi click, đối với người dùng đã có

9
 tài khoản, điều hướng sang màn hình
API
login SCG004

2.1.3. SCG004. Login Screen

Require Forma
No Name Reference Note
d t
Hình ảnh về Data từ
1 False Image Hiển thị hình ảnh mô tả về website
website API
Data từ
2 Email True Input Nhập email
API
Data từ
3 Password True Input Nhập mật khẩu
API
Khi click, người dung sẽ nhận được
Forgot Data từ
4 True Link email chứa các bước để setting lại tài
password API
khoản (password)
Khi click, đăng nhập thành công và
5 Login True Button
điều hướng tới màn hình SCU001
Khi click, đối với người dung chưa có
6 Register now True Link tài khoản, điều hướng tới màn hình
SCG003

10
2.1.4. SCG007. Real device testing Screen

Require Forma
No Name Reference Note
d t
Data từ Hiển thị image mặc định khi không
1 Hình ảnh True Image
API có dữ liệu.
Data từ
2 Tiêu đề True Label Hiển thị tiêu đề Real device testing
API
Start your free Khi click, điều hướng đến màn hình
3 Fail Button
trial now đăng ký SCG003

11
2.1.5. SCG005. Contact Screen

Require Forma
No Name Reference Note
d t
Data từ Hiển thị mặc định ngày hiện tại trừ đi
1 Email True Input
API 30.
Data từ Hiện thị mặc định ngày hôm nay.
2 Phone number True Input
API Bằng “Từ ngày” cộng thêm 30 ngày.
Message or Data từ Hiển thị image mặc định khi không
3 True Input
contact support API có dữ liệu.
Khi click, yêu cầu sẽ được confirm
4 Submit True Button
và gửi về hệ thống để giải quyết

12
2.1.6. SCG006. Support Screen

Require
No Name Format Reference Note
d
Data từ Khi click, điều hướng người dung
1 Sign in True Button
API đến màn hình SCG004
Type your Textbo Data từ
2 True Nhập cậu hỏi thắc mắc cần hỗ trợ
question x API
Khi click, sẽ trả lời những vấn đề
3 Search True Button
cần hộ trợ

13
 Gridbo Khi click, điều hướng người dùng
4 Plan&Pricing True
x đến các vấn đề cần support

2.2. Screen Flow cho phía người dùng hệ thống

No Screen Name Description
Màn hình quản lí cung các thiết bị
SCU001 Dashboard - Devices Screen mobile hiện có trên hệ thống mà user
có quyền truy cập và sử dụng
Màn hình quản lí, thống kê các phiên
SCU002 Dashboard – Sessions Screen
làm việc của từng thiết bị
Màn hình quản lí các ứng dụng sẽ và
SCU003 Dashboard – Apps Screen
đã được cài đặt vào thiết bị
Dashboard - Apps - Facebook Màn hình hiển chi tiết một ứng dụng
SCU004
Details Screen đã được đăng kí vào hệ thống
Màn hình hiển thị danh sách các
Dashboard - Apps - Facebook - hành động được phép thực hiện lên
SCU005
Action Screen một ứng dụng đã được đăng kí vào
hệ thống
Dashboard - Apps - Facebook - Màn hình hiển thị danh cách thiết lập
SCU006 Action - Automation snippet và cài đặt ứng dụng lên thiết bị từ
Screen automation script
Màn hình hiển thị chi tiết về một
SCU007 Devices – Details Screen
thiết bị
Màn hình hiển thị các setting của
Device - Automation Settings 1
SCU008 thiết bị cho một phiên automation
Screen
test
Màn hình hiển thị các setting của
Device - Automation Settings 2
SCU009 thiết bị cho một phiên automation
Screen
test

14
 Màn hình hiển thị hình ảnh trực tiếp
từ màn hình thiết bị, đồng thời cho
người dùng tương tác với thiết bị
Device Launch Manual Session thông qua mô phỏng hành động của
SCU010
Screen người dùng thành input từ màn hình
cảm ứng, phím cứng và các cảm biến
của thiết bị để người dùng thực hiện
một phiên manual test.
Màn hình hiển thị hình ảnh trực tiếp
từ màn hình thiết bị khi nó đang
Device Launch Devices
SCU011 được điều khiển bởi automation
Automation Screen
script (một phiên automation test
đang được chạy)
Màn hình hiển thị tổng quát kết quả
SCU012 Session Overview Screen sau khi một phiên automation test
được chạy
Màn hình hiển thị thông tin chi tiết
SCU013 Session Details Screen kết quả sau khi một phiên
automation test được chạy
Màn hình hiển thị các log liên quan
tới device status log (IO Statistics &
SCU014 Session Devices Log Screen
IO Time, …) sau khi một phiên
automation test được chạy
Màn hình hiển thị các log liên quan
SCU015 Session Crash Log Screen tới app crash và system crash sau khi
một phiên automation test được chạy

15
 Hình 2: Flow Screen cho màn hình ứng dụng phía người dùng hệ thống

2.2.1. SCU001. Dashboard - Devices Screen

16
 Require
No Name Format Reference Note
d
1 Mục device True Menu Item

2 Tên project True Drop down list Chọn project

3 Search device False Textbox

Download desktop
4 True Button Chỉ dành cho MacOS
app

Chuyển hướng người

5 Support True Button
dùng đến trang Help desk

6 User Guide True Button

7 Rest APIs Docs True Button

Avatar của user, nếu user

không set avatar thì avatar
8 User avatar True Image box
mặc định là viết tắt hai
chữ cái đầu của tên user

9 User real name True Lable

Chuyển chế độ xem dưới

10 List view True Button
dạng list

Chuyển chế độ xem dưới

11 Card view True Button
dạng card

Device’s status Ẩn/hiện thiết bị theo trạng

12 True Lable
sort thái của nó.

13 Device list view True Table

Device’s status Hiển thị trạng thái của

14 True Badge
indicator thiết bị

Khởi động phiên làm việc

15 Launch device True Button thủ công (Manual Test)
cho thiết bị

16 Device details True Button

17
17 Paging indicator True Pagination

2.2.2. SCU007 - Devices - Details

Require
No Name Format Reference Note
d
Editable
1 Device name True Load từ API User có thể tự đặt lại.
textbox

Setting cho Thiết lập cấu hình cho các

2 automation False Button phiên test tự động. Chuyển
test session đến trang SCU008, SCU009

Đánh dấu thiết bị yêu thích,

Bookmark thiết bị được bookmark sẽ
3 False Button
device được hiển thị lên đầu tiên tại
SCU001.

4 Exit True Button Quay lại trang SCU001.

5 Device details True Label Load từ API

6 Device status True Icon Load từ API

18
 indicator

Khởi động phiên làm việc thủ

Launch
7 True Button công (Manual Test) cho thiết
device
bị, chuyển đến trang SCU010.

2.2.3. SCU008-009 - Device - Automation Settings

19
No Name Required Format Reference Note
Chọn lựa framework mà
script automation sẽ được
Framework Drop Down viết.
1 True Load từ API
selection List
Hiện tại hỗ trợ Appium,
Espresso, XCUITest

Chọn lựa ngôn ngữ mà

script automation sẽ được
Language Drop Down viết.
2 True Load từ API
Selection List Hiện tại hỗ trợ Java, C#,
NodeJS, Ruby, Python,
PHP

Automation Dữ liệu mặc định Chọn tên phiên

3 True Textbox
session name load từ API automation test

Dữ liệu mặc định

4 Description False Textbox
load từ API

Chuyển hướng đến tranh

5 Setting Guide True Button
hướng dẫn SCG006

20
 Copy setting được tạo ra
6 Copy setting Button
vào clipboard

Load dựa theo các

người dùng chọn Chứa setting để trỏ tới
lựa các drop driver cho automation
7 Setting template Rich textbox
down list và sửa script có thể chạy từ xa
đổi các textbox ở trên thiết bị
trên

Drop down Chọn trình duyệt mặc định

8 Browser True Load từ API
list sẽ được thiết bị sử cụng

9 Device name True Textbox Load từ API Tên thiết bị (read-only)

Device Drop down Chọn hướng của thiết bị

10 True Load từ API
Orietation list (ngang – dọc)

Phiên bản phần mềm thiết

11 Platform Version True Textbox Load từ API
bị (read-only)

21
 2.2.4. SCU002 - Dashboard - Sessions

Require
No Name Format Reference Note
d
1 Sessions False Menu Item

Hiển thị số session

2 Running sessions counter False Label Load từ API
đang còn được chạy

Hiển thị tổng số giờ

3 Total running time indicator False Label Load từ API chạy của các
sessions

Hiển thị thông tin

chi tiết về các test
4 Type of test result detail False Card & label Load từ API case đã đang và sẽ
được chạy của từng
loại test.

Card, badge
5 Test type running indicator False Load từ API
& label

6 Lived session list False Table Load từ API Hiễn thị chi tiết các
session còn sống

22
 trong hệ thống. Mỗi
row trong table có
thể click được, sẽ
dẫn tới trang tương
ứng của từng
session

2.2.5. SCU013 - Session Details

Require
No Name Format Reference Note
d
Chuyển hướng người dùng
1 Overview False Button đến trang Overview
SCU012

Chuyển hướng người dùng

đến trang details SCU013
2 Details False Button
(Đã bị disable ở trang
này)

3 Jira Intergation False Button Pour data to Dùng để ghi nhanh kết quả
integrated Jira
23

4 System Metrics False
Phone’s screen live view
5 False
with recorded gesture
Phone’s working details
6 False
timeline
2.2.6. SCU012 - Session Overview
ticket test vào ticket Jira
Hiển thị biểu đồ sử dụng
CPU của thiết bị trong thời
Graph Load from API
gian phiên automation test
được chạy
Hiển thị hình ảnh trực tiếp
từ màn hình thiết bị kèm
Video theo thao tác trên amn2
Load from API
player hình cảm ứng trong thời
gian phiên automation test
được chạy
Thanh timeline chi tiết các
hành động ttương tác lên
Horizontal
Load from API thiết bị trong thời gian
timeline
phiên automation test được
chạy
24
 Require
No Name Format Reference Note
d
1 Phone’s screen live view False Video player Load form API

Card, label,
2 Device info False Load from API
imagebox

Card, label,
3 Session info False Load from API
imagebox

Dùng để chỉnh sửa tên

4 Edit button False Button
session và description

5 Logs section False Card, Button

Đưa người dùng tới

6 Device logs False Button
trang SCU014

Đưa người dùng tới

7 App crash log False Button
trang SCU015

Cho phép người dùng

download file zip có
8 Download all logs False Button
chứa cả Device và App
crash log

25
 2.2.7. SCU014 - Session Devices - Log

Require
No Name Format Reference Note
d
1 Device log modal False Modal Load from API

Cho phép người dùng

2 Device log download False Button download file txt chứa
device log

26
 2.2.8. SCU004 - Dashboard - Apps - Facebook Details

Require
No Name Format Reference Note
d
1 Apps False Menu Item

2 App search False Textfield

Một upload dialog sẽ

hiện ra để người dùng
3 Add app False Button
upload mobile app lên
hệ thống

Ứng dụng sau khi được

Card, Imagebox, icon,
4 Added App False Load from API upload thành công sẽ
drop down list
hiện ở đây

Thông tin chi tiết về

5 Added App details False Textfield Load from API
ứng dụng

6 App settings False Button Load from API

27
 2.2.9. SCU011 - Launch Devices Automation

Require
No Name Format Reference Note
d
Cho phép người dùng mô
phỏng thực hiện các hành
Card &
1 Device action False động vật lí lên thiết bị (Đã
button
bị disable trong màn hình
này)

Phone’s screen Video Load from

2 False
recorded live view player API

Card,
Record duration Load from
3 False badge,
indicator API
label

Cho phép người dùng tải

Card, xuống screenshot của màn
4 Video screenshoot False
button hình thiết bị tại thời điểm
bấm nút

Load from
5 Device logs False Textfield
API

28
6 Play/Stop log False Button

7 Download log False Button

Chuyển hướng người

8 Install App False Button dùng tới màn hình
SCU003

Chuyển hướng người

9 Exit False Button dùng quay lại màn hình
SCU001

29