Automated UI Testing for Web Application using Selenium IDE 3

Automated UI Testing for Web Application using Selenium IDE Cơng cụ - Trình duyệt Mozilla Firefox, ví dụ Firefox Quantum 6.0.1 (32-bit) Trang web: https://www.mozilla.org/en-GB/firefox/new/ - Selenium IDE, ví dụ Selenium Version 3.0.3.0 Trang web: https://addons.mozilla.org/vi/firefox/addon/selenium-ide/versions/ Quy trình Bước Mở trình duyệt Firefox Selenium IDE Sử dụng Selenium IDE để ghi trình chạy web application cần kiểm thử lưu vào tập tin có phần mở rơng side (ví dụ: example.side) có cấu trúc JSON Tập tin lưu kết mong đợi (expected result) trường hợp kiểm thử (test-case) Bước Thay đổi web application (sửa lỗi, nâng cấp, …) thành Bước Sử dụng Selenium IDE mở tập tin side lưu Bước (ví dụ: example.side) chạy tập tin để kiểm tra web application Nguyễn Trung Trực Giới thiệu Selenium IDE Nhấn vào biểu tượng (icon) Selenium IDE Selenium IDE Xuất hiệu hình Selenium IDE Project title Run current test Open project Save project Enable / Disable record notifications Add new test Tests / Test suites Test Playback Run all tests in suite base URL Run current command Test execution speed Start / Stop recording Rename / Delete test Clear log Project title: tên dự án Tests: liệt kê danh sách kiểm thử (test) hiển thị bên Một kiểm thử bao gồm nhiều lệnh (command) Add new test: thêm kiểm thử Rename test: đặt lại tên kiểm thử Nguyễn Trung Trực Delete test: xóa bỏ kiểm thử Run current test: chạy kiểm thử tại, kiểm thử chọn (highlight) Test suite: kiểm thử bao gồm nhiều kiểm thử Run all tests in suite: chạy tất kiểm thử kiểm thử Run current command: chạy lệnh chọn (highlight) Playback base URL: URL web application cần kiểm thử (under test) Test execution speed: tốc độ thực kiểm thử, từ nhanh (Fast) đến chậm (Slow) Open project: mở tập tin dự án, có phần mở rộng side Save project: lưu tập tin dự án, có phần mở rộng side Enable / Disable record notifications: cho phép / không cho phép hiển thị thơng báo q trình ghi Nguyễn Trung Trực Ghi trình chạy web application cần kiểm thử Mở trình duyệt Firefox Mở trang web http://www.cse.hcmut.edu.vn/site/ Title Text Gọi Selenium IDE Xuất cửa sổ Selenium IDE Sửa tên dự án "Untitled Project" thành "Selenium" Sửa tên kiểm thử "Untitled" thành "Test Case 1" Nhập liệu cho ô "Playback base URL" URL trang web cần kiểm thử, ví dụ: http://www.cse.hcmut.edu.vn/site/ Chỉnh "Test Execution Speed": "Fast" đến "Slow" Nhấn nút "Start recording", vòng tròn đỏ nhấp nháy, cho ẩn cửa sổ Selenium IDE Trong trang http://www.cse.hcmut.edu.vn/site/, chọn số đối tượng trang này, Selenium IDE ghi lại trình tự chọn đối tượng Ví dụ: - Click chuột phải "TRƯỜNG ĐẠI HỌC BÁCH KHOA – Khoa Khoa Học Kỹ Thuật Máy Tính" Chọn "Selenium IDE", chọn "Verify Title", tiêu đề "University of Technology" - Click chuột phải "TRƯỜNG ĐẠI HỌC BÁCH KHOA – Khoa Khoa Học Kỹ Thuật Máy Tính" Chọn "Selenium IDE", chọn "Verify Text" - Click chuột phải chữ "TRANG CHỦ" Chọn "Selenium IDE", chọn "Verify Text" - Click chuột phải chữ "ĐÀO TẠO" Chọn "Selenium IDE", chọn "Verify Text" Nguyễn Trung Trực - Click chuột trái mục "Tuyển sinh" - Click chuột trái mục "Doanh nghiệp" - Click chuột phải chữ "Thư cảm ơn Doanh nghiệp" Chọn "Selenium IDE", chọn "Verify Text" Trong trình ghi, "Enable recording notification" xuất thơng báo cho lần thao tác Hiển thị cửa sổ "Selenium IDE", nhấn nút "Stop recording" Nhấn nút "Save project", chọn thư mục nhập tên "Selenium", nhấn nút "Save" Selenium IDE lưu toàn thao tác làm vào tập tin "Selenium.side" có dạng cấu trúc JSON 10 Nhấn nút "Run current test" để Selenium IDE chạy lại kiểm thử Kết kiểm tra hiển thị tab "Log" Nguyễn Trung Trực Nguyễn Trung Trực Thêm chỉnh sửa kiểm thử Thêm kiểm thử Nhấn nút "Add new test" (nút +), xuất cửa sổ sau, nhập tên kiểm thử, ví dụ "Test case 2", nhấn nút "Add" Một kiểm thử bao gồm nhiều lệnh (command) Các công việc liên quan đến lệnh (command) Chọn lệnh tại, nhấn chuột phải, xuất menu sau: Chỉnh sửa nội dung lệnh Chọn lệnh tại, chỉnh sửa nội dung lệnh ô bên gồm "Command", "Target", "Value", "Comment" Nguyễn Trung Trực Thêm lệnh Nhấn chuột phải vào lệnh, chọn "Insert new command", thêm lệnh vào cuối Nhấn vào combo box để danh sách lệnh Nguyễn Trung Trực Chạy kiểm thử web application cần kiểm thử Mở trình duyệt Firefox, gọi Selenium IDE, nhấn nút "Open project", mở tập tin "Selenium.side" Nhấn nút "Run all tests in suite" nút "Run current test" để chạy kiểm tra web application Kết kiểm tra hiển thị tab "Log" Nguyễn Trung Trực Chỉnh sửa nội dung tập tin side Mở trang web https://codebeautify.org/online-json-editor (hoặc https://jsoneditoronline.org/) chép nội dung tập tin "Selenium.side" vào ô bên trái Nhấn nút "JSON tree editor" [>] để xem liệu dạng cấu trúc Nhấn nút "JSON code editor" [